在XamarinForms中使用MaterialDesign图标-我错过了什么?
我正在尝试修改默认的 Xamarin Forms (Flyout) 应用程序模板以使用 Material Design Icons 作为FlyoutItem图标,而不是提供的.png文件。我尝试关注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"></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”,但这并不是很有帮助)。
我错过了一些我看不到的愚蠢的小细节。
回答
我已经让它工作了。
首先,转到此 GitHub 存储库并将此材料字体系列下载为 .tff 文件。单击存储库中的“字体”文件并下载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”图标作为示例(因为为什么不呢)。如果您想使用“alarm-add”图标 - 找到“alarm-add”代码点。在这种情况下,“警报添加”图标的代码点的代码是e856。
将以下代码粘贴到您的 shell 中:
<ShellContent Title="About"
ContentTemplate="{DataTemplate local:AboutPage}"
>
<ShellContent.Icon>
<FontImageSource FontFamily="Material"
Color="White"
Glyph="">
</FontImageSource>
</ShellContent.Icon>
</ShellContent>
如果您遵循所有步骤 - 结果应该是这样的:
如果 - 无论如何 - 您想在外壳外使用材质图标,您可以创建一个标签,该标签将字体系列设置为您可以设置适当代码点Material的Text属性。请记住&#x在代码点之前包含- 并始终以分号结束。
您可以根据自己的喜好自定义颜色和图标 - 只需在代码点文档中搜索您想要的图标并粘贴标识该特定图标的代码点即可。