페이지 간 이동

자습서의 이 부분에서는 앱에 마지막 부분을 추가하고 모든 노트 페이지와 개별 노트 페이지 간 탐색을 추가합니다.

앱 내 탐색을 처리하는 코드를 작성하기 전에 예상되는 탐색 동작을 설명해 보겠습니다.

기존 AllNotesPage노트의 컬렉션과 새 메모 단추가 있습니다.

• 기존 노트를 클릭하면 메모 페이지로 이동하고 클릭한 메모를 로드해야 합니다.
• 새 메모 단추를 클릭하면 메모 페이지로 이동하여 저장되지 않은 빈 메모를 로드해야 합니다.

메모 페이지에서 뒤로 단추를 추가하고 저장 및 삭제 단추가 있습니다.

• 뒤로 단추를 클릭하면 모든 노트 페이지로 다시 이동하여 메모에 대한 변경 내용을 삭제합니다.
• 삭제 단추를 클릭하면 메모가 삭제된 다음 다시 탐색합니다.

새 참고 사항

먼저 새 노트에 대한 탐색을 처리합니다.

1. AllNotesPage.xaml에서 새 노트를 AppBarButton 찾습니다.

2. Click 이벤트 처리기를 추가하고 이름을 바꿉니다NewNoteButton_Click. (이 작업을 수행하는 방법을 미리 알림이 필요한 경우 메모 페이지 단계에서 이벤트 처리기 추가 를 참조하세요.)

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

3. 메서드(NewNoteButton_ClickAllNotesPage.xaml.cs)에서 다음 코드를 추가합니다.

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

각 페이지에 는 속한 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 합니다.

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 합니다. null 그렇지 않은 Note경우 이전과 같이 새로 Note 만듭니다.

뒤로 가기

마지막으로 개별 노트에서 모든 노트 페이지로 다시 이동할 수 있도록 앱을 업데이트해야 합니다.

WinUI TitleBar 컨트롤에는 배치 및 모양에 대한 모든 Fluent 디자인 지침을 충족하는 뒤로 단추가 포함되어 있습니다. 이 기본 제공 단추를 뒤로 탐색에 사용합니다.

1. MainWindow.xaml을 엽니다.

2. TitleBar 속성에 바인딩된 = 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. ↑
   }
   

   클래스는 FrameBackStack에서 탐색을 추적하므로 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. ↑
   }
   

이제 앱을 실행할 수 있습니다. 새 노트를 추가하고, 노트 간을 탐색하고, 노트를 삭제해 보세요.

다음 문서에서 자세히 알아보세요.

• 두 페이지 간 탐색 구현
• 탐색 기록 및 뒤로 탐색
• Frame 클래스, Page 클래스

다음 단계

축하합니다! WinUI 앱 만들기 자습서를 완료했습니다.

다음 링크는 WinUI 및 Windows 앱 SDK를 사용하여 앱을 만드는 방법에 대한 자세한 정보를 제공합니다.

• 샘플 및 리소스
• Windows 앱용 디자인
• Windows 데스크톱 앱 개발
• Windows 앱에 대한 컨트롤