Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

Defining Font with StaticResource at Xamarin.Form > 2.4

Hi,

I am upgrading my Xamarin.Form from 2.3, but it seems that there are some changes in Font.

I have this in my App.xaml

<OnPlatform x:TypeArguments="Font" x:Key="FontAwesomeBar">
    <OnPlatform.iOS>
        <Font FontFamily="FontAwesome" FontSize="24" />
    </OnPlatform.iOS>
    <OnPlatform.Android>
        <Font FontFamily="FontAwesome" FontSize="28" />
    </OnPlatform.Android>
</OnPlatform>

<Style x:Key="TopBarButtonStyle" TargetType="Button">
    <Setter Property="TextColor" Value="White"/>
    <Setter Property="Font" Value="{StaticResource FontAwesomeBar}"/>
    <Setter Property="BackgroundColor" Value="Transparent"/>
    <Setter Property="WidthRequest" Value="35"/>
    <Setter Property="VerticalOptions" Value="Center"/>
    <Setter Property="HorizontalOptions" Value="Center"/>
</Style>

I received this error message.
"Cannot assign property "FontFamily": Property does not exists, or is not assignable, or mismatching type between value and property"

I looked out their release note, and turned out they changed Font to FontElement
https://github.com/xamarin/Xamarin.Forms/pull/799

But I could not figured out how to solve this. When I tried to change Font to FontElement, I received this error.
"Default constructor not found for type Xamarin.Forms.FontElement"

Anyone had the same problem?

Tagged:

Best Answer

  • PerHungebergMllerPerHungebergMller DKMember ✭✭✭
    edited December 2017 Accepted Answer

    @rizkyario Set FontFamily and FontSize in your button style instead.

    <Style x:Key="TopBarButtonStyle" TargetType="Button">
        <Setter Property="TextColor" Value="White"/>
        <Setter Property="FontFamily" Value="{StaticResource FontAwesome}"/>
        <Setter Property="FontSize" Value="{StaticResource FontBarSize}"/>
        <Setter Property="BackgroundColor" Value="Transparent"/>
        <Setter Property="WidthRequest" Value="35"/>
        <Setter Property="VerticalOptions" Value="Center"/>
        <Setter Property="HorizontalOptions" Value="Center"/>
    </Style>
    

    Then split your OnPlatform element into two OnPlatform element like so:

    <OnPlatform x:Key="FontAwesome"
                x:TypeArguments="x:String">
        <On Platform="iOS, Android">FontAwesome</On>
        <On Platform="UWP">FontAwesomeWindows</On>
    </OnPlatform>
    

    Note that the FontAwesome OnPlatform element can have a different font family name for each platform.
    You could also just set FontFamily to "FontAwesome" directly in your style if you know that the font name is the same on all platforms.

    The FontSize can be handled for each platform this simple way:

    <OnPlatform x:Key="FontBarSize"
                x:TypeArguments="x:Double">
        <On Platform="iOS">24</On>
        <On Platform="Android, UWP">28</On>
    </OnPlatform>
    

Answers

  • PerHungebergMllerPerHungebergMller DKMember ✭✭✭
    edited December 2017 Accepted Answer

    @rizkyario Set FontFamily and FontSize in your button style instead.

    <Style x:Key="TopBarButtonStyle" TargetType="Button">
        <Setter Property="TextColor" Value="White"/>
        <Setter Property="FontFamily" Value="{StaticResource FontAwesome}"/>
        <Setter Property="FontSize" Value="{StaticResource FontBarSize}"/>
        <Setter Property="BackgroundColor" Value="Transparent"/>
        <Setter Property="WidthRequest" Value="35"/>
        <Setter Property="VerticalOptions" Value="Center"/>
        <Setter Property="HorizontalOptions" Value="Center"/>
    </Style>
    

    Then split your OnPlatform element into two OnPlatform element like so:

    <OnPlatform x:Key="FontAwesome"
                x:TypeArguments="x:String">
        <On Platform="iOS, Android">FontAwesome</On>
        <On Platform="UWP">FontAwesomeWindows</On>
    </OnPlatform>
    

    Note that the FontAwesome OnPlatform element can have a different font family name for each platform.
    You could also just set FontFamily to "FontAwesome" directly in your style if you know that the font name is the same on all platforms.

    The FontSize can be handled for each platform this simple way:

    <OnPlatform x:Key="FontBarSize"
                x:TypeArguments="x:Double">
        <On Platform="iOS">24</On>
        <On Platform="Android, UWP">28</On>
    </OnPlatform>
    
  • rizkyariorizkyario USMember ✭✭

    @PerHungebergMller It works like a charm! Thank you!

Sign In or Register to comment.