标签：win10   控件   

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、左上角的汉堡与“目录”：

<StackPanel Grid.Row="0" Orientation="Horizontal"> <Button BorderThickness="0" Grid.Row="1" Background="Transparent" Click="togglePaneButton_Click"> <Button.Content> <TextBlock Text="" FontFamily="Segoe MDL2 Assets" FontSize="24" /> </Button.Content> </Button> <TextBlock Margin="10,0,0,0" VerticalAlignment="Center" FontSize="18" Text="目录"/> </StackPanel>
2、“目录”的实现：

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

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

3、DisplayMode的选择：

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

<ComboBox x:Name="displayModeCombobox" Grid.Row="2" Width="148" SelectedIndex="0" SelectionChanged="displayModeCombobox_SelectionChanged" VerticalAlignment="Center" Header="DisplayMode"> <ComboBoxItem>CompactInline</ComboBoxItem> <ComboBoxItem>CompactOverlay</ComboBoxItem> <ComboBoxItem>Overlay</ComboBoxItem> <ComboBoxItem>Inline</ComboBoxItem> </ComboBox>
4、左下角的“设置” <StackPanel Orientation="Horizontal" Grid.Row="3" Margin="14,24,0,24" > <SymbolIcon Symbol="Setting" /> <TextBlock Text="设置" Margin="24,0,0,0" VerticalAlignment="Center"/> </StackPanel>
5、Content的实现：

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

<Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <TextBlock Text="内容" Margin="12,0,0,0" Style="{StaticResource BaseTextBlockStyle}"/> <TextBlock x:Name="content" Grid.Row="1" Margin="12,12,0,0" Style="{StaticResource BodyTextBlockStyle}" /> </Grid>
到此布局的XAML部分已经完成，下面讲解code behind部分：

二：C#部分

1、内容：

private ObservableCollection<NavLink> navLinks = new ObservableCollection<NavLink>() { new NavLink() { Label = "People", Symbol = Symbol.People }, new NavLink() { Label = "Globe", Symbol = Symbol.Globe }, new NavLink() { Label = "Message", Symbol = Symbol.Message }, new NavLink() { Label = "Mail", Symbol = Symbol.Mail }, new NavLink() { Label = "CellPhone", Symbol = Symbol.CellPhone }, };
其中NavLink是自定义类