[UWP][ハンバーガーメニュー] SplitViewを使用する

UWP

2016.04.27

ハンバーガーメニューでは、メニュー部分とコンテンツページ部分とに分かれていることがわかります。

ハンバーガーメニューではボタン押すと左側からヌルッとメニューが表示されますが、これを実現するにはSplitViewコントロールを使用するのが最適です。

SplitViewは2つのビューを持ち、1つはPane、もう1つはContentです。

Paneにはメニューを置き、Contentにはメニューに対応づけたコンテンツを表示します。

SplitViewの機能を確認するために、MainPage.xaml にSplitViewを配置し、Xamlを以下のように編集します。

Pane部分がどこの範囲かをわかるように背景色をグレー（#33000000）にしています。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <SplitView x:Name="splitView"
               CompactPaneLength="0"
               OpenPaneLength="320"
               IsPaneOpen="True" DisplayMode="Inline"
               PaneBackground="#33000000">
        <SplitView.Pane>
            <Grid>
                <TextBlock Text="Pane" />
            </Grid>
        </SplitView.Pane>
        <SplitView.Content>
            <Grid>
                <TextBlock Text="Content" />
            </Grid>
        </SplitView.Content>
    </SplitView>
</Grid>

上記の実行結果は以下の通りです。

Paneは左側に、Content部分は右側に表示されていることがわかります。

ここでSplitViewコントロールで使用した各種プロパティについて見ていきましょう。

プロパティ	説明
CompactPaneLength	Paneエリアの最小幅。
OpenPaneLength	Paneを開いたときの幅
IsPaneOpen	Paneを開くかどうか。Trueで開き、Falseで閉じる。配置したメニューを表示する場合はTrueにします。
DisplayMode	後述
PaneBackground	Paneの背景色

DisplayModeについて
ハンバーガーメニューの関連Tips

DisplayModeについて

DisplayMode は Pane と Content をどのように表示するかの設定です。

以下表の通り4種類あります。

値	説明
Overlay	Contentの上にPaneが表示される
Inline	Paneの横にContentが表示される
CompactOverlay	IsPaneOpenをFalseにしても、少しだけPane部分が見える（CompactPaneLengthで指定した分のみ）。Contentの上にPaneが表示される。
CompactInline	IsPaneOpenをFalseにしても、少しだけPane部分が見える（CompactPaneLengthで指定した分のみ）。Paneの横にContentが表示される。