共用方式為

在頁面之間流覽

本教學課程的這個部分會將最後一個部分新增至應用程式，並在 所有筆記 頁面與個別 記事 頁面之間流覽。

在撰寫任何程式代碼來處理應用程式內導覽之前，讓我們來描述預期的瀏覽行為。

在 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));
}

每個 Page 都有 一個 Frame 屬性，提供所屬於之 Frame 實例 Page 的參考（如果有的話）。 這就是 Frame 您在這裡呼叫 Navigate 方法的 。 方法 Navigate 會採用您要巡覽的頁面 類型 。 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附註時，會選取該附注，但不會發生任何動作。 大部分集合控件的預設行為是 單一選取專案，這表示一次選取一個專案。 您將更新 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 用做為第二個導覽參數的 。

    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 頁面的模型。 如果不是 nullNote，請像之前一樣建立新的 Note 。

返回導航

最後，您必須更新應用程式，以便從個別筆記巡覽回所有筆記頁面。

WinUI TitleBar 控件包含一個返回按鈕，符合放置和外觀的所有 Fluent Design 指導方針。 您將使用此內建按鈕進行返回流覽。

  1. 開啟 MainWindow.xaml。

  2. 使用系結至 TitleBar 屬性的 IsBackButtonEnabled = True 和 IsBackButtonEnabled 更新 的 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 方法，即可巡覽回先前的頁面。 最好先檢查 CanGoBack 屬性，再呼叫 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呼叫 MainWindowrootFrame.GoBack。 這是因為 Page 類別具有 Frame 屬性，可取得 Frame 裝載 Page的 ，如果有的話。 在此情況下，它會取得的 rootFrame參考。

現在您可以執行您的應用程式。 請嘗試新增筆記、在筆記之間來回巡覽，以及刪除筆記。

在檔中深入瞭解：

後續步驟

祝賀！ 您已完成 建立 WinUI 應用程式 教學課程！

下列連結提供使用 WinUI 和 Windows App SDK 建立應用程式的詳細資訊：

  • Last updated on