接下来会写一个UWP(Universal Windows Platform)开发入门的系列,本身学习到哪里,有什么心得总结,就会写到哪里。本篇对适用于顶层导航的SplitView控件展开讨论。git
首先SplitView是Win10 UWP新增的控件,之前虽然能够经过DockPanel模拟出相似的效果,但又哪里及得上M$原生支持的SplitView快捷方便呢。github
至于为何说SplitView适合顶层导航,能够参考目前尚为数很少的UWP APP,好比微博、QQ和网易等Win10 APP,基本都是经过SplitView将主界面分红左右两块Pane和Content,在屏幕宽度减至必定程度,自动隐藏Pane,仅显示Content。又或者将导航菜单至于Pane中,经过汉堡菜单来控制是否显示,诸如此类。windows
SplitView的类定义这里就不贴了,即便去除Inherited和Protected的成员,也稍嫌有些多了。咱们先从用法着手,再一点一点深刻介绍比较重要的属性。app
<SplitView IsPaneOpen="True" DisplayMode="Inline" OpenPaneLength="296"> <SplitView.Pane> <TextBlock Text="Pane" FontSize="24" VerticalAlignment="Center" HorizontalAlignment="Center"/> </SplitView.Pane> <Grid> <TextBlock Text="Content" FontSize="24" VerticalAlignment="Center" HorizontalAlignment="Center"/> </Grid> </SplitView>
这段XAML是图省事从MSDN上拷下来的,显示的效果呢以下图:学习
简单的分析一下,SplitView的Children通常有两个,默认左边Pane和右边Content。Pane的显示由IsPaneOpen这个属性决定,因此binding用在这里就对了。而后经过汉堡菜单来修改这个binding的bool值,你懂的。ui
各位是否是以为本篇实在太水了……别着急啊还没讲完呢……咱们接下来看DisplayMode这个属性:spa
这个属性是一个枚举值,各位英文很差的童鞋,大家有福了,在UWP文档匮乏更不会有中文的状况下,将有一样英文很差的我给大家翻译(圣光庇佑大家……)翻译
Membercode |
Valueorm |
Description |
Overlay |
0 |
1.Pane显示的时候浮在Content上面 2.隐藏的时候彻底消失 3.点击非Pane区域会致使Pane隐藏 |
Inline |
1 |
1.Pane显示的时候会将Content一屁股挤到旁边去 2.隐藏时无隐无踪 3.你点不点他,他还在那里…… |
CompactOverlay |
2 |
1.根据CompactPaneLength的长度设置,死皮赖脸会露一点点出来 2.其余行为与Overlay保持一致 3.适用于导航菜单由图标+文字组成,展开显示所有,隐藏仅显示图标 |
CompactInline |
3 |
1.你懂的 |
属性CompactPaneLength,刚刚提到,给你的图标留点空间就行。
属性OpenPaneLength,这个属性颇有意思也很重要。若是你不去设置这个值,你会发现系统会自动计算。结果就是在PC和Pad上,足够空间的状况下,Overlay的Pane不会遮挡整个Content,会以一个美观的比列呈现。但UWP程序运行在Phone上时,Pane会彻底的遮住Content,辣总感受你本身体会。老司机这里一段话省了你多少时间啊QAQ(记得评论里感谢我)
属性PanePlacement,这个没啥讲的,就是控制Pane显示在左边仍是右边。
最后以一个呆魔(Demo)截图做为结束:
汉堡菜单,List导航栏,Pivot分类应有尽有,只在GayHub:
https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/XamlPivot
另外本文参考:
https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.splitview.aspx