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