CODEWITHSUNDEEP
c#uwp-xamlwindows-community-toolkit
CXL
CXL

Reputation: 1112

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

I'm using the HamburgerMenu control from the UWP Community Toolkit in an app, because I want to support Windows 10 Mobile, so the new NavigationView control isn't an option for me.

I'm trying to use a custom font (FontAwesome) to draw the glyphs for my menu. This worked when I was using NavigationView, but now that I'm trying to use HamburgerMenu instead, I can't get the glyphs to render properly if I create menu items in my code behind.

Instead, the glyph reference displays as plain text. I tried inheriting HamburgerMenuGlyphItem and assigning the Glyph property, but that didn't work either.

Here's my page:

<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>

And here's the relevant bits in my code behind:

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; }
}

Upvotes: 1

Views: 1667

Answers (2)

Johnny Westlake
Johnny Westlake

Reputation: 1460

Code-behind and XAML have slightly different syntax for Unicode characters. To get this to work, try this:

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

Upvotes: 2

Muhammad Touseef
Muhammad Touseef

Reputation: 4455

instead of FontIcon Just use a TextBlocK font awesome icons in uwp works best with textblocks. I hope tis helps.

or better u can use them directly 

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

more details : https://blog.codeinside.eu/2016/03/05/using-fontawesome-in-uwp-apps/

Upvotes: 0

Related Questions