UWP Toolkit Hamburger 菜单导航似乎不起作用

Question

我正在按照 https://developer.microsoft.com/en-us/windows/uwp-community-toolkit/controls/hamburgermenu 中的示例和文档来计划控制。我从页面底部复制了代码来试用导航功能。并且文档建议

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.

我创建了空白页 link 到 MenuItem class 并在空白页中放入了一个文本块控件和一些文本。在导航上，实际上什么也没有显示。使用live visual tree检查应用，显示空白页面，但文本在哪里？

有人有什么问题的建议吗？如果你好奇，我在下面有我所有的代码

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>

Answer 1

BlankPage.xaml 上的 TextBlock 正在从您设置为白色的 HamburgerMenu 中获取前景，因此自然不会看到白色背景上的白色文本。尝试明确地在 TextBlock 上设置前景，例如 <TextBlock FontSize="48" Foreground="Red">This is blank!</TextBlock>，您会看到它。

UWP Toolkit Hamburger 菜单导航似乎不起作用

UWP Toolkit Hamburger menu navigation does not seem to work

c#

uwp

uwp-xaml

hamburger-menu

windows-community-toolkit