I'm using Font Awesome 5 in my xamarin app. I would like to show an icon in a RadButton (Telerik):
<telerikInput:RadButton
Grid.Row="0" Grid.Column="0"
Text=""
FontSize="30"
Style="{StaticResource TelerikButtonStyle}"
Command="{Binding MyCommand}">
<telerikInput:RadButton.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="Android" Value="FontAwesome5Free-Solid-900.otf#Font Awesome 5 Free Solid" />
<On Platform="Windows" Value="Assets/Fonts/FontAwesome5Free-Solid-900.otf#Font Awesome 5 Free Solid" />
</OnPlatform>
</telerikInput:RadButton.FontFamily>
</telerikInput:RadButton>`
For Android, this works fine, but in UWP it shows a blank box.
On Platform should be using "UWP" instead of the ""Windows""
<On Platform="UWP" Value="Assets/Fonts/FontAwesome5Free-Solid-900.otf#Font Awesome 5 Free Solid" />
Font Awesome does not contain Solid in the Font Name. Try removing Solid from the name as below:
<On Platform="Windows" Value="Assets/Fonts/FontAwesome5Free-Solid-900.otf#Font Awesome 5 Free" />
EDIT:
If you are using Xamarin.Forms 2.3.4 or greater than replace Windows with UWP as below:
<On Platform="UWP" Value="Assets/Fonts/FontAwesome5Free-Solid-900.otf#Font Awesome 5 Free" />
I have tried this in blank solution and got it working as follows:
Added the font in the Assets/Fonts folder in UWP project and made sure it has the correct name (in my case I renamed the font to FontAwesome5.otf) and Build Action of Content:
Used the following to reference the font (note - this sample only sets UWP path, so you should add the other platforms as in your question):
XAML:
<Label Text=""
FontSize="40"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="UWP" Value="Assets/Fonts/FontAwesome5.otf#Font Awesome 5 Free" />
</OnPlatform>
</Label.FontFamily>
</Label>
The proper # suffix can be found out using some font viewer apps, like dp4 Font Viewer:
Result:
Related
Default Emojis are working fine in my Xamarin.Forms app and it's colorful. When I add Twitter color fonts its become B/W (black-white). This Procedure I followed.
Initialization
[assembly: ExportFont( "TwitterColorEmoji.ttf", Alias = "TwitterColorEmoji" )]
Here is the example code in xaml
<!-- This is not working -->
<Label x:Name="emojilbl" Text="\U+1F1E9" Margin="20,0,0,0"></Label>
<Label
x:Name="emoji2lbl"
Text="🇦🇨"
Margin="20,0,0,0"
TextColor="#5EE514"
FontSize="40"
FontFamily="TwitterColorEmoji"></Label>
<!-- This is not working -->
<Image BackgroundColor="Black">
<Image.Source>
<FontImageSource
FontFamily="TwitterColorEmoji"
Glyph="🇦🇨"
Size="40"
>
</FontImageSource>
</Image.Source>
</Image>
<!-- This is working fine with default font -->
<Label Text="🇦🇨" Margin="20,0,0,0" FontSize="40"/>
Why emoji is not showing its own color.
Thank for the help in advanced.
Solved issue by changing "Embedded resource" to "Resource" option.
I'm trying to define the FontAwesome fontFamily in the App.xaml so I can use staticresource in my code.
Setting the fontFamily directly in the page is working. Problem is when I try to get this value from the StaticResource I have a blank page showing.
App.xaml:
<?xml version="1.0" encoding="utf-8" ?>
<prism:PrismApplication xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:prism="clr-namespace:Prism.Unity;assembly=Prism.Unity.Forms"
x:Class="RedPrairie.App">
<Application.Resources>
<!-- Application resource dictionary -->
<ResourceDictionary>
<!-- Font Awesome fonts path per plateform -->
<OnPlatform x:Key="FontAwesomeBrands" x:TypeArguments="x:String" Android="FontAwesome5Brands.otf#Font Awesome 5 Brands Regular" iOS="Font Awesome 5 Free" />
<OnPlatform x:Key="FontAwesomeSolid" x:TypeArguments="x:String" Android="FontAwesome5Solid.otf#Font Awesome 5 Free Solid" iOS="Font Awesome 5 Free" />
<OnPlatform x:Key="FontAwesomeRegular" x:TypeArguments="x:String" Android="FontAwesome5Regular.otf#Font Awesome 5 Free Regular" iOS="Font Awesome 5 Free" />
</ResourceDictionary>
</Application.Resources>
</prism:PrismApplication>
My Page:
<Label Text="{x:Static model:Icon.far_user}"
FontFamily="{StaticResource FontAwesomeRegular}"
FontSize="Large"
TextColor="SkyBlue"
VerticalOptions="Center">
</Label>
working Page :
<Label Text="{x:Static model:Icon.far_user}"
FontSize="Large"
TextColor="SkyBlue"
VerticalOptions="Center">
<Label.FontFamily>
<OnPlatform
x:TypeArguments="x:String"
Android="FontAwesome5Regular.otf#Font Awesome 5 Free Regular"
iOS="Font Awesome 5 Free" />
</Label.FontFamily>
</Label>
Another working Page :
<Label Text=""
FontSize="Large"
TextColor="SkyBlue"
VerticalOptions="Center">
<Label.FontFamily>
<OnPlatform
x:TypeArguments="x:String"
Android="FontAwesome5Regular.otf#Font Awesome 5 Free Regular"
iOS="Font Awesome 5 Free" />
</Label.FontFamily>
</Label>
Content of class Icon :
public static class Icon
{
/*Regular Icons - prefixed with FAR_*/
public static string far_address_book = "\uf2b9";
public static string far_address_card = "\uf2bb";
public static string far_angry = "\uf556";
public static string far_arrow_alt_circle_down = "\uf358";
public static string far_arrow_alt_circle_left = "\uf359";
public static string far_arrow_alt_circle_right = "\uf35a";
public static string far_arrow_alt_circle_up = "\uf35b";
public static string far_user = "\uf007";
...
}
What am I doing wrong here?
Simplify the font filename and use font names as shown below.
It seems that Android is not strict on the font name, however, if the font filename is incorrect a RuntimeException: 'Font asset not found ' is thrown.
On iOS, if the font filename is incorrect in the UIAppFonts array key in Info.plist, or the font name is incorrect, the glyph/text appears as a question mark within a frame.
On UWP, with an incorrect font filename or font family name, the glyph/text appears just as a frame.
Font file location and content type in project:
iOS: Font file location: Resources folder. Content type: BundleResource
Android: Font file location: Assets folder. Content type: AndroidAsset
UWP: Font file location: Assets folder. Content type: Content
ResourceDictionary:
<OnPlatform x:TypeArguments="x:String" x:Key="FaRegular">
<On Platform="iOS" Value="FontAwesome5Free-Regular" />
<On Platform="Android" Value="FontAwesome5Regular.otf#Font Awesome Regular" />
<On Platform="UWP" Value="Assets/FontAwesome5Regular.otf#Font Awesome 5 Free" />
</OnPlatform>
<OnPlatform x:TypeArguments="x:String" x:Key="FaSolid">
<On Platform="iOS" Value="FontAwesome5Free-Solid" />
<On Platform="Android" Value="FontAwesome5Solid.otf#Font Awesome Solid" />
<On Platform="UWP" Value="Assets/FontAwesome5Solid.otf#Font Awesome 5 Free" />
</OnPlatform>
<OnPlatform x:TypeArguments="x:String" x:Key="FaBrands">
<On Platform="iOS" Value="FontAwesome5Brands-Regular" />
<On Platform="Android" Value="FontAwesome5Brands.otf#Font Awesome Brands" />
<On Platform="UWP" Value="Assets/FontAwesome5 Brands.otf#Font Awesome 5 Brands" />
</OnPlatform>
Example Label:
<Label Text="" TextColor="Accent" FontFamily="{StaticResource FaRegular}" />
<Label Text="" TextColor="Accent" FontFamily="{StaticResource FaSolid}" />
<Label Text="" TextColor="Accent" FontFamily="{StaticResource FaBrands}" />
For iOS add the following using Open With > XML editor in Info.plist:
<key>UIAppFonts</key>
<array>
<string>FontAwesome5Brands.otf</string>
<string>FontAwesome5Regular.otf</string>
<string>FontAwesome5Solid.otf</string>
</array>
In Xamarin.Forms 3.2.0, Xamarin Forms introduced new New OnPlatform/OnIdiom XAML Extension
As per the blog we can re-write the below code,
<Button Text="Extensions" BackgroundColor="Black" TextColor="White">
<Button.HeightRequest>
<OnPlatform x:TypeArguments="x:Double" Default="40">
<On Platform="iOS" Value="60"/>
<On Platform="Android" Value="80"/>
</OnPlatform>
</Button.HeightRequest>
with the new extension.
<Button Text="Extensions" BackgroundColor="Black" TextColor="White"
HeightRequest="{OnPlatform iOS=60, Android=80, Default=40}"/>
Here my doubt is how I can reuse the same OnIdiom XAML Extension for Margin / Thickness.
You should be able to do it like this: <Button Margin="{OnPlatform Android='10,5,10,0', iOS='10,20,10,0'}" />
It's up to you which syntax you like more!
I am working on a Xamarin.Forms project and am having issues with the scaling of images with Windows Phone. Windows and Android
I'm using a Grid to display all of the icons, here is the code I used for 1 image button.
<Button Image="cam.png"
VerticalOptions="Center"
Grid.Row="0" Grid.Column="0"
BorderColor="Transparent"
BackgroundColor="Transparent"
Clicked="OnTrafficClicked"/>
I've found a couple similar posts about this, but I don't understand how I would implement scaling on platform when there are multiple images.
I tried this, but am unable to run the program
<Image.Scale>
<OnPlatform x:TypeArguments="Scale"
WinPhone="1.5" />
</Image.Scale>
https://forums.xamarin.com/discussion/19525/image-source-with-onplatform-in-xaml
I was able to figure it out, in case anyone has this same issue this is what I did:
<ContentPage.Resources>
<ResourceDictionary>
<OnPlatform x:Key="stdScaling" x:TypeArguments="x:Double"
iOS="1.0"
Android="1.0"
WinPhone="2.5" />
</ResourceDictionary>
</ContentPage.Resources>
then for the button, I put
Scale= "{StaticResource stdScaling}"
How can I change it so that any button I create for my Windows 8 app has a differently-colored Segoe UI glyph than the default (white)? I tried the following to no avail:
<Button Style="{StaticResource AppBarButtonStyle}"
AutomationProperties.Name="Button" Content="">
<Button.ContentTemplate>
<DataTemplate>
<Path Fill="red"/>
</DataTemplate>
</Button.ContentTemplate>
</Button>
My hopes were that this would create a solid red circle for a button rather than a white one, but it renders nothing at all instead. Help greatly appreciated!
Use Foreground property.
<Button Style="{StaticResource AppBarButtonStyle}" Foreground="Red"
AutomationProperties.Name="Button" Content="" />