Good day! I am using Prism 7.2 along with Xamarin.Forms 4.2 and I am trying to use an external asset for fonts. I have defined them on my app resources and used it on my xaml code, however, when I try to use the static extension {x:Static} for the value of Text combined with Style that also has a static resource extension {StaticResource} the text doesn't appear to be working. Below is the code that I am using.
<prism:PrismApplication.Resources>
<ResourceDictionary>
<OnPlatform x:Key="LineAwesomeFontFamily" x:TypeArguments="x:String">
<On Platform="Android" Value="line-awesome.ttf#LineAwesome"/>
<On Platform="iOS" Value="lineawesome"/>
</OnPlatform>
<Style x:Key="LineAwesomeFonts"
TargetType="Label">
<Setter Property="FontFamily"
Value="{StaticResource LineAwesomeFontFamily }" />
</Style>
<Style TargetType="Button">
<Setter Property="BackgroundColor" Value="Green"/>
</Style>
</ResourceDictionary>
</prism:PrismApplication.Resources>
Calling it in a view
<Label Text="{x:Static fonts:LineAwesomeFonts.Adjust}"
Style="{StaticResource LineAwesomeFonts}"
TextColor="Black">
</Label>
If I try in a different way
<Label x:Name="testLabel"
FontSize="28" TextColor="Black">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="Android" Value="line-awesome.ttf#LineAwesome"/>
</OnPlatform>
</Label.FontFamily>
</Label>
and call the testLabel on xaml.cs for it to have a value it will work.
Any idea what am I doing wrong? There are no errors to be found when it compiled.
Okay, it is my fault.
public App(IPlatformInitializer platformInitializer) : base(platformInitializer)
{}
protected override void OnInitialized()
{
InitializeComponent(); //moved this away from App constructor and put it here
NavigationService.NavigateAsync("Test");
}
Though it was weird because my InitializeComponent(); on the other project was on the App Constructor and resources was working as intended.
Related
I have a label in my app UI that takes HTML data. So I set TextType="Html" property for that label. In small-screen devices I need 16 and for big-screen devices I need 32 as it's font size. But no change in label font size because of the TextType="Html" property.
XAML Label Code
<Label
x:Name="message_label"
VerticalOptions="Start"
VerticalTextAlignment="Center"
TextType="Html"
TextColor="Black"
Margin="5"
FontSize="Medium">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="iOS" Value="MouseMemoiresRegular" />
<On Platform="Android" Value="MouseMemoiresRegular.ttf#MouseMemoiresRegular" />
<On Platform="UWP" Value="Assets/Fonts/MouseMemoiresRegular.ttf#MouseMemoiresRegular" />
</OnPlatform>
</Label.FontFamily>
<Label.FontSize>
<OnIdiom x:TypeArguments="x:Double">
<OnIdiom.Phone>16</OnIdiom.Phone>
<OnIdiom.Tablet>32</OnIdiom.Tablet>
</OnIdiom>
</Label.FontSize>
</Label>
So how can I increase the font size in this case?
If you want to put html in label, and want to increase the fontsize of label, I suggest you can use Xam.Plugin.HtmlLabel.
Firstly, you can install Xam.Plugin.HtmlLabel in your project,
Then render this in different platform.
iOS: AppDelegate.cs
HtmlLabelRenderer.Initialize();
global::Xamarin.Forms.Forms.Init();
Android: MainActivity.cs
HtmlLabelRenderer.Initialize();
global::Xamarin.Forms.Forms.Init(this, bundle);
UWP: App.xaml.csenter code here
var rendererAssemblies = new[] { typeof(HtmlLabelRenderer).GetTypeInfo().Assembly };
Xamarin.Forms.Forms.Init(e, rendererAssemblies);
HtmlLabelRenderer.Initialize();
than use the HtmlLable like this:
<htmllabel:HtmlLabel FontSize="12" Text="<h1>Hello World!</h1><br/>SecondLine" />
<htmllabel:HtmlLabel FontSize="20" Text="<h1>Hello World!</h1><br/>SecondLine" />
You can change different fontsize in htmllabel.
I have following button in my Xamarin Forms application
<Button
Grid.Column="1"
Grid.Row="0">
<Button.ImageSource>
<FontImageSource Glyph="" FontFamily="{StaticResource IconFont}" Color="{StaticResource BaseColor}"/>
</Button.ImageSource>
</Button>
where IconFont is:
<OnPlatform x:TypeArguments="x:String" x:Key="IconFont">
<On Platform="Android" Value="materialdesignicons-webfont.ttf#Material design" />
<On Platform="iOS" Value="Material Design Icons" />
</OnPlatform>
Everything is working fine. Now, because all of my icons are in materialdesignicons-webfont and I will never use different icons I decided to move entire styling to App.xaml. I would like to set default properties like that:
<Style TargetType="FontImageSource">
<Setter Property="FontFamily" Value="{StaticResource IconFont}" />
<Setter Property="Color" Value="{StaticResource BaseColor}" />
</Style>
And use button by passing glyph only.
<Button
Grid.Column="1"
Grid.Row="0">
<Button.ImageSource>
<FontImageSource Glyph=""/>
</Button.ImageSource>
</Button>
For some reasons Icon is not rendered without specifying FontFamily and Color directly in FontImageSource. Am I missing something?
Is there some way to call my button in simpler way? F.e.
<Button
Grid.Column="1"
Grid.Row="0"
MDGlyph="" />
Unfortunately it is not possible to style a FontImageSource currently. However, there is a github issue requesting this capability.
have you tried this:
<Style x:Key="ButtonWithFontImageSource" TargetType="Button">
<Setter Property="ImageSource">
<FontImageSource
FontFamily="{StaticResource FontIcons}"
Glyph="{DynamicResource IconText}">
</FontImageSource>
<Setter>
</Style>
I have using navigation page in my application. I have to set font icon to toolbar item. But it shows cross symbol because i have not set the font family. So anyone suggest me to set font icon in toolbar item is possible or not.
With Xamarin Forms 4.x (if I remember the version correctly) they have add a FontImageSource type that can be used on ToolbarItems. A few things you need to do...
Add the font files to your platform projects. On Android, add them in the Assets folder with build action set to AndroidAsset. On iOS, add them in the Resources folder with build action set to BundleResource. Also on iOS, edit your info.plist and add
<key>UIAppFonts</key>
<array>
<string>fontname.ttf</string>
<string>fontname2.ttf</string>
...
</array>
Now Xamarin is able to use the fonts.
I defined some application resources to easily load fonts:
<OnPlatform x:Key="FontAwesomeLightFontFamily" x:TypeArguments="x:String">
<On Platform="Android" Value="fa-light-300.ttf#Font Awesome 5 Pro Light" />
<On Platform="iOS" Value="FontAwesome5Pro-Light" />
</OnPlatform>
<OnPlatform x:Key="FontAwesomeRegularFontFamily" x:TypeArguments="x:String">
<On Platform="Android" Value="fa-regular-400.ttf#FontAwesome5ProRegular" />
<On Platform="iOS" Value="FontAwesome5ProRegular" />
</OnPlatform>
<OnPlatform x:Key="FontAwesomeSolidFontFamily" x:TypeArguments="x:String">
<On Platform="Android" Value="fa-solid-900.ttf#FontAwesome5ProSolid" />
<On Platform="iOS" Value="FontAwesome5ProSolid" />
</OnPlatform>
That is sitting in a resource dictionary that is merged into App.xaml resources.
Now, when I want to use a font icon as a toolbar icon imagesource, I can do the following:
<Page.ToolbarItems>
<ToolbarItem Command="{Binding SomeCommand}">
<ToolbarItem.IconImageSource>
<FontImageSource
FontFamily="{StaticResource FontAwesomeSolidFontFamily}"
Glyph="{x:Static fonts:FontAwesomeIcon.Cog}"
Size="{StaticResource ToolbarIconImageSourceSize}" />
</ToolbarItem.IconImageSource>
</ToolbarItem>
</Page.ToolbarItems>
If you want a static class to define glyph icons as opposed to having to enter the unicode (my FontAwesomeIcon class used in glyph above), there is a great tool at https://andreinitescu.github.io/IconFont2Code/ that will generate a C# static class based on an uploaded font file. It ends up looking like
public static class FontAwesomeIcon
{
public const string Abacus = "\uf640";
public const string Ad = "\uf641";
public const string AddressBook = "\uf2b9";
public const string AddressCard = "\uf2bb";
public const string Adjust = "\uf042";
public const string AirFreshener = "\uf5d0";
...
}
<ContentPage.ToolbarItems>
<ToolbarItem Order="Primary" Command="{Binding ExportDocumentCommand}">
<ToolbarItem.IconImageSource>
<FontImageSource FontFamily="{StaticResource FontAwesomeSolid}" Size="Subtitle"
Glyph="{x:Static fontawesome:FontAwesomeIcons.FileExport}" />
</ToolbarItem.IconImageSource>
</ToolbarItem>
</ContentPage.ToolbarItems>
in app.xaml
<OnPlatform x:TypeArguments="x:String" x:Key="FontAwesomeSolid">
<On Platform="iOS" Value="FontAwesome5Free-Solid" />
<On Platform="Android" Value="Fonts/FontAwesome5Solid.otf#Regular" />
<On Platform="UWP" Value="/Assets/FontAwesome5Solid.otf#Font Awesome 5 Free" />
</OnPlatform>
for work this line "Glyph="{x:Static fontawesome:FontAwesomeIcons.FileExport}""
you need add on page
xmlns:fontawesome="clr-namespace:YourProjectName.Styles"
and add class from GitHub
You can try to use FontAwesome
First,we need to go to website: https://fontawesome.com/ to get vector icons and social logos on website with Font Awesome.
After we download the font and put it in our app, we can use it flexibly.
Here is a demo you can check it.
The main code is as follows:
App.xaml
<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="MyFontApp.App">
<Application.Resources>
<ResourceDictionary>
<OnPlatform x:TypeArguments="x:String"
x:Key="FontAwesomeBrands">
<On Platform="Android"
Value="FontAwesome5Brands.otf#Regular" />
<On Platform="iOS"
Value="FontAwesome5Brands-Regular" />
<On Platform="UWP"
Value="/Assets/FontAwesome5Brands.otf#Font Awesome 5 Brands" />
</OnPlatform>
<OnPlatform x:TypeArguments="x:String"
x:Key="FontAwesomeSolid">
<On Platform="Android"
Value="FontAwesome5Solid.otf#Regular" />
<On Platform="iOS"
Value="FontAwesome5Free-Solid" />
<On Platform="UWP"
Value="/Assets/FontAwesome5Solid.otf#Font Awesome 5 Free" />
</OnPlatform>
<OnPlatform x:TypeArguments="x:String"
x:Key="FontAwesomeRegular">
<On Platform="Android"
Value="FontAwesome5Regular.otf#Regular" />
<On Platform="iOS"
Value="FontAwesome5Free-Regular" />
<On Platform="UWP"
Value="/Assets/FontAwesome5Regular.otf#Font Awesome 5 Free" />
</OnPlatform>
</ResourceDictionary>
</Application.Resources>
class FontAwesomeIcons
namespace MyFontApp.Utils
{
public static partial class FontAwesomeIcons
{
public const string FiveHundredPX = "\uf26e";
public const string Abacus = "\uf640";
public const string AccessibleIcon = "\uf368";
// other font icon codes
}
}
And we use like this:
<NavigationPage.TitleView >
<StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand">
<Label Text="{x:Static Utils:FontAwesomeIcons.Map}"
FontFamily="{StaticResource FontAwesomeSolid}"/>
<Button Text="{x:Static Utils:FontAwesomeIcons.Anchor}"
FontFamily="{StaticResource FontAwesomeSolid}"/>
</StackLayout>
</NavigationPage.TitleView>
The result is:
You can review the full demo here.
For more details, you can check: https://medium.com/#tsjdevapps/use-fontawesome-in-a-xamarin-forms-app-2edf25311db4
I'm trying to build a page which uses data binding to fill a WebView which is hosted on a StackLayout. Here's the XAML for that content page:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="GES.Views.DetailsPage"
xmlns:di="clr-namespace:GES.DI;assembly=GES"
xmlns:c="clr-namespace:GES.Views.Converters;assembly=GES"
di:ServiceLocator.AutoWireViewModel="true"
Padding="15, 10, 15, 10"
Title="Ensino Superior">
<ContentPage.Resources>
<ResourceDictionary>
<c:HtmlSourceConverter x:Key="htmlConverter"/>
<Style x:Key="title" TargetType="Label">
<Setter Property="FontAttributes" Value="Bold" />
<Setter Property="TextColor" Value="{StaticResource colorPrimary}" />
<Setter Property="FontSize" Value="16" />
</Style>
<Style x:Key="dateText" TargetType="Label">
<Setter Property="TextColor" Value="{StaticResource lightGray}" />
<Setter Property="FontSize" Value="10"></Setter>
<Setter Property="FontAttributes" Value="Bold"></Setter>
</Style>
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<ScrollView>
<StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Label Text="{Binding Path=News.Title}"
Margin="0, 10, 0, 10"
Style="{StaticResource title}"></Label>
<Label Text="{Binding Path=News.PublicationDate, StringFormat='{0:dd/MM/yyyy}'}"
HorizontalTextAlignment="End"
Margin="0, 0, 10, 10"
Style="{StaticResource dateText}"></Label>
<WebView Margin="0, 10, 0, 10"
Source="{Binding Path=News.Contents, Converter={StaticResource htmlConverter}}">
</WebView>
</StackLayout>
</ScrollView>
</StackLayout>
</ContentPage.Content>
</ContentPage>
Since the News.Contents property returns an HTML snippet, I've built a custom converter to transform the text into an HtmlWebViewSource:
public class HtmlSourceConverter: IValueConverter{
public object Convert(object value,
Type targetType,
object parameter,
CultureInfo culture) {
var html = new HtmlWebViewSource();
if (value is string h &&
!string.IsNullOrEmpty(h)) {
html.Html = HttpUtility.HtmlDecode(h);
}
return html;
}
public object ConvertBack(object value,
Type targetType,
object parameter,
CultureInfo culture) =>
throw new NotImplementedException();
}
Now, the problem. When the page is loaded, the WebView component will only render a small white rectangle...Rotating the device (ex.: going from portrai to landscape or vice-versa) does show the WebView's content. For instance, lets assume I'm using the device in portrait mode. Loading the page shows the following:
However, if I rotate my device, it will show the contents:
It looks like the WebView is not rendering correctly on first load...Btw, if I load the page on landscape, then I'll have to turn into portrait mode to see anything...
I've tried searching online and I did find an old bug, but it seems like it has been fixed (I'm using the latest stable version of the Xamarin Forms assembly)
Any clues on what's going on?
For anyone interested, I've followed this post to create a custom webview renderer...
In a style in xamarin forms (defined in xaml) I can define values platform specific, like this:
<OnPlatform x:TypeArguments="Font" Android="30" iOS="40" WinPhone="20" x:Key="TitleFontSize" />
<Style x:Key="MyTitleLabel" TargetType="Label"">
<Setter Property="Font" Value="{StaticResource TitleFontSize}" />
</Style>
Can I also define the style in a way, so that the value of "Font" is kept to the default (not set at all) for some plarforms?
Something like this:
<Style x:Key="MyTitleLabel" TargetType="Label"">
<OnPlatform>
<OnPlatform.Android>
<Setter Property="Font" Value="30" />
</OnPlatform.Androud>
</OnPlatform>
</Style>
There is no way avoid setting a value - if no value is specified it will default to default(T).
But, with the latest XF version (> 2.4.0.282) there is a Default property available that you can use to specify the fallback value.
<!-- specify default value here -->
<OnPlatform x:TypeArguments="x:Double" Default="25">
<OnPlatform.Android>
<Setter Property="Font" Value="30"/>
</OnPlatform.Android>
</OnPlatform>
This should work:
<Style x:Key="MyTitleLabel" TargetType="Label"">
<Setter Property="Font">
<Setter.Value>
<OnPlatform x:TypeArguments="x:Double">
<On Platform="Android">30</On>
<!--?<On Platform="iOS">20</On>-->
</OnPlatform>
</Setter.Value>
</Setter>
</Style>