UWP開發入門(一)——SplitView

  接下來會寫一個UWPUniversal Windows Platform)開發入門的系列,本身學習到哪裏,有什麼心得總結,就會寫到哪裏。本篇對適用於頂層導航的SplitView控件展開討論。git

  首先SplitViewWin10 UWP新增的控件,之前雖然能夠經過DockPanel模擬出相似的效果,但又哪裏及得上M$原生支持的SplitView快捷方便呢。github

  至於爲何說SplitView適合頂層導航,能夠參考目前尚爲數很少的UWP APP,好比微博、QQ和網易等Win10 APP,基本都是經過SplitView將主界面分紅左右兩塊PaneContent,在屏幕寬度減至必定程度,自動隱藏Pane,僅顯示Content。又或者將導航菜單至於Pane中,經過漢堡菜單來控制是否顯示,諸如此類。windows

  SplitView的類定義這裏就不貼了,即便去除InheritedProtected的成員,也稍嫌有些多了。咱們先從用法着手,再一點一點深刻介紹比較重要的屬性。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上拷下來的,顯示的效果呢以下圖:學習

  簡單的分析一下,SplitViewChildren通常有兩個,默認左邊Pane和右邊Content。Pane的顯示由IsPaneOpen這個屬性決定,因此binding用在這裏就對了。而後經過漢堡菜單來修改這個bindingbool值,你懂的。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,這個屬性頗有意思也很重要。若是你不去設置這個值,你會發現系統會自動計算。結果就是在PCPad上,足夠空間的狀況下,OverlayPane不會遮擋整個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

相關文章
相關標籤/搜索