【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控件。

示例下載下傳：https://files.cnblogs.com/files/tcjiaan/MyApp.zip