【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