Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Global styles for FontImageSource property

I have following button in my Xamarin Forms application

    <Button
        Grid.Column="1"
        Grid.Row="0">
        <Button.ImageSource>
            <FontImageSource Glyph="&#xF072;" 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="&#xF072;"/>
        </Button.ImageSource>
    </Button>   
  1. For some reasons Icon is not rendered without specifying FontFamily and Color directly in FontImageSource. Am I missing something?

  2. Is there some way to call my button in simpler way? F.e.

    <Button
        Grid.Column="1"
        Grid.Row="0"
        MDGlyph="&#xF072;" />
like image 1000
Adam Mrozek Avatar asked Nov 03 '19 17:11

Adam Mrozek


People also ask

Is it possible to style a fontimagesource icon?

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.

What is the default font-size for styling elements globally?

This allows us to diverge from inherited, universal, and element styles globally. For example, all of our <h2> elements may be styled, by default, with a 2.25rem font-size:

How do I create a global style in XAML?

Create a global style in XAML. By default, all Xamarin.Forms applications created from a template use the App class to implement the Application subclass. To declare a Style at the application level, in the application's ResourceDictionary using XAML, the default App class must be replaced with a XAML App class and associated code-behind.

How to add global styles in Xamarin forms?

Global Styles in Xamarin.Forms. Styles can be made available globally by adding them to the application's resource dictionary. This helps to avoid duplication of styles across pages or controls.


2 Answers

Unfortunately it is not possible to style a FontImageSource currently. However, there is a github issue requesting this capability.

like image 64
John Cummings Avatar answered Oct 21 '22 16:10

John Cummings


have you tried this:

    <Style x:Key="ButtonWithFontImageSource" TargetType="Button">
       <Setter Property="ImageSource">
            <FontImageSource 
                FontFamily="{StaticResource FontIcons}"
                Glyph="{DynamicResource IconText}">
            </FontImageSource>
        <Setter>
    </Style>
like image 43
Jonathan Vinícius Suter Avatar answered Oct 21 '22 14:10

Jonathan Vinícius Suter