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

Question

我正在尝试修改默认的 Xamarin Forms (Flyout) App 模板以将 Material Design Icons 用于 FlyoutItem图标，而不是提供的 .png文件。我已尝试关注 this blog post by James Montemagno ，并尝试使用他的Hanselman.Forms项目作为引用......但我错过了一些东西。
注:在这一点上，我无法使用 iPhone 或 Mac，所以我只专注于 Android 项目。
我已完成以下步骤:

进口materialdesignicons-webfont.ttf将文件放入 Assets 文件夹并仔细检查其 Build Action设置为 AndroidAsset .

将以下内容添加到 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>

修改 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 下载这个 Material 字体系列作为 .tff 文件。单击 repo 中的“字体”文件并下载 MaterialIcons-Regular.ttf .
链接:https://github.com/google/material-design-icons



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

现在引用 中的字体装配信息.cs 像这样的文件:

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

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

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

在这种情况下，我将使用“警报添加”图标作为示例(因为为什么不这样做)。如果您想使用“警报添加”图标 - 找到“警报添加”代码点。在这种情况下，'alarm-add' 图标的代码 代码点 是 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在代码点之前 - 并始终以分号结束。
您可以根据自己的喜好自定义颜色和图标 - 只需搜索 代码点文档 为您想要的图标并粘贴标识该特定图标的代码点。