【Win 10应用开发】SplitView控件
原文:【W(wǎng)in 10應用開發(fā)】SplitView控件
SplitView控件用于呈現(xiàn)分隔視圖，簡單地說，就是把一個視圖分割為兩部分，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="" 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屬性被聲明為內(nèi)容標記，因此<SplitView.Content>.....</SplitView.Content>這一層節(jié)點可以省略，所以，你就明白，只機是直接寫在SplitView的開始和結(jié)束標記之間的，就是Content屬性的內(nèi)容。
上面例子中，SplitView控件的主體內(nèi)容就是一個Image控件，待會兒我讓它來顯示圖像，而至于顯示哪一張圖像，就通過ListView控件的SelectedItem來決定，所以就把Image.Source與SelectedItem屬性綁定。
ListView中的項目我定義了一個類專門用于封裝：
public class ViewItem{public string Text { get; set; } public Uri Uri { get; set; } }Text表示一張圖像的名稱，Uri就是圖像地址，為了綠色環(huán)保，要用到的圖片我都放在項目里面，本地引用速度快一些。
然后在頁面代碼中生成一批ViewItem，并作為ListView的數(shù)據(jù)源。
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中的內(nèi)容被展開后的寬度。
CompactPaneLength：當Pane的內(nèi)容被折疊后的寬度。
PaneBackground：設置繪制Pane視圖的背景的畫刷。
DisplayMode：設置Pane區(qū)域的顯示方式，主要有以下幾個值。
?? Inline：內(nèi)聯(lián)，就是Pane中的內(nèi)容與Content中的內(nèi)容處于一個層上，當Pane展開時，Content的寬度會收縮。比如這樣：
?
?? Overlay：表示Pane的內(nèi)容覆蓋在Content的內(nèi)容之上。此時的Pane內(nèi)容就像一個彈出層。而且，當你點擊其他視圖區(qū)域時，Pane的內(nèi)容會隱藏。比如：
?
?? CompactInline：Pane內(nèi)容與Content內(nèi)容位于同一個層上，但Pane內(nèi)容處于折疊狀態(tài)，折疊后的寬度由CompactPaneLength屬性來設置。比如這樣：
?
?? CompactOverlay：Pane內(nèi)容折疊，并浮動在Content內(nèi)容上，即它們不在同一個層上，點擊其他地方會使Pane隱藏。
?
示例界面上還有一個Button，點擊它可以切換SplitView的狀態(tài)。
private void OnClick(object sender, Windows.UI.Xaml.RoutedEventArgs e){this.splitView.IsPaneOpen = !this.splitView.IsPaneOpen;}IsPaneOpen為true時，Pane內(nèi)容展開；否則Pane內(nèi)容折疊。
示例運行結(jié)果如下：
?
好好好，本文簡單介紹了Win10應用中新增的SplitView控件。
示例下載：http://files.cnblogs.com/files/tcjiaan/MyApp.zip
?
posted on 2015-08-08 09:12 NET未來之路 閱讀(...) 評論(...) 編輯 收藏轉(zhuǎn)載于:https://www.cnblogs.com/lonelyxmas/p/4712538.html
總結(jié)
以上是生活随笔為你收集整理的【Win 10应用开发】SplitView控件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： UIGestureRecognizer学
- 下一篇： 执行了的程序,才是你的程序.