Win10开发：SplitView控件

SplitView控件是Win10中的新控件，用于呈现分隔视图，可将一个视图分隔为两部分。

主要属性：

Content：字面意思就是"内容"，即当前页面想展示的主要内容

Pane：该属性类似于目录，可以隐藏、折叠和展开。如Win10系统内置的"Groove音乐"和“邮件”应用的左侧边栏都是Pane

IsPaneOpen：布尔值，用于控制Pane的折叠和展开

OpenPaneLength：当Pane中的内容被展开后的宽度

CompactPaneLength：当Pane的内容被折叠后的宽度

PaneBackground：设置绘制Pane视图的背景的画刷

DisplayMode：设置Pane区域的显示方式，主要有以下几个值。字面解释不是很容易，可直接在demo中查看不同的效果。

先看一下Demo的运行效果：（DisplayMode=CompactInline）

Pane面板隐藏时：

Pane面板显示时：

下面讲解如何实现这个Demo：

一：XAML部分

1、左上角的汉堡与“目录”：

[html]  view plain  copy

1. <StackPanel Grid.Row="0" Orientation="Horizontal">  
2.                         <Button BorderThickness="0" Grid.Row="1" Background="Transparent" Click="togglePaneButton_Click">  
3.                             <Button.Content>  
4.                                 <TextBlock Text="" FontFamily="Segoe MDL2 Assets" FontSize="24" />  
5.                             </Button.Content>  
6.                         </Button>  
7.                         <TextBlock Margin="10,0,0,0" VerticalAlignment="Center" FontSize="18" Text="目录"/>  
8.   </StackPanel>  

2、“目录”的实现：

实际上Pane的实现很自由，这里使用ListView控件：

[html]  view plain  copy

1. <ListView x:Name="listView" Margin="0,12,0,0" SelectionMode="None" Grid.Row="1" VerticalAlignment="Stretch"  
2. temClick="listView_ItemClick" IsItemClickEnabled="True" ItemTemplate="{StaticResource listViewItemTemplate}"/>  

3、 DisplayMode的选择：

这里使用一个ComboBox控件让用户选择DisplayMode，实际的应用中一般是直接“写死”的

[html]  view plain  copy

1. <ComboBox x:Name="displayModeCombobox" Grid.Row="2" Width="148" SelectedIndex="0" SelectionChanged="displayModeCombobox_SelectionChanged" VerticalAlignment="Center" Header="DisplayMode">  
2.                       <ComboBoxItem>CompactInline</ComboBoxItem>  
3.                       <ComboBoxItem>CompactOverlay</ComboBoxItem>  
4.                       <ComboBoxItem>Overlay</ComboBoxItem>  
5.                       <ComboBoxItem>Inline</ComboBoxItem>  
6.       </ComboBox>  

4、左下角的“设置”

[html]  view plain  copy

1. <StackPanel Orientation="Horizontal" Grid.Row="3" Margin="14,24,0,24" >  
2.                         <SymbolIcon Symbol="Setting" />  
3.                         <TextBlock Text="设置" Margin="24,0,0,0" VerticalAlignment="Center"/>  
4.   </StackPanel>  

5、Content的实现：

实际上<SplitView.Content>.....</SplitView.Content>这一层节点是可以省略的，在SplitView节点之间的就是Content。这里只是简单的用Grid控件展示Content：

[html]  view plain  copy

1. <Grid>  
2.                <Grid.RowDefinitions>  
3.                    <RowDefinition Height="Auto"/>  
4.                    <RowDefinition Height="*"/>  
5.                </Grid.RowDefinitions>  
6.                <TextBlock Text="内容" Margin="12,0,0,0" Style="{StaticResource BaseTextBlockStyle}"/>  
7.                <TextBlock x:Name="content" Grid.Row="1" Margin="12,12,0,0" Style="{StaticResource BodyTextBlockStyle}" />  
8.            </Grid>  

到此布局的XAML部分已经完成，下面讲解code behind部分：

二：C#部分

1、内容：

[csharp]  view plain  copy

1. private ObservableCollection<NavLink> navLinks = new ObservableCollection<NavLink>()  
2.  {  
3.      new NavLink() { Label = "People", Symbol =  Symbol.People  },  
4.      new NavLink() { Label = "Globe", Symbol = Symbol.Globe },  
5.      new NavLink() { Label = "Message", Symbol = Symbol.Message },  
6.      new NavLink() { Label = "Mail", Symbol = Symbol.Mail },  
7.      new NavLink() { Label = "CellPhone", Symbol = Symbol.CellPhone },  
8.  };  

其中NavLink是自定义类

2、OnNavigatedTo事件中绑定Pane的数据源：

[csharp]  view plain  copy

1. listView.ItemsSource = navLinks;  

3、在选择 ComboBox后改变DisplayMode：

[csharp]  view plain  copy

1. splitView.DisplayMode = (SplitViewDisplayMode)Enum.Parse(typeof(SplitViewDisplayMode), (e.AddedItems[0] as ComboBoxItem).Content.ToString());  

4、汉堡点击事件， 用于切换Pane的显示 ：

[csharp]  view plain  copy

1. splitView.IsPaneOpen = !splitView.IsPaneOpen;  

5、点击某一项时，展示Content：

[csharp]  view plain  copy

1. content.Text = (e.ClickedItem as NavLink).Label;  

注意：当DisplayMode=Inline或DisplayMode=Overlay时，Pane面板会被Content遮挡，变为"不可见"。

更多关于SplitView的内容请查阅MSDN： SplitView

Demo下载：https://github.com/hebecherish/Win10-SplitViewDemo