UWP Toolkit Hamburger menu navigation does not seem to work

Question

I am following the sample and document from https://developer.microsoft.com/en-us/windows/uwp-community-toolkit/controls/hamburgermenu to plan with the control. I copied the code from the bottom of the page to try out the navigation feature. And the document suggested

If you want to enable navigation to specific pages from the hamburger menu, we recommend to declare a Frame in the Xaml content of the HamburgerMenu control.

I created blank page to link to MenuItem class and throw in a text block control with some texts in the blank page. On navigation, nothing really is displayed. Use live visual tree to inspect the app, the blank page is displayed, but where is the text?

Anybody has some suggestion what is wrong? In case if you are curious I have all my codes below

MainPage.xaml:

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

    <Page.Resources>
        <DataTemplate x:Key="DefaultTemplate" x:DataType="local:MenuItem">
            <Grid Width="240" Height="48" HorizontalAlignment="Left">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="48" />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <SymbolIcon Grid.Column="0" Symbol="{x:Bind Icon, Mode=OneWay}" Foreground="White" />
                <TextBlock Grid.Column="1" Text="{x:Bind Name, Mode=OneWay}" FontSize="16" VerticalAlignment="Center" Foreground="White" />
            </Grid>
        </DataTemplate>
    </Page.Resources>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <controls:HamburgerMenu x:Name="hamburgerMenuControl"
                                PaneBackground="Black"
                                Foreground="White"
                                ItemTemplate="{StaticResource DefaultTemplate}"
                                ItemClick="OnMenuItemClick"
                                OptionsItemTemplate="{StaticResource DefaultTemplate}"
                                OptionsItemClick="OnMenuItemClick">
            <Frame x:Name="contentFrame"/>
        </controls:HamburgerMenu>
    </Grid>

</Page>

MainPage.xaml.cs:

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();

        hamburgerMenuControl.ItemsSource = MenuItem.GetMainItems();
        hamburgerMenuControl.OptionsItemsSource = MenuItem.GetOptionsItems();
    }

    private void OnMenuItemClick(object sender, ItemClickEventArgs e)
    {
        var menuItem = e.ClickedItem as MenuItem;
        contentFrame.Navigate(menuItem.PageType);
    }
}

MenuItem.cs:

class MenuItem
{
    public Symbol Icon { get; set; }

    public string Name { get; set; }

    public Type PageType { get; set; }

    public static List<MenuItem> GetMainItems()
    {
        var items = new List<MenuItem>();

        items.Add(new MenuItem() { Icon = Symbol.Map, Name = "Item 1", PageType = typeof(Views.BlankPage) });
        items.Add(new MenuItem() { Icon = Symbol.BrowsePhotos, Name = "Item 2", PageType = typeof(Views.BlankPage) });
        return items;
    }

    public static List<MenuItem> GetOptionsItems()
    {
        var items = new List<MenuItem>();
        items.Add(new MenuItem() { Icon = Symbol.Setting, Name = "Settings", PageType = typeof(Views.BlankPage) });
        return items;
    }
}

BlankPage.xaml

<Page
    x:Class="App1.Views.BlankPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1.Views"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock FontSize="48">This is blank!</TextBlock>
    </Grid>
</Page>

The textblock might have gone out of the viewable area.. Have you tried adding any other control or maybe change the page grid background color to see if you are actually getting to your desired page ? — Pratyay, Sep 20 '17 at 04:23

score 0 · Accepted Answer · answered Sep 20 '17 at 05:14

Your TextBlock on the BlankPage.xaml is taking foreground from HamburgerMenu which you set to white, so naturally white text on white background isn't visible. Try to set foreground on TextBlock explicitly, like <TextBlock FontSize="48" Foreground="Red">This is blank!</TextBlock> and you'll see it.

UWP Toolkit Hamburger menu navigation does not seem to work

1 Answers1