次の方法で共有

ページ間を移動する

チュートリアルのこの部分では、最後の部分をアプリに追加し、 すべてのノート ページと個々の ノート ページの間を移動します。

アプリ内ナビゲーションを処理するコードを記述する前に、想定されるナビゲーション動作について説明しましょう。

AllNotesPageには、既存のノートのコレクションと [新しいメモ] ボタンがあります。

  • 既存のノートをクリックすると、ノート ページに移動し、クリックされたノートが読み込まれます。
  • [ 新しいメモ ] ボタンをクリックすると、ノート ページに移動し、空の未保存のノートが読み込まれます。

ノート ページで、[ 戻る ] ボタンを追加し、[ 保存] ボタンと [ 削除 ] ボタンがあります。

  • [戻る] ボタンをクリックすると、すべてのノート ページに戻り、ノートに加えられた変更は破棄されます。
  • [ 削除 ] ボタンをクリックすると、メモが削除され、戻ります。

新しいメモ

最初に、新しいノートのナビゲーションを処理します。

ヒント

このチュートリアルのコードは 、GitHub リポジトリからダウンロードまたは表示できます。 この手順のコードをそのまま表示するには、次のコミットを参照してください。 ナビゲーション - 新しいメモ。

  1. AllNotesPage.xaml で、新しいノートのAppBarButtonを見つけます。

  2. Click イベント ハンドラーを追加し、名前を NewNoteButton_Click に変更します。 (これを行う方法を通知する必要がある場合は、ノート ページの手順で イベント ハンドラーを追加 するを参照してください)。

    <AppBarButton Icon="Add" Label="New note"
              Click="NewNoteButton_Click"/>

  3. NewNoteButton_Click メソッド (AllNotesPage.xaml.cs) に、次のコードを追加します。

    private void NewNoteButton_Click(object sender, RoutedEventArgs e)
{
    // ↓ Add this. ↓
    Frame.Navigate(typeof(NotePage));
}

各ページには、が属している Frame インスタンスへの参照を提供する Page プロパティがあります (存在する場合)。 これは、ここで Frame メソッドを呼び出すです。 Navigate メソッドは、移動するページの Type を受け取ります。 Type演算子を使用して、C# でそのtypeofを取得します。

ここでアプリを実行する場合は、[ 新しいメモ ] ボタンをクリックしてノート ページに移動し、ノート エディターに入力できます。 ただし、メモを保存しようとすると、何も起こりません。 これは、 Note モデルのインスタンスがまだノート ページに作成されていないためです。 ここで行います。

  1. NotePage.xaml.csを開きます。

  2. ページの OnNavigatedTo メソッドをオーバーライドするコードを追加します。

    public NotePage()
{
    this.InitializeComponent();
}
//  ↓ Add this. ↓
protected override void OnNavigatedTo(NavigationEventArgs e)
{
    base.OnNavigatedTo(e);

    noteModel = new Note();
}

NotePageに移動すると、Note モデルの新しいインスタンスが作成されます。

既存のノート

次に、既存のノートのナビゲーションを追加します。 現在、 ItemsViewでノートをクリックすると、ノートは選択されますが、何も起こりません。 ほとんどのコレクション コントロールの既定の動作は 1 回の選択です。つまり、一度に 1 つの項目が選択されます。 ItemsViewを更新して、選択するのではなく、ボタンなどの項目をクリックできるようにします。

ヒント

このチュートリアルのコードは 、GitHub リポジトリからダウンロードまたは表示できます。 この手順のコードをそのまま表示するには、次のコミットを参照してください: ナビゲーション - 最終的なアプリ。

  1. AllNotesPage.xaml を開きます。

  2. ItemsView = と IsItemInvokedEnabled = を使用して、Trueの XAML を更新します。

  3. ItemInvoked イベントのハンドラーを追加します。

    <ItemsView ItemsSource="{x:Bind notesModel.Notes}"
           Grid.Row="1" Margin="24" 
           ItemTemplate="{StaticResource NoteItemTemplate}"
           <!-- ↓ Add this. ↓ -->
           SelectionMode="None"
           IsItemInvokedEnabled="True"
           ItemInvoked="ItemsView_ItemInvoked">

  4. AllNotesPage.xaml.csで、ItemsView_ItemInvoked メソッドを見つけます。 (Visual Studio で作成されていない場合は、コードをコピーして貼り付けた場合に発生する可能性があります。次の手順で追加します)。

  5. ItemsView_ItemInvoked メソッドで、NotePageに移動するコードを追加します。 今回は、オブジェクトを他のページに渡す Navigate メソッドのオーバーロードを使用します。 呼び出された Note を 2 番目のナビゲーション パラメーターとして渡します。

    private void ItemsView_ItemInvoked(ItemsView sender, ItemsViewItemInvokedEventArgs args)
{
    Frame.Navigate(typeof(NotePage), args.InvokedItem);
}

  6. NotePage.xaml.csを開きます。

  7. OnNavigatedToの呼び出しによって渡されるNoteを処理するように、Navigate メソッドのオーバーライドを更新します。

    protected override void OnNavigatedTo(NavigationEventArgs e)
{
    base.OnNavigatedTo(e);

    //  ↓ Update this. ↓
    if (e.Parameter is Note note)
    {
        noteModel = note;
    }
    else
    {
        noteModel = new Note();
    }
   // ↑ Update this. ↑
}

    このコードでは、最初に、渡された パラメーター が Note オブジェクトであるかどうかを確認します。 その場合は、ページの Note モデルとして割り当てます。 null Note場合は、以前と同様に新しいNoteを作成します。

戻るナビゲーション

最後に、個々のノートからすべてのノート ページに戻ることができるように、アプリを更新する必要があります。

WinUI TitleBar コントロールには、配置と外観に関するすべての Fluent Design ガイドラインを満たす戻るボタンが含まれています。 戻るナビゲーションには、この組み込みボタンを使用します。

  1. MainWindow.xaml を開きます。

  2. TitleBar = および True を Frame.CanGoBack プロパティにバインドして、の XAML を更新します。

  3. BackRequested イベントのハンドラーを追加します。 XAML は次のようになります。

    <TitleBar x:Name="AppTitleBar"
          Title="WinUI Notes"
          IsBackButtonVisible="True"
          IsBackButtonEnabled="{x:Bind rootFrame.CanGoBack, Mode=OneWay}"
          BackRequested="AppTitleBar_BackRequested">

    ここでは、 IsBackButtonVisible プロパティが true に設定されています。 これにより、アプリ ウィンドウの左上隅に [戻る] ボタンが表示されます。

    次に、 IsBackButtonEnabled プロパティは Frame.CanGoBack プロパティにバインドされるため、戻るボタンはフレームが戻ることができる場合にのみ有効になります。

    最後に、 BackRequested イベント ハンドラーが追加されます。 ここで、戻るコードを配置します。

  4. MainWindow.xaml.csで、次のコードを AppTitleBar_BackRequested メソッドに追加します。

    private void AppTitleBar_BackRequested(TitleBar sender, object args)
{
    // ↓ Add this. ↓
    if (rootFrame.CanGoBack == true)
    {
        rootFrame.GoBack();
    }
    // ↑ Add this. ↑
}

    Frame クラスは BackStack 内のナビゲーションを追跡するため、GoBack メソッドを呼び出すだけで前のページに戻ることができます。 を呼び出す前に、常に GoBack プロパティを確認することをお勧めします。

次に、メモが削除された後に戻るには、 NotePage のコードを更新する必要があります。

  1. NotePage.xaml.csを開きます。

  2. メモが削除された後、DeleteButton_Click メソッドを呼び出して、Frame.CanGoBack イベント ハンドラー メソッドを更新します。

    private async void DeleteButton_Click(object sender, RoutedEventArgs e)
{
    if (noteModel is not null)
    {
        await noteModel.DeleteAsync();
    }
    // ↓ Add this. ↓
    if (Frame.CanGoBack == true)
    {
        Frame.GoBack();
    }
    // ↑ Add this. ↑
}

ヒント

NotePageでは、Frame.GoBackを呼び出したMainWindowに、rootFrame.GoBackを呼び出していることに気付いたかもしれません。 これは、Page クラスに、をホストしているFrameを取得する Page プロパティがあるためです (存在する場合)。 この場合は、 rootFrameへの参照を取得します。

これで、アプリを実行できます。 新しいメモの追加、メモ間の前後の移動、メモの削除を試してみてください。

詳細については、次のドキュメントを参照してください。

次のステップ

おめでとうございます! WinUI アプリの作成に関するチュートリアルを完了しました。

WinUI と Windows App SDK を使用したアプリの作成の詳細については、次のリンクを参照してください。

  • Last updated on