在 Xamarin Forms 中使用 Material 设计图标——我错过了什么？

Question

我正在尝试修改默认的 Xamarin Forms (Flyout) 应用程序模板，以对 FlyoutItem 图标使用 Material 设计图标，而不是提供的 .png 文件。我试图按照 this blog post by James Montemagno, and tried to use his 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 存储库并将此 material 字体系列下载为 .tff 文件。单击存储库中的 'font' 文件并下载 MaterialIcons-Regular.ttf.

Link: https://github.com/google/material-design-icons

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

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

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

在 .tff 文件中将构建操作设置为 'embedded resource'。不要忘记这一步！

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

在这种情况下，我将使用 'alarm-add' 图标作为示例（因为为什么不用）。如果您想使用 'alarm-add' 图标 - 找到 'alarm-add' 代码点。在这种情况下，'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>

如果您按照所有步骤操作 - 结果应该如下所示：

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

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

Answer 2

错误来源在这里：

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

将该字符代码更改为 󰋟 后一切正常 - 缺少一个零，结果是一片混乱。非常感谢@shaw 和@tommy99 - 尝试实现他们的答案（但它仍然不起作用）让我找到了解决方案。我已经赞成他们的 solution/comments 表示感谢。

在 Xamarin Forms 中使用 Material 设计图标——我错过了什么？

Using Material Design Icons with Xamarin Forms - What Am I Missing?

android

app.xaml

xamarin

xamarin.forms