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

简介: 原文:[UWP开发]NavigationView基础使用方法 [UWP开发]NavigationView基础使用方法 NavigationView是秋季创意者更新(16299)引入的新控件,用于生成Windows特色的导航栏。
原文: [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>

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种类型,分别对应NavigationViewItemNavigationViewItemSeparatorNavigationViewItemHeader
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测试。
转载请注明出处。

目录
相关文章
|
4月前
|
C# UED 定位技术
WPF控件大全:初学者必读,掌握控件使用技巧,让你的应用程序更上一层楼!
【8月更文挑战第31天】在WPF应用程序开发中,控件是实现用户界面交互的关键元素。WPF提供了丰富的控件库,包括基础控件(如`Button`、`TextBox`)、布局控件(如`StackPanel`、`Grid`)、数据绑定控件(如`ListBox`、`DataGrid`)等。本文将介绍这些控件的基本分类及使用技巧,并通过示例代码展示如何在项目中应用。合理选择控件并利用布局控件和数据绑定功能,可以提升用户体验和程序性能。
85 0
|
iOS开发
iOS界面布局之四——使用第三方库Masonry进行autolayout布局(二)
iOS界面布局之四——使用第三方库Masonry进行autolayout布局
228 0
iOS界面布局之四——使用第三方库Masonry进行autolayout布局(二)
|
iOS开发
iOS界面布局之四——使用第三方库Masonry进行autolayout布局(一)
iOS界面布局之四——使用第三方库Masonry进行autolayout布局
194 0
iOS界面布局之四——使用第三方库Masonry进行autolayout布局(一)
|
Windows UED API
[UWP]如何实现UWP平台最佳图片裁剪控件
原文:[UWP]如何实现UWP平台最佳图片裁剪控件 前几天我写了一个UWP图片裁剪控件ImageCropper(开源地址),自认为算是现阶段UWP社区里最好用的图片裁剪控件了,今天就来分享下我编码的过程。
1164 0

热门文章

最新文章