[深入淺出Windows 10]分屏控制項（SplitView）

標籤：

4.18 分屏控制項（SplitView）

    分屏控制項（SplitView）是Windows 10新增的控制項類型，也是Windows 10跨平台 app程式主推的互動控制項，通常和一個漢堡按鈕搭配作為一種抽屜式菜單來進行呈現。控制項的XAML文法如下：

    <SplitView>

         <SplitView.Pane >

         ……菜單面板的內容

         </SplitView.Pane >

         ……主體內容

    </SplitView>

    SplitView控制項主要由兩部分組成，一部分是菜單的面板，另一部分是主體內容，菜單面板是通過Pane屬性來進行賦值，並且通過IsPaneOpen屬性來控制開啟和關閉狀態，true表示開啟，false表示關閉。當菜單關閉的時候，頁面將全部顯示SplitView的主體內容，主題內容為Content屬性，簡潔的XAML文法方式可以直接寫在SplitView節點裡面。

下面給出SplitView控制項的樣本：實現漢堡菜單。

    代碼清單4-18：SplitView控制項（原始碼：第4章\Examples_4_18）

MainPage.xaml檔案主要代碼------------------------------------------------------------------------------------------------------------------    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">        <ToggleButton Click="Button_Click" VerticalAlignment="Top" Foreground="Green" >            <ToggleButton.Content>                <Border Background="Transparent" Width="40" Height="40">                    <FontIcon x:Name="Hamburger" FontFamily="Segoe MDL2 Assets" Glyph="&#xE700;" />                </Border>            </ToggleButton.Content>        </ToggleButton>        <SplitView x:Name="Splitter" IsPaneOpen="True" >            <SplitView.Pane >                <StackPanel VerticalAlignment="Center">                    <Button Content="菜單1" Click="Button_Click_1"></Button>                    <Button Content="菜單2" Click="Button_Click_1"></Button>                    <Button Content="菜單3" Click="Button_Click_1"></Button>                    <Button Content="菜單4" Click="Button_Click_1"></Button>                </StackPanel>            </SplitView.Pane>            <Grid>                <TextBlock x:Name="tb" Text="" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>            </Grid>        </SplitView>    </Grid>

MainPage.xaml.cs檔案主要代碼------------------------------------------------------------------------------------------------------------------    // 漢堡表徵圖按鈕事件處理    private void Button_Click(object sender, RoutedEventArgs e)    {        Splitter.IsPaneOpen = (Splitter.IsPaneOpen == true) ? false : true;    }    // 漢堡菜單裡面的按鈕事件處理    private void Button_Click_1(object sender, RoutedEventArgs e)    {        Splitter.IsPaneOpen = false;        tb.Text = "你好" + (sender as Button).Content.ToString();    }

本文來源於《深入淺出Windows 10跨平台 app開發》

原始碼下載：http://vdisk.weibo.com/u/2186322691

目錄：http://www.cnblogs.com/linzheng/p/5021428.html

歡迎關注我的微博@WP林政   公眾號：wp開發（號：wpkaifa）

Windows10/WP技術交流群：284783431

[深入淺出Windows 10]分屏控制項（SplitView）