UWP XAML：带有 FontIcon 和 HamburgerMenuItem 的自定义字体未呈现字形

Question

我在应用程序中使用来自 UWP 社区工具包的 HamburgerMenu 控件，因为我想支持 Windows 10 Mobile，所以新的 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; }
}

Answer 1

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

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

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

更多详情： https://blog.codeinside.eu/2016/03/05/using-fontawesome-in-uwp-apps/

Answer 2

Code-behind 和 XAML 的 Unicode 字符语法略有不同。要让它工作，试试这个：

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

UWP XAML：带有 FontIcon 和 HamburgerMenuItem 的自定义字体未呈现字形

UWP XAML: Custom font with FontIcon and HamburgerMenuItem isn't rendering glyph

c#

uwp-xaml

windows-community-toolkit