使用帶有 Xamarin Forms 的 Material Design 圖標 - 我錯過了什么？

Question

我正在嘗試修改默認的 Xamarin Forms（Flyout）應用程序模板，以將 Material Design Icons 用於FlyoutItem圖標，而不是提供的.png文件。 我嘗試關注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>

3. 修改 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

我已經讓它工作了。

首先，go 到這個 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 文件上將構建操作設置為“嵌入式資源” 。 不要忘記這一步！

Go 此頁面https://github.com/google/material-design-icons/blob/master/font/MaterialIcons-Regular.codepoints - 查看所有材料代碼點。

在這種情況下，我將使用“警報添加”圖標作為示例（因為為什么不這樣做）。 如果您想使用“警報添加”圖標 - 找到“警報添加”代碼點。 在這種情況下，“警報添加”圖標的代碼e856 。

將以下代碼粘貼到您的 shell 中：

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

如果您遵循所有步驟 - 結果應該是這樣的：

如果 - 有任何機會 - 你想在 shell 之外使用材質圖標，你可以創建一個 Label，它的字體系列設置為Material和Text屬性，你可以設置適當的代碼點。 請記住在代碼點之前包含&#x - 並始終以分號結尾。

您可以根據自己的喜好自定義顏色和圖標 - 只需在代碼點文檔中搜索您想要的圖標並粘貼標識該特定圖標的代碼點。

Answer 2

錯誤的來源在這里：

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

將該字符代碼更改為󰋟 讓一切正常 - 一個丟失零，結果是混亂。 非常感謝@shaw 和@tommy99 - 嘗試實施他們的答案（但仍然無法正常工作）讓我找到了解決方案。 我對他們的解決方案/評論表示感謝。