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

スポンサーリンク

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

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

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

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

SplitViewコントロール

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について

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

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

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

ハンバーガーメニューのあるアプリでよく使用されるのは Overlay か CompactOverlayのようです。

自作するアプリに合わせて設定されることをおすすめします。

スポンサーリンク

ハンバーガーメニューの関連Tips

コメント

タイトルとURLをコピーしました