UWP XAML：使用 FontIcon 和 HamburgerMenuItem 的自定义字体不呈现字形答案

【问题标题】：UWP XAML: Custom font with FontIcon and HamburgerMenuItem isn't rendering glyphUWP XAML：使用 FontIcon 和 HamburgerMenuItem 的自定义字体不呈现字形
【发布时间】：2018-08-09 22:17:34
【问题描述】：

我在应用中使用 UWP 社区工具包中的 HamburgerMenu 控件，因为我想支持 Windows 10 移动版，因此新的 NavigationView 控件不适合我。

我正在尝试使用自定义字体 (FontAwesome) 为我的菜单绘制字形。这在我使用 NavigationView 时有效，但现在我尝试使用 HamburgerMenu，如果我在后面的代码中创建菜单项，我将无法正确呈现字形。

相反，字形参考显示为纯文本。我尝试继承 HamburgerMenuGlyphItem 并分配 Glyph 属性，但这也不起作用。

这是我的页面：

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    
    xmlns:ct="using:Microsoft.Toolkit.Uwp.UI.Controls"
    mc:Ignorable="d"
    x:Class="Tweeter.MainPage"
    x:Name="PageMain">

    <Page.Resources>
        <DataTemplate x:Key="HamburgerMenuItem">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="48" />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <FontIcon Grid.Column="0"
                    FontFamily="{StaticResource FontAwesome}" 
                    Glyph="{Binding Icon}" />
                <TextBlock Grid.Column="1" Text="{Binding Label}" />
            </Grid>
        </DataTemplate>
    </Page.Resources>

    <Grid>
        <ct:HamburgerMenu x:Name="navMain"
                        ItemTemplate="{StaticResource HamburgerMenuItem}"
                        ItemInvoked="navMain_ItemInvoked"
                        HamburgerVisibility="Visible"
                        UseNavigationViewWhenPossible="True">

            <Frame x:Name="ContentFrame" Margin="0">
                <Frame.ContentTransitions>
                    <TransitionCollection>
                        <NavigationThemeTransition/>
                    </TransitionCollection>
                </Frame.ContentTransitions>
            </Frame>
        </ct:HamburgerMenu>
    </Grid>
</Page>

这是我后面代码中的相关位：

private void LoadMenu()
{
    List <MenuItem> theMenu = new List<MenuItem>();
    MenuItem m = new MenuItem { Icon = "&#xf099;", Tag = "Feed", Label = "Twitter Feed", PageType=typeof(FeedPage) };

    theMenu.Add(m);
    navMain.ItemsSource = theMenu;
}

public class MenuItem : HamburgerMenuItem
{
    public Type PageType { get; set; }
    public string Icon { get; set; }
}

【问题讨论】：

标签： c# uwp-xaml windows-community-toolkit

【解决方案1】：

代码隐藏和 XAML 的 Unicode 字符语法略有不同。要让它工作，试试这个：

MenuItem m = new MenuItem { Icon = new string('\uf099', 1)", Tag = "Feed", Label = "Twitter Feed", PageType=typeof(FeedPage) };

【讨论】：

谢谢！！在发现可以通过 nuget 获得针对 Windows 10 Mobile 的控件的预览版本后，我最终回到了 NavigationView。不过，这仍然会有所帮助。 :)

【解决方案2】：

而不是 FontIcon 只需在 uwp 中使用 TextBlocK 字体真棒图标最适合文本块。我希望这会有所帮助。

或者更好的是你可以直接使用它们

<fa:FontAwesome Icon="Flag" FontSize="90" Foreground="Chartreuse" HorizontalAlignment="Center" />

【讨论】：

我想避免在这个项目中使用任何第三方 Nuget 包。我宁愿弄清楚为什么我的字形没有渲染。
bcz 他们不应该在 FontIcon 中渲染，fontawesome 本身是一个 3rd 方服务，你试图在本机控件中使用，uwp 仅限于 segeo mdl2 资产图标，如果你想要第三方图标你将需要第三方库:)
btw 库只是让你的生活更轻松，我认为你应该更频繁地使用它们，特别是在 uwp 中
将FontIcon 与FontFamily 一起使用就可以了。在我重新设计菜单以使用HamburgerItem 而不是NavigationView 之前，我一直在使用它。如果我不以编程方式创建菜单项，它确实有效。 XAML 有效。由于某种原因，当我的菜单项通过后面的代码添加时，它不起作用。
bcz 当你从后端绑定它时，它会在运行时生成，运行时只需要 mdl2 资产而不是 fontawesome 图标，除非你告诉它使用 nuget 库。 @ClairelyClaire