[UWP开发]NavigationView基础使用方法

NavigationView是秋季创意者更新（16299）引入的新控件，用于生成Windows特色的导航栏。
可参考说明文档（目前只有英文）
给了一段示例代码，和运行截图，贴在下面：

<NavigationView x:Name="nvAll" IsSettingsVisible="true" IsTabStop="False" Header="This is header text." ItemInvoked="nvAll_ItemInvoked"><NavigationView.MenuItems><NavigationViewItemHeader Content="Main"/><NavigationViewItem Icon="Play"  Content="Menu Item1" Tag="SamplePage1" ToolTipService.ToolTip="1"/><NavigationViewItemSeparator/><NavigationViewItem Icon="Save" Content="Menu Item2" Tag="SamplePage2" /><NavigationViewItem Icon="Refresh" Content="Menu Item3" Tag="SamplePage3" /></NavigationView.MenuItems><NavigationView.AutoSuggestBox><AutoSuggestBox x:Name="ASB" PlaceholderText="Search" QueryIcon="Find" TextChanged="AutoSuggestBox_TextChanged" QuerySubmitted="AutoSuggestBox_QuerySubmitted" SuggestionChosen="AutoSuggestBox_SuggestionChosen"/></NavigationView.AutoSuggestBox><NavigationView.PaneFooter><HyperlinkButton x:Name="MoreInfoBtn" Content="More" Click="More_Click" Margin="12,0"/></NavigationView.PaneFooter><Frame x:Name="contentFrame"></Frame>
</NavigationView>

代码简单，效果也是非常好的，包含了主推的亚克力材料和光线的设置，以后就不需要Toolkit或者自己定义样式了。
接下来针对这个控件，探讨更多的使用方法。

简单说下其中用到的类
NavigationViewItem 用于导航项，包含图标，文字等。

<NavigationViewItem Icon="Play"  Content="Menu Item1" />

NavigationViewItemSeparator 用于Item之间的间隔站位

<NavigationViewItemSeparator/>

NavigationViewItemHeader 字号稍大的纯文字标签，通常用于表示Item归属类别

<NavigationViewItemHeader Content="Main"/>

AutoSuggestBox 可选部分，一个用于搜索的输入框

<NavigationView.AutoSuggestBox>
<AutoSuggestBox x:Name="ASB" PlaceholderText="Search" QueryIcon="Find" TextChanged="AutoSuggestBox_TextChanged" QuerySubmitted="AutoSuggestBox_QuerySubmitted" SuggestionChosen="AutoSuggestBox_SuggestionChosen"/>
</NavigationView.AutoSuggestBox>

在后面详细说明用法。

IsSettingsVisible
是否显示设置栏，设置在最下方

<NavigationView IsSettingsVisible="true" .../>

PaneFooter
位于导航栏最下方区域（但在设置上方）的自定义区域。

<NavigationView.PaneFooter>
...
</NavigationView.PaneFooter>

1 . AutoSuggestBox
AutoSuggestBox 是一个输入框，具有提示输入的功能。在导航中通常用于搜索功能。
要完整使用这一控件，需要处理以下3个事件。
TextChanged
当用户输入的信息发生变化时，从输入关键词提示列表中。选出满足输入信息为关键词子串的提示字符串，并交给AutoSuggestBox显示提示信息。

private List<string> ReminderStrList;
private void AutoSuggestBox_TextChanged(AutoSuggestBox sender, AutoSuggestBoxTextChangedEventArgs args)
{if (args.Reason == AutoSuggestionBoxTextChangeReason.UserInput){sender.ItemsSource = ReminderStrList.Where(i => i.Contains(sender.Text));}
}

Suggestion chosen
当用户选择提示框中的某一项时，将该项对应的文字交给AutoSuggestBox显示提示信息。如需要显示到输入框中的内容与提示框中选择的那一项的文字一致，可不写此方法。当文字不同时，可用此方法将对应文字更新到输入框。

private void AutoSuggestBox_SuggestionChosen(AutoSuggestBox sender, AutoSuggestBoxSuggestionChosenEventArgs args)
{sender.Text = args.SelectedItem.ToString();
}

Query submitted
当用户确认输入，或键盘回车键后，对于输入信息进行处理。

private void AutoSuggestBox_QuerySubmitted(AutoSuggestBox sender, AutoSuggestBoxQuerySubmittedEventArgs args)
{string txt = args.QueryText;  //输入的文本if (args.ChosenSuggestion != null){//从提示框中选择某一项时触发}else{//用户在输入时敲回车或者点击右边按钮确认输入时触发}
}

2 . ItemInvoked事件处理
当用户选中导航栏中某一个Item时触发。跳转到特定页面。

private void nvAll_ItemInvoked(NavigationView sender, NavigationViewItemInvokedEventArgs args)
{//先判断是否选中了settingif (args.IsSettingsInvoked){contentFrame.Navigate(typeof(SettingsPage));}else{//选中项的内容switch (args.InvokedItem){case "Home":ContentFrame.Navigate(typeof(HomePage));break;}}
}

3 . 从CS代码定义导航栏Item

定义描述导航栏Item的类

public abstract class NavItemBase
{
}public class NavItem : NavItemBase
{public string Title { get; set; }public string Icon { get; set; }public IconType IType { get; set; }public string Tooltip { get; set; }public bool TooltipAvailable { get => !String.IsNullOrEmpty(Tooltip); }public PageType DPage { get; set; }public NavItem(string title, string icon, IconType iType, PageType dPage, string tooltip = null){Title = title;Icon = icon;IType = iType;DPage = dPage;Tooltip = tooltip;}
}public class NavSeparator : NavItemBase
{
}public class NavHeader : NavItemBase
{public string Title { get; set; }public NavHeader(string title){Title = title;}
}public enum IconType { ImageIcon, FontIcon }  //Icon类型，使用图片或文字图标
public enum PageType { MainPage }  //单击导航栏Item后导航到的Page的Tag

有3种类型，分别对应NavigationViewItem ，NavigationViewItemSeparator ，NavigationViewItemHeader。
Item定义标题（显示的文字内容），图标，鼠标悬停时显示的Tooltip以及鼠标单击后导航到的Page。
赋值的时候需要注意，文字图标指的是 Segoe MDL2 Assets 中的符号，输入时使用4位的Unicode编码。如"\uE702"为蓝牙图标。
在你的主页中添加NavigationView控件，使用如下代码添加Item：

public void InitNav()
{nvAll.MenuItems.Add(new NavigationViewItemSeparator());foreach (var i in _NavItemViewModel._NavItems){if (i is NavItem){var item = i as NavItem;var Item = new NavigationViewItem() { Content = item.Title, Tag = item.DPage, DataContext = item };if (item.IType == IconType.ImageIcon){Item.Icon = new BitmapIcon() { UriSource = new Uri(item.Icon, UriKind.RelativeOrAbsolute) };}else if (item.IType == IconType.FontIcon){Item.Icon = new FontIcon() { FontFamily = new FontFamily("Segoe MDL2 Assets"), Glyph = item.Icon };}if (item.TooltipAvailable)ToolTipService.SetToolTip(Item, item.Tooltip);nvAll.MenuItems.Add(Item);}else if (i is NavSeparator){nvAll.MenuItems.Add(new NavigationViewItemSeparator());}else if (i is NavHeader){var item = i as NavHeader;var Header = new NavigationViewItemHeader();Header.Content = item.Title;nvAll.MenuItems.Add(Header);}}
}

选中Item时触发ItemInvoked

private void nvAll_ItemInvoked(NavigationView sender, NavigationViewItemInvokedEventArgs args)
{//先判断是否选中了settingif (args.IsSettingsInvoked){contentFrame.Navigate(typeof(SettingsPage));}else{//找出当前选中的itemNavigationViewItem invokedItem;try{invokedItem = nvAll.MenuItems.Where(i => i is NavigationViewItem).Cast<NavigationViewItem>().Single(i => i.Content == args.InvokedItem);}catch (InvalidOperationException ex){//找不到选中的item，正常操作时不会出现此异常。return;}PageType page = ((NavItem)(invokedItem.DataContext)).DPage;//根据page所指向的页面，写对于Frame的Navigate操作。}
}

发个成品截图

_NavItems = new List<NavItemBase>();
_NavItems.Add(new NavHeader("设置"));
_NavItems.Add(new NavItem("蓝牙", "\uE702", IconType.FontIcon, PageType.MainPage, "Bluetooth"));
_NavItems.Add(new NavItem("位置", "\uE707", IconType.FontIcon, PageType.MainPage, "Location"));
_NavItems.Add(new NavItem("声音", "\uE720", IconType.FontIcon, PageType.MainPage, "Voice"));
_NavItems.Add(new NavSeparator());
_NavItems.Add(new NavItem("QQ", "ms-appx:///Assets/QQ.png", IconType.ImageIcon, PageType.MainPage, "QQ"));

4 . Header样式
Header位于Frame的上方，一般用于显示页面名称以及CommandBar等内容，属于自定义的区域。给个简单的例子。

<NavigationView.HeaderTemplate><DataTemplate><Grid Margin="24,0,24,0"><Grid.ColumnDefinitions><ColumnDefinition Width="Auto"/><ColumnDefinition/></Grid.ColumnDefinitions><TextBlock FontSize="28" VerticalAlignment="Center" Text="Header"/><CommandBar Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center" DefaultLabelPosition="Right" Background="{x:Null}"><AppBarButton Label="Refresh" Icon="Refresh"/></CommandBar></Grid></DataTemplate>
</NavigationView.HeaderTemplate>

如果要禁止header，设置AlwaysShowHeader="False"

代码通过Visual Studio 2017测试。
转载请注明出处。