UWP控件Navigationview

0x00.规范布局

微软通过秋季更新发布了 NavigationView 控件。在此之前,实现汉堡菜单多使用Nuget上发布的类库或使用Splitview自制,但无法保持风格的一致性。

MSDN给出的实例

<NavigationView SelectionChanged="SelectionChanged">
  <NavigationView.MenuItems>
    <NavigationViewItemHeader Content="Section A" />
    <NavigationViewItem Content="Item 01" />
    <NavigationViewItem Content="Item 02" />
  </NavigationView.MenuItems>
  <Frame x:Name="NavigationFrame" />
</NavigationView>

0x01.模式

控件有三种可能的模式:最小、紧凑和扩展,每种模式都是基于带有阈值的内置和可自定义视图自动选择的。


0x02.NavigationViewItem

NavigationViewItem为NavigationView.MenuItems中item项,包含Icon,Content,Tag等常用属性。

Icon:参阅Segoe MDL2 icons提供的图标。

IsSelected:NavigationViewItem是否被选中,选中的NavigationViewItem左侧会有指示方块。如果出现默认需要选中的NavigationViewItem没有指示方块并且已设置IsSelected=true

请为NavigationViewItem添加Loading事件即可正常显示。

private void NavigationViewItem_Loading(Windows.UI.Xaml.FrameworkElement sender, object args)
{
    ((NavigationViewItem)sender).IsSelected = true;
}

0x03.NavigationViewItemSeparator

用于分隔两个NavigationViewItem。


0x04.IsSettingsVisible

Pane底部的Setting按钮是否可见。


0x05.IsPaneOpen

Pane是否展开。


0x06.SelectionChanged事件

当NavigationView中选中的NavigationViewItem改变时触发,常配合Frame控件实现导航视图。

<NavigationView x:Name="NaviView" 
                SelectionChanged="NaviView_SelectionChanged">
    <NavigationView.MenuItems>
        <NavigationViewItem Icon="Home" Content="首页" Tag="Index"/>
        <NavigationViewItem Icon="BrowsePhotos" Content="搜索" Tag="Filter" />
    </NavigationView.MenuItems >

    <Frame x:Name="RootFrame">
      <Frame.ContentTransitions>
        <TransitionCollection>
          <NavigationThemeTransition/>
        </TransitionCollection>
      </Frame.ContentTransitions>
    </Frame >
</NavigationView >
private void NaviView_SelectionChanged(NavigationView sender, NavigationViewSelectionChangedEventArgs args)
{
        NavigationViewItem item = args.SelectedItem as NavigationViewItem;
        switch (item.Tag)
        {
            case "Index":
                RootFrame.Navigate(typeof(Pages.Index_Page));
            break;

            case "Filter":
                RootFrame.Navigate(typeof(Pages.Filter_Page));
            break;

            case "Setting": 
                RootFrame.Navigate(typeof(Pages.Setting_Page)); 
            break;
        }
}