UWP XAML:带有 FontIcon 和 HamburgerMenuItem 的自定义字体未呈现字形
UWP XAML: Custom font with FontIcon and HamburgerMenuItem isn't rendering glyph
我在应用程序中使用来自 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 = "", 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; }
}
而不是 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/
Code-behind 和 XAML 的 Unicode 字符语法略有不同。要让它工作,试试这个:
MenuItem m = new MenuItem { Icon = new string('\uf099', 1)", Tag = "Feed", Label = "Twitter Feed", PageType=typeof(FeedPage) };
我在应用程序中使用来自 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 = "", 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; }
}
而不是 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/
Code-behind 和 XAML 的 Unicode 字符语法略有不同。要让它工作,试试这个:
MenuItem m = new MenuItem { Icon = new string('\uf099', 1)", Tag = "Feed", Label = "Twitter Feed", PageType=typeof(FeedPage) };