接下來會寫一個UWP(Universal Windows Platform)開發入門的系列,本身學習到哪裏,有什麼心得總結,就會寫到哪裏。本篇對適用於頂層導航的SplitView控件展開討論。git
首先SplitView是Win10 UWP新增的控件,之前雖然能夠經過DockPanel模擬出相似的效果,但又哪裏及得上M$原生支持的SplitView快捷方便呢。github
至於爲何說SplitView適合頂層導航,能夠參考目前尚爲數很少的UWP APP,好比微博、QQ和網易等Win10 APP,基本都是經過SplitView將主界面分紅左右兩塊Pane和Content,在屏幕寬度減至必定程度,自動隱藏Pane,僅顯示Content。又或者將導航菜單至於Pane中,經過漢堡菜單來控制是否顯示,諸如此類。windows
SplitView的類定義這裏就不貼了,即便去除Inherited和Protected的成員,也稍嫌有些多了。咱們先從用法着手,再一點一點深刻介紹比較重要的屬性。app
<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值,你懂的。ui
各位是否是以爲本篇實在太水了……彆着急啊還沒講完呢……咱們接下來看DisplayMode這個屬性:spa
這個屬性是一個枚舉值,各位英文很差的童鞋,大家有福了,在UWP文檔匱乏更不會有中文的狀況下,將有一樣英文很差的我給大家翻譯(聖光庇佑大家……)翻譯
Membercode |
Valueorm |
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