トルネード

毛利のメモ書き

UWP 入門 - 画面遷移と戻るボタン

MainPage.xaml以外のページに移動

Visual Studio 2017メニューから[新規作成|プロジェクト]を選択すると「新しいプロジェクト」ダイアログが表示されます。[Visual C#|空白のアプリ(ユニバーサルWindows)]でUWPのプロジェクトが作成されます。 そのまま[デバッグの開始(F5)]すると、デフォルトでは「MainPage.xaml」が実行されます。その「MainPage.xaml」にボタンをひとつ追加して、別のページに遷移するプログラムを作ります。

「MainPage.xaml

<Grid Background="#006064">
    <Button HorizontalAlignment="Left" Margin="50,40,0,0" VerticalAlignment="Top" Width="124" Background="#00838F" Click="Button_Click" Height="40" >
        <Button.Content>
            <TextBlock Text="次の画面へ" FontSize="16" HorizontalAlignment="Center" Margin="0,0,0,0" VerticalAlignment="Center" >
                <TextBlock.Foreground>
                    <SolidColorBrush Color="#E0F7FA"></SolidColorBrush>
                </TextBlock.Foreground>
            </TextBlock>
        </Button.Content>
    </Button>
</Grid>

ボタンを一つ追加して少し色を変更しました。 f:id:mojeld:20180725142156p:plain

「BlankPage1.xaml」を追加

画面右側の[ソリューションエクスプローラー]からプロジェクト名を右クリックするとポップアップメニューが表示されますので、[追加|新しい項目]を選択します。[新しい項目の追加]ダイアログが表示されますので、[Visual C#|空白のページ]を選択して[OK]するとデフォルトでは「BlankPage1.xaml」が追加されます。

「BlankPage1.xaml」にも色をつけてボタンを追加します。 f:id:mojeld:20180725142814p:plain

[MainPage.xaml]のボタンクリックイベント

[MainPage.xaml]から「BlankPage1.xaml」に遷移できるように [MainPage.xaml]のボタンクリックイベントを作成します。

private void Button_Click(object sender, RoutedEventArgs e)
{
    Frame.Navigate(typeof(BlankPage1));
}

ここで記述したNavigate()だけで遷移できます。

「BlankPage1.xaml」から「戻る」処理

BlankPage1は[戻る]ボタンクリックイベントとアプリ側のBackButtonもつけたいと思います。

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility = Frame.CanGoBack ?
        AppViewBackButtonVisibility.Visible : AppViewBackButtonVisibility.Collapsed;
    SystemNavigationManager.GetForCurrentView().BackRequested += hogehoge;
    base.OnNavigatedTo(e);
}
private void hogehoge(object obj, Windows.UI.Core.BackRequestedEventArgs e)
{
    if (Frame.CanGoBack)
    {
        Frame.GoBack();
        if(e != null)
            e.Handled = true;
    }
}

private void Button_Click(object sender, RoutedEventArgs e)
{
    hogehoge(sender, null);
}
}

SystemNavigationManagerで下図のようなBackButtonをつけることができます。
f:id:mojeld:20180725143726p:plain

BlankPage1でOnNavigatedTo()をoverrideし、BackButtonを追加しましょう。 ボタンクリックとBackButtonと同じ挙動にするためにhogehoge()関数を作って共通にしています。

「MainPage.xaml」でBackButtonを非表示する処理

MainPageに戻ったときも同じくOnNavigatedTo()が呼ばれますので、ここにもOnNavigatedTo()をoverrideします。

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility = Frame.CanGoBack ?
        AppViewBackButtonVisibility.Visible : AppViewBackButtonVisibility.Collapsed;
    base.OnNavigatedTo(e);
}

結果

下図のように動作すれば成功です。

f:id:mojeld:20180725144727g:plain

参考

[UWP] 入門006:別のページに遷移する | 眠るシーラカンスと水底のプログラマー