将 Material Design 图标与 Xamarin 表单一起使用 - 我错过了什么？

Question

我正在尝试修改默认的 Xamarin Forms (Flyout) 应用程序模板，以将 Material Design 图标用于 FlyoutItem 图标，而不是提供的 .png 文件。我曾尝试关注this blog post by James Montemagno，并尝试使用他的Hanselman.Forms 项目作为参考......但我错过了一些东西。

注意： 此时，我无法使用 iPhone 或 Mac，所以我只专注于 Android 项目。

我做了以下步骤：

1. 将materialdesignicons-webfont.ttf 文件导入Assets 文件夹，并仔细检查其Build Action 是否设置为AndroidAsset。
2. 在App.xaml 文件中添加了以下内容：

<OnPlatform x:Key="MaterialFontFamily" x:TypeArguments="x:String">
   <On Platform="Android" Value="materialdesignicons-webfont.ttf#Material Design Icons" />
</OnPlatform>

<x:String x:Key="IconAbout">&#xf2fd;</x:String>

1. 修改 AppShell.xaml 以更改图标：

<FlyoutItem Title="About">
   <FlyoutItem.Icon>
      <FontImageSource Glyph="{StaticResource IconAbout}"
                       FontFamily="{StaticResource MaterialFontFamily}" 
                       Color="Black"/>
   </FlyoutItem.Icon>
   <ShellContent Route="AboutPage" ContentTemplate="{DataTemplate local:AboutPage}" />
</FlyoutItem>

这是 Hanselman.Forms 项目的 TabItem 的直接副本 - 我认为 FontFamily 必须是 DynamicResource，但显然不是，因为它在该项目中按原样工作，但在我的任何一种方式下都不起作用 - 图标始终为空白（实际上，如果我将 Glyph 更改为字母 A 我会得到一个图标的“A”，但这并没有真正的帮助）。

我错过了一些我看不到的愚蠢的小细节。

Answer 1

我已经开始工作了。

首先，到这个 GitHub repo 下载这个材料字体系列作为 .tff 文件。点击 repo 中的“字体”文件并下载MaterialIcons-Regular.ttf。

链接：https://github.com/google/material-design-icons

将 .tff 文件放入您的共享项目中。

现在引用 assemblyinfo.cs 文件中的字体，如下所示：

[assembly: ExportFont("MaterialIcons-Regular.ttf", Alias = "Material")]

在 .tff 文件上将构建操作设置为 '嵌入式资源'。不要忘记这一步！

转到此页面https://github.com/google/material-design-icons/blob/master/font/MaterialIcons-Regular.codepoints - 查看所有材料代码点。

在这种情况下，我将使用“警报添加”图标作为示例（因为为什么不这样做）。如果您想使用“警报添加”图标 - 找到“警报添加”代码点。在这种情况下，'alarm-add' 图标的 codepoint 的代码是 e856。

将以下代码粘贴到您的 shell 中：

      <ShellContent Title="About"
                      ContentTemplate="{DataTemplate local:AboutPage}"
                      >
            <ShellContent.Icon>
                <FontImageSource FontFamily="Material"
                                 Color="White"
                                 Glyph="&#xe856;">
                </FontImageSource>
            </ShellContent.Icon>
            
            
        </ShellContent>

如果您按照所有步骤操作 - 结果应该是这样的：

如果 - 有任何机会 - 你想使用材料图标在你的外壳之外你可以创建一个标签，它的字体系列设置为 Material 和 Text 属性你可以设置适当的代码点。请记住在代码点之前包含&#x - 并始终以分号结束。

您可以根据自己的喜好自定义颜色和图标 - 只需在 代码点文档 中搜索您想要的图标，然后粘贴标识该特定图标的代码点。

Answer 2

错误的来源在这里：

<x:String x:Key="IconAbout">&#xf2fd;</x:String>

将该字符代码更改为󰋟 使一切正常 - 缺少一个零，结果是混乱。非常感谢@shaw 和@tommy99 - 尝试实施他们的答案（但仍然无法正常工作）让我找到了解决方案。感谢我支持他们的解决方案/cmets。