UWP開發入門（一）——SplitView

標籤：

　　接下來會寫一個UWP（Universal Windows Platform）開發入門的系列，自己學習到哪裡，有什麼心得總結，就會寫到哪裡。本篇對適用於頂層導航的SplitView控制項展開討論。

　　首先SplitView是Win10 UWP新增的控制項，以前雖然可以通過DockPanel類比出類似的效果，但又哪裡及得上M$原生支援的SplitView快捷方便呢。

　　至於為什麼說SplitView適合頂層導航，可以參考目前尚為數不多的UWP APP，比如微博、QQ和網易等Win10 APP，基本都是通過SplitView將主介面分成左右兩塊Pane和Content，在螢幕寬度減至一定程度，自動隱藏Pane，僅顯示Content。又或者將導覽功能表至於Pane中，通過漢堡菜單來控制是否顯示，諸如此類。

　　SplitView的類定義這裡就不貼了，即使去除Inherited和Protected的成員，也稍嫌有些多了。我們先從用法著手，再一點一點深入介紹比較重要的屬性。

<SplitView IsPaneOpen="True"           DisplayMode="Inline"           OpenPaneLength="296">    <SplitView.Pane>        <TextBlock Text="Pane"                   FontSize="24"                   VerticalAlignment="Center"                   HorizontalAlignment="Center"/>    </SplitView.Pane>    <Grid>        <TextBlock Text="Content"                   FontSize="24"                   VerticalAlignment="Center"                   HorizontalAlignment="Center"/>    </Grid></SplitView>

　　這段XAML是圖省事從MSDN上拷下來的，顯示的效果呢如：

　　簡單的分析一下，SplitView的Children一般有兩個，預設左邊Pane和右邊Content。Pane的顯示由IsPaneOpen這個屬性決定，所以binding用在這裡就對了。然後通過漢堡菜單來修改這個binding的bool值，你懂的。

　　各位是不是覺得本篇實在太水了……別著急啊還沒講完呢……我們接下來看DisplayMode這個屬性：

　　這個屬性是一個枚舉值，各位英文不好的童鞋，你們有福了，在UWP文檔匱乏更不會有中文的情況下，將有同樣英文不好的我給你們翻譯（聖光庇佑你們……）

Member	Value	Description
Overlay	0	1.Pane顯示的時候浮在Content上面 2.隱藏的時候完全消失 3.點擊非Pane地區會導致Pane隱藏
Inline	1	1.Pane顯示的時候會將Content一屁股擠到旁邊去 2.隱藏時無隱無蹤 3.你點不點他，他還在那裡……
CompactOverlay	2	1.根據CompactPaneLength的長度設定，死皮賴臉會露一點點出來 2.其他行為與Overlay保持一致 3.適用於導覽功能表由表徵圖+文字組成，展開顯示全部，隱藏僅顯示表徵圖
CompactInline	3	1.你懂的

　　屬性CompactPaneLength，剛剛提到，給你的表徵圖留點空間就行。

　　屬性OpenPaneLength，這個屬性很有意思也很重要。如果你不去設定這個值，你會發現系統會自動計算。結果就是在PC和Pad上，足夠空間的情況下，Overlay的Pane不會遮擋整個Content，會以一個美觀的比列呈現。但UWP程式運行在Phone上時，Pane會完全的遮住Content，辣總感覺你自己體會。老司機這裡一段話省了你多少時間啊QAQ（記得評論裡感謝我）

　　屬性PanePlacement，這個沒啥講的，就是控制Pane顯示在左邊還是右邊。

　　最後以一個呆魔（Demo）作為結束：

　　漢堡菜單，List導覽列，Pivot分類應有盡有，只在GayHub：

　　https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/XamlPivot

　　另外本文參考：

　　https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.splitview.aspx

UWP開發入門（一）——SplitView