原文:[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测试。
转载请注明出处。