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; } }