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

时间:2017-09-20 02:24:38

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

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

  

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

我创建了空白页面以链接到MenuItem类,并在空白页面中输入一些文本块控件。在导航时,没有显示任何内容。使用实时可视化树检查应用程序,显示空白页面,但文本在哪里?

enter image description here

任何人都有一些建议是什么问题?万一你好奇我的所有代码都在下面

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>

1 个答案:

答案 0 :(得分:0)

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