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

【问题标题】：UWP Toolkit Hamburger menu navigation does not seem to workUWP Toolkit Hamburger 菜单导航似乎不起作用
【发布时间】：2017-09-20 02:24:38
【问题描述】：

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

如果您想启用从汉堡包到特定页面的导航菜单，我们建议在 Xaml 内容中声明一个 Frame HamburgerMenu 控件。

我创建了空白页以链接到MenuItem 类，并在空白页中加入了一个带有一些文本的文本块控件。在导航中，实际上没有显示任何内容。使用实时可视化树检查应用，显示空白页，但文本在哪里？

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

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>

【问题讨论】：

文本块可能已超出可视区域。您是否尝试添加任何其他控件或更改页面网格背景颜色以查看您是否真正到达所需页面？

标签： c# uwp uwp-xaml hamburger-menu windows-community-toolkit

【解决方案1】：

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

【讨论】：