Xamarin Creating Custom Buttons with FontAwesome

Question

I'm having trouble trying to re-use some buttons, I'd like to add them as style but I cannot set ImageSource correctly:

Currently I have FontAwesome in App xaml:

<OnPlatform x:TypeArguments="x:String" x:Key="FontAwesomeSolidOTF">
            <On Platform="Android" Value="Fonts/Font Awesome 5 Free-Solid-900.otf#Regular" />
            <On Platform="WPF" Value="Assets/Fonts/Font Awesome 5 Free-Solid-900.otf#Font Awesome 5 Free Regular" />
            <On Platform="iOS" Value="FontAwesome5Free-Regular" />
            <On Platform="UWP" Value="/Assets/Fonts/Font Awesome 5 Free-Solid-900.otf#Font Awesome 5 Free" />
        </OnPlatform>

And the button correctly working on xaml:

<Button x:Name="btnBack" Grid.Row="0" Grid.Column="0" ContentLayout="Top,5" Text="Back" 
  TextColor="#fff" BackgroundColor="#565C5A" Clicked="btnBack_Clicked" HeightRequest="80" 
  WidthRequest="80" Padding="0,15,0,15" FontSize="14">
    <Button.ImageSource>
      <FontImageSource FontFamily="{StaticResource FontAwesomeSolidOTF}" Glyph="&#xf3e5;" Color="#fff"/>
   </Button.ImageSource>
</Button>

I'm trying to create the button on c# code behind:

public static Style BtnBack(ResourceDictionary resources) {
            return new Style(typeof(Button))
            {
                Setters = {
                    new Setter { Property = Button.ContentLayoutProperty, Value = new ButtonContentLayout(ButtonContentLayout.ImagePosition.Top, 5) },
                    new Setter { Property = Button.TextProperty, Value = "Back" },
                    new Setter { Property = Button.TextColorProperty, Value = "#565C5A" },
                    new Setter { Property = Button.HeightRequestProperty, Value = "80" },
                    new Setter { Property = Button.WidthRequestProperty, Value = "80" },
                    new Setter { Property = Button.PaddingProperty, Value = "0,15,0,15" },
                    new Setter { Property = Button.FontSizeProperty, Value = "14" },
                    new Setter { Property = FontImageSource.FontFamilyProperty, Value = resources["FontAwesomeSolidOTF"]},
                    new Setter { Property = FontImageSource.GlyphProperty, Value = "\uf3e5"},
                    new Setter { Property = FontImageSource.ColorProperty, Value = "#fff"}
                }
            };
        }

I set it on App and use on xaml:

Resources.Add("btnBack", Buttons.BtnBack(Resources));

<Button Style="{StaticResource btnBack}" Grid.Row="0" Grid.Column="0" />

How can I properly set FontImageSource with FontAwesome and Glyph*? Thanks.

Answer 1

In setter we set the value on existing property , so we should create a FontImageSource ,and assign it to ImageSource .

 public static Style BtnBack(ResourceDictionary resources)
    {

        FontImageSource source = new FontImageSource();
        source.Glyph = "\uf3e5";
        source.FontFamily = resources["FontAwesomeSolidOTF"];
        source.Color =  Color.FromHex("#fff");

        return new Style(typeof(Button))
        {
            Setters = {
                new Setter { Property = Button.ContentLayoutProperty, Value = new ButtonContentLayout(ButtonContentLayout.ImagePosition.Top, 5) },
                new Setter { Property = Button.TextProperty, Value = "Back" },
                new Setter { Property = Button.TextColorProperty, Value = "#565C5A" },
                new Setter { Property = Button.HeightRequestProperty, Value = "80" },
                new Setter { Property = Button.WidthRequestProperty, Value = "80" },
                new Setter { Property = Button.PaddingProperty, Value = "0,15,0,15" },
                new Setter { Property = Button.FontSizeProperty, Value = "14" },
                new Setter { Property = Button.ImageSourceProperty, Value = source},  
            }
        };
    }