[UWP][ハンバーガーメニュー] 戻るボタンの実装

2016.05.02

複数のページを持つアプリケショーンでは、[戻る]ボタンを実装したい場合があります。

今回は、この戻るボタンを実装する方法について見ていきましょう。

「メニューを表示する」と「メニュークリック時の処理を実装する」の記事でハンバーガーメニューによるページの切り替えをしました。

ページが表示されたときに「戻る」ボタンを表示するには、Windows.UI.Core.SystemNavigationManager.GetForCurrentView()
.AppViewBackButtonVisibilityプロパティに以下表の値を設定します。

値	説明
AppViewBackButtonVisibility.Visible	[戻る]ボタンを表示
AppViewBackButtonVisibility.Collapsed	[戻る]ボタンを非表示

[戻る]ボタンを表示するべきかどうかは、そのFrameが前のページに戻れる状態であるかどうかを確認する必要があります。これはFrame.CanGoBackで確認をします。

これをどのタイミングで行うかというと、ページが表示されたタイミングで行います。

「ページが表示されたタイミング」というのは、OnNavigatedToイベントが発生した場合を指します。

また、[戻る]ボタンが押された場合には、実際に以前表示していたページへ戻す必用があります。[戻る]ボタンが押された場合はBackRequestedイベントが発生するので、このイベントの中で戻す処理を行います。

以下にコード例を示します。このコードは[戻す]ボタンを表示したい遷移先となるページに実装をします。

using Windows.UI.Core; // 忘れずに！

// ページ表示時
protected override void OnNavigatedTo(NavigationEventArgs e)
{
    base.OnNavigatedTo(e);

    // [戻る]ボタンを表示するかどうかを設定する
    SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility = 
        Frame.CanGoBack ? AppViewBackButtonVisibility.Visible : AppViewBackButtonVisibility.Collapsed;

    //［戻る］ボタンが押されたときのイベントを結び付ける
    Windows.UI.Core.SystemNavigationManager.GetForCurrentView()
      .BackRequested += Page_BackRequested;
}


// [戻る]ボタンを押したときの処理
private void Page_BackRequested(object sender,
              Windows.UI.Core.BackRequestedEventArgs e)
{
    if (Frame.CanGoBack)
    {
        Frame.GoBack();
        e.Handled = true;
    }
}

最後に[戻る]ボタンが押されたときの処理を実装します。[戻る]ボタンを押す = ページを離れることになるので、この場合、[戻る]ボタンに紐付けていたイベントハンドラーの解除をします。

// ページを離れる場合の処理
protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)
{
    base.OnNavigatingFrom(e);

    // ［戻る］ボタンのイベントハンドラーを解除
    SystemNavigationManager.GetForCurrentView()
      .BackRequested -= Page_BackRequested;
}

事項例を以下に示します。ページが遷移し、戻ることができるページがある場合には、左上に[戻る]ボタンが表示されます。