[UWP][ハンバーガーメニュー] メニューを表示する

UWP

2016.04.28

前回、「SplitViewを使用する」でハンバーガーメニューがクリックされたときに表示されるメニュー部分とコンテンツ部分の説明をしました。

今回は、実際にハンバーガーメニュークリック時にメニューが表示されるようにしていきます。

ハンバーガーメニューはToggleButtonを使用しているので、押したときは IsChecked がTrueになります。このIsChecked を SplitView の IsPaneOpenプロパティにバインディングすることで、メニューの開閉ができるようにします。

また、メニューはSplitView の Paneに配置しますが、TextBlockでもRadioButtonでも作成することができます。ここではListViewを使用します。ListViewは選択した項目がハイライトされた状態になるので見やすいかと思います。

Xamlは以下の通りです。

<SplitView x:Name="splitView" DisplayMode="CompactOverlay"
           CompactPaneLength="0"
           OpenPaneLength="320"
           IsPaneOpen="{Binding ElementName=toggleButton, Path=IsChecked, Mode=TwoWay}"
           PaneBackground="#33000000"
           Margin="0, 48, 0, 0"
           >
    <SplitView.Pane>
        <Grid>
            <ListView x:Name="listView" HorizontalAlignment="Left" Height="592" 
                      VerticalAlignment="Top">
                <ListViewItem Content="メニュー1"/>
                <ListViewItem Content="メニュー2"/>
                <ListViewItem Content="メニュー3"/>
            </ListView>
        </Grid>
    </SplitView.Pane>
</SplitView>

<ToggleButton x:Name="toggleButton" HorizontalAlignment="Left"  VerticalAlignment="Top" Width="48" Height="48">
    <ToggleButton.Content>
        <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE700;" />
    </ToggleButton.Content>
</ToggleButton>

IsPaneOpenに ToggleButtonのIsCheckedをバインディングしています。ModeをTwoWayとしているのは、ハンバーガーメニューを押したときと、Pane部分のメニューを選択したときに対応ができるようにしているためです。

また、メニューがハンバーガーメニューの下に表示されるようにするためSplitViewのMarginプロパティの上からの位置をハンバーガーメニューの高さ分（48）を指定しています。

メニューそのものは、SplitViewコントロールのPaneのコンテンツにGridを配置し、その中にListViewを置いて実現しています。

実行例は以下の通りです。