如何在Xamarin表单的工具栏项中添加字体图标

Question

我在应用程序中使用了导航页面。我必须将字体图标设置为工具栏项。但它显示十字符号，因为我尚未设置字体系列。所以有人建议我可以在工具栏项中设置字体图标。

Answer 1

使用Xamarin Forms 4.x（如果我没有记错版本的话），他们添加了可以在ToolbarItems上使用的FontImageSource类型。您需要做的几件事...

将字体文件添加到您的平台项目。在Android上，将它们添加到Assets文件夹中，并将构建操作设置为AndroidAsset。在iOS上，将它们添加到Resources文件夹中，并将构建操作设置为BundleResource。同样在iOS上，编辑info.plist并添加

<key>UIAppFonts</key>
<array>
    <string>fontname.ttf</string>
    <string>fontname2.ttf</string>
    ...
</array>

现在Xamarin可以使用字体了。

我定义了一些应用程序资源来轻松加载字体：

<OnPlatform x:Key="FontAwesomeLightFontFamily" x:TypeArguments="x:String">
  <On Platform="Android" Value="fa-light-300.ttf#Font Awesome 5 Pro Light" />
  <On Platform="iOS" Value="FontAwesome5Pro-Light" />
</OnPlatform>
<OnPlatform x:Key="FontAwesomeRegularFontFamily" x:TypeArguments="x:String">
  <On Platform="Android" Value="fa-regular-400.ttf#FontAwesome5ProRegular" />
  <On Platform="iOS" Value="FontAwesome5ProRegular" />
</OnPlatform>
<OnPlatform x:Key="FontAwesomeSolidFontFamily" x:TypeArguments="x:String">
  <On Platform="Android" Value="fa-solid-900.ttf#FontAwesome5ProSolid" />
  <On Platform="iOS" Value="FontAwesome5ProSolid" />
</OnPlatform>

那是坐在资源字典中，该资源字典已合并到App.xaml资源中。

现在，当我要将字体图标用作工具栏图标图像源时，可以执行以下操作：

<Page.ToolbarItems>
  <ToolbarItem Command="{Binding SomeCommand}">
    <ToolbarItem.IconImageSource>
      <FontImageSource
        FontFamily="{StaticResource FontAwesomeSolidFontFamily}"
        Glyph="{x:Static fonts:FontAwesomeIcon.Cog}"
        Size="{StaticResource ToolbarIconImageSourceSize}" />
    </ToolbarItem.IconImageSource>
  </ToolbarItem>
</Page.ToolbarItems>

如果您希望静态类定义字形图标，而不是必须输入unicode（上面的字形中使用了我的FontAwesomeIcon类），则https://andreinitescu.github.io/IconFont2Code/上有一个很棒的工具，它将生成一个基于上传的字体文件的C＃静态类。最终看起来像

public static class FontAwesomeIcon
{
  public const string Abacus = "\uf640";
  public const string Ad = "\uf641";
  public const string AddressBook = "\uf2b9";
  public const string AddressCard = "\uf2bb";
  public const string Adjust = "\uf042";
  public const string AirFreshener = "\uf5d0";
  ...
}