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

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

[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)
{
    //先判断是否选中了setting
    if (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)
{
    //先判断是否选中了setting
    if (args.IsSettingsInvoked)
    {
        contentFrame.Navigate(typeof(SettingsPage));
    }
    else
    {
        //找出当前选中的item
        NavigationViewItem 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测试。

转载请注明出处。