在 Xamarin Forms 中使用 Material Design 图标 - 我错过了什么? [英] Using Material Design Icons with Xamarin Forms - What Am I Missing?

问题描述

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

I am trying to modify the default Xamarin Forms (Flyout) App template to use Material Design Icons for the FlyoutItem icons, instead of the supplied .png files. I have tried to follow this blog post by James Montemagno, and tried to use his Hanselman.Forms project as a reference... but I'm missing something.

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

我已经完成了以下步骤:

I have done the following steps:

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

1. Imported the materialdesignicons-webfont.ttf file into the Assets folder and double-checked that its Build Action is set to AndroidAsset.
2. Added the following to the App.xaml file:

<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"，但这并不是很有帮助).

This is a direct copy from the Hanselman.Forms project's TabItem - I thought the FontFamily would have to be a DynamicResource, but apparently not, because it works as is in that project, but doesn't work in mine either way - the icon is always blank (actually, if I change the Glyph to a letter A I get an "A" for an icon, but that's not really helpful).

我遗漏了一些我看不到的愚蠢的小细节.

I'm missing some dumb little detail that I just can't see.

推荐答案

错误根源在这里:

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

将该字符代码更改为 󰋟 使一切正常 - 一个缺少零，结果是混乱.非常感谢@shaw 和@tommy99 - 试图实现他们的答案(但它仍然不起作用)让我找到了解决方案.我对他们的解决方案/评论表示感谢.

Changing that character code to 󰋟 got everything working - one missing zero and the result is chaos. Many thanks to @shaw and @tommy99 - trying to implement their answer (and it still not working) led me to the solution. I've upvoted their solution/comments in thanks.

这篇关于在 Xamarin Forms 中使用 Material Design 图标 - 我错过了什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！