c# - 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 和 Glyph* 正确设置 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},  
            }
        };
    }