Xamarin使用FontAwesome创建自定义按钮

Question

我在尝试重用某些按钮时遇到麻烦，我想将它们添加为样式，但是我无法正确设置ImageSource：

当前我在App xaml中具有FontAwesome：

<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>

并且该按钮在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>

我正在尝试在后面的C＃代码上创建按钮：

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"}
                }
            };
        }

我在App上设置并在xaml上使用：

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

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

如何使用FontAwesome和字形*正确设置FontImageSource？谢谢。

Answer 1

在setter中，我们在现有属性上设置值，因此我们应该创建一个FontImageSource，并将其分配给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},  
            }
        };
    }