【Win 10应用开发】SplitView控件

【Win 10应用开发】SplitView控件

原文:【Win 10应用开发】SplitView控件

SplitView控件用于呈现分隔视图，简单地说，就是把一个视图分割为两部分，Content属性所表示的为主要视图，而Pane属性设置的视图则可以隐藏，可以折叠和展开。

估计文字是不太容易介绍这个控件的，还是用实例来说明吧，老周平生最爱实例，最BS枯燥的理论的。

先看XAML代码：

<SplitView x:Name="splitView" OpenPaneLength="150" CompactPaneLength="45" PaneBackground="LightGray" DisplayMode="CompactOverlay"><Image Stretch="Uniform" Source="{Binding ElementName=lvPrev,Path=SelectedItem.Uri}"/><SplitView.Pane><Grid><Grid.RowDefinitions><RowDefinition Height="auto"/><RowDefinition Height="*"/></Grid.RowDefinitions><StackPanel Grid.Row="0" Orientation="Horizontal"><Button BorderThickness="0" Grid.Row="1" Background="Transparent" Click="OnClick"><Button.Content><TextBlock Text="&#xE700;" FontFamily="Segoe MDL2 Assets" FontSize="24" /></Button.Content></Button><TextBlock Margin="10,0,0,0" VerticalAlignment="Center" FontSize="18" Text="选择图像"/></StackPanel><ListView x:Name="lvPrev" Grid.Row="1"><ListView.ItemTemplate><DataTemplate><Grid><Grid.ColumnDefinitions><ColumnDefinition Width="Auto"/><ColumnDefinition/></Grid.ColumnDefinitions><Image Width="20" Height="20" Stretch="Uniform"><Image.Source><BitmapImage UriSource="{Binding Uri}" DecodePixelWidth="20"/></Image.Source></Image><TextBlock Grid.Column="1" Text="{Binding Text}" VerticalAlignment="Center" Margin="15,0,0,0"/></Grid></DataTemplate></ListView.ItemTemplate></ListView></Grid></SplitView.Pane></SplitView>

别看代码长，其实不复杂。由于SplitView的Content属性被声明为内容标记，因此<SplitView.Content>.....</SplitView.Content>这一层节点可以省略，所以，你就明白，只机是直接写在SplitView的开始和结束标记之间的，就是Content属性的内容。
上面例子中，SplitView控件的主体内容就是一个Image控件，待会儿我让它来显示图像，而至于显示哪一张图像，就通过ListView控件的SelectedItem来决定，所以就把Image.Source与SelectedItem属性绑定。

ListView中的项目我定义了一个类专门用于封装：

public class ViewItem{public string Text { get; set; } public Uri Uri { get; set; } }

Text表示一张图像的名称，Uri就是图像地址，为了绿色环保，要用到的图片我都放在项目里面，本地引用速度快一些。

然后在页面代码中生成一批ViewItem，并作为ListView的数据源。

ObservableCollection<ViewItem> m_items = null;.........
        m_items = new ObservableCollection<ViewItem>();
        this.lvPrev.ItemsSource = m_items;
………………protected override void OnNavigatedTo(NavigationEventArgs e){m_items.Clear();// 添加项列表m_items.Add(new ViewItem { Text = "雪花", Uri = new Uri("ms-appx:///Assets/images/1.jpg") });m_items.Add(new ViewItem { Text = "风筝", Uri = new Uri("ms-appx:///Assets/images/2.jpg") });m_items.Add(new ViewItem { Text = "核桃", Uri = new Uri("ms-appx:///Assets/images/3.jpg") });m_items.Add(new ViewItem { Text = "小溪", Uri = new Uri("ms-appx:///Assets/images/4.jpg") });m_items.Add(new ViewItem { Text = "胡杨", Uri = new Uri("ms-appx:///Assets/images/5.jpg") });m_items.Add(new ViewItem { Text = "红梅", Uri = new Uri("ms-appx:///Assets/images/6.jpg") });}

所以，只要在ListView中选择一个图像，就会在Image中显示。但是，ListView不应该是主要视图，故把它放在SplitView.Pane中，这样它就可以折叠了。

 

下面再把重点回归到SplitView控件上。

<SplitView x:Name="splitView" OpenPaneLength="150" CompactPaneLength="45" PaneBackground="LightGray" DisplayMode="CompactOverlay">……

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

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

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

DisplayMode：设置Pane区域的显示方式，主要有以下几个值。

   Inline：内联，就是Pane中的内容与Content中的内容处于一个层上，当Pane展开时，Content的宽度会收缩。比如这样：

 

   Overlay：表示Pane的内容覆盖在Content的内容之上。此时的Pane内容就像一个弹出层。而且，当你点击其他视图区域时，Pane的内容会隐藏。比如：

 

   CompactInline：Pane内容与Content内容位于同一个层上，但Pane内容处于折叠状态，折叠后的宽度由CompactPaneLength属性来设置。比如这样：

 

   CompactOverlay：Pane内容折叠，并浮动在Content内容上，即它们不在同一个层上，点击其他地方会使Pane隐藏。

 

示例界面上还有一个Button，点击它可以切换SplitView的状态。

private void OnClick(object sender, Windows.UI.Xaml.RoutedEventArgs e){this.splitView.IsPaneOpen = !this.splitView.IsPaneOpen;}

IsPaneOpen为true时，Pane内容展开；否则Pane内容折叠。

示例运行结果如下：

 

好好好，本文简单介绍了Win10应用中新增的SplitView控件。

示例下载：http://files.cnblogs.com/files/tcjiaan/MyApp.zip

 

posted on 2015-08-08 09:12 NET未来之路 阅读(...) 评论(...) 编辑 收藏

转载于:https://www.cnblogs.com/lonelyxmas/p/4712538.html

总结

以上是生活随笔为你收集整理的【Win 10应用开发】SplitView控件的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。