[UWP][ハンバーガーメニュー] メニュークリック時の処理を実装する

2016.04.29

前回「メニューを表示する」の記事で、ハンバーガーメニュークリック時にメニューを表示する方法について説明しました。

今回は、メニュークリック時にSplitViewのContentエリアにページを表示する方法について説明します。

SplitViewのContentには、GridやStackPanel等を配置して、そのままメインコンテンツとして使用することも可能ですが、選択された内容によってコンテンツを切り替えたい場合もあるでしょう。

このような場合は、SplitViewのContentにFrameコントロールを配置して、そのFrameにあらかじめ作成しておいたページを表示するようにします。

メニューに対応するページは、プロジェクトに必要数分のページを追加しておきます。

ハンバーガーメニューのあるページは以下のようにします。

前回と異なるのは、各メニューが選択されたときのイベントを追加していること、SplitViewのContentにFrameコントロールを配置していることです。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <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 x:Name="menu1" Content="メニュー1" Tapped="menu1_Tapped"/>
                    <ListViewItem x:Name="menu2" Content="メニュー2" Tapped="menu2_Tapped"/>
                    <ListViewItem x:Name="menu3" Content="メニュー3" Tapped="menu3_Tapped"/>
                </ListView>
            </Grid>
        </SplitView.Pane>
        <SplitView.Content>
            <Frame x:Name="mainContentView" />
        </SplitView.Content>
    </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>

</Grid>

つづいて、MainPageのコードを以下に示します。

アプリが起動したときは、Frameコントロールにpage1を表示するようにしています。

また、各メニューが選択されたときは、各メニューに合わせたページを表示するようにしています。ページ表示後は「splitView.IsPaneOpen = false;」としてメニューを閉じています。

public MainPage()
{
    this.InitializeComponent();

    // アプリ起動時はpage1を表示する
    mainContentView.Navigate(typeof(page1));
}

/// <summary>
/// メニュー１選択時の処理
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void menu1_Tapped(object sender, TappedRoutedEventArgs e)
{
    mainContentView.Navigate(typeof(page1));
    splitView.IsPaneOpen = false;
}

/// <summary>
/// メニュー２選択時の処理
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void menu2_Tapped(object sender, TappedRoutedEventArgs e)
{
    mainContentView.Navigate(typeof(page2));
    splitView.IsPaneOpen = false;
}

/// <summary>
/// メニュー３選択時の処理
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void menu3_Tapped(object sender, TappedRoutedEventArgs e)
{
    mainContentView.Navigate(typeof(page3));
    splitView.IsPaneOpen = false;
}

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