페이지 간 이동

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

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

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

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

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

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

새 참고 사항

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

팁 (조언)

GitHub 리포지토리에서 이 자습서의 코드를 다운로드하거나 볼 수 있습니다. 이 단계에서 코드를 보려면 다음 커밋을 참조하세요 . 탐색 - 새 참고 사항.

AllNotesPage.xaml에서 새 노트를 AppBarButton 찾습니다.
Click 이벤트 처리기를 추가하고 이름을 바꿉니다NewNoteButton_Click. (이 작업을 수행하는 방법을 미리 알림이 필요한 경우 메모 페이지 단계에서 이벤트 처리기 추가 를 참조하세요.)
```
<AppBarButton Icon="Add" Label="New note"
              Click="NewNoteButton_Click"/>
```

메서드(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 아직 메모 페이지에 만들어지지 않았기 때문입니다. 이제 그렇게 할 것입니다.

NotePage.xaml.cs 엽니다.

페이지의 OnNavigatedTo 메서드를 재정의하는 코드를 추가합니다.

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

    noteModel = new Note();
}

이제 탐색할 NotePage때 모델의 새 인스턴스가 Note 만들어집니다.

기존 노트

이제 기존 노트에 대한 탐색을 추가합니다. 현재 노트를 클릭하면 메모 ItemsView가 선택되지만 아무 작업도 수행되지 않습니다. 대부분의 컬렉션 컨트롤에 대한 기본 동작은 단일 선택입니다. 즉, 한 번에 하나의 항목이 선택됩니다. 단추를 선택하는 대신 단추와 같은 항목을 클릭할 수 있도록 업데이트 ItemsView 합니다.

팁 (조언)

GitHub 리포지토리에서 이 자습서의 코드를 다운로드하거나 볼 수 있습니다. 이 단계에서 코드를 보려면 다음 커밋을 참조하세요 . 탐색 - 최종 앱.

AllNotesPage.xaml을 엽니다.
ItemsView = 및 IsItemInvokedEnabled = 에 대한 True XAML을 업데이트합니다.

ItemInvoked 이벤트에 대한 처리기를 추가합니다.

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

AllNotesPage.xaml.cs 메서드를 찾습니다ItemsView_ItemInvoked. (코드를 복사하여 붙여넣을 때 발생할 수 있는 Visual Studio에서 만들지 않은 경우 다음 단계에서 추가합니다.)
메서드에서 ItemsView_ItemInvoked 탐색할 코드를 추가합니다 NotePage. 이번에는 개체를 다른 페이지로 전달할 수 있는 Navigate 메서드의 오버로드를 사용합니다. 호출된 Note 매개 변수를 두 번째 탐색 매개 변수로 전달합니다.
```
private void ItemsView_ItemInvoked(ItemsView sender, ItemsViewItemInvokedEventArgs args)
{
    Frame.Navigate(typeof(NotePage), args.InvokedItem);
}
```
NotePage.xaml.cs 엽니다.
호출에 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 디자인 지침을 충족하는 뒤로 단추가 포함되어 있습니다. 이 기본 제공 단추를 뒤로 탐색에 사용합니다.

MainWindow.xaml을 엽니다.
TitleBar 속성에 바인딩된 = True 및 IsBackButtonEnabled에 대한 XAML을 업데이트합니다.
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 이벤트 처리기가 추가됩니다. 여기서 다시 탐색할 코드를 배치합니다.
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 업데이트해야 합니다.

NotePage.xaml.cs 엽니다.

메모가 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 속성(Frame있는 경우)이 있기 때문입니다Page. 이 경우 에 대한 참조 rootFrame를 가져옵니다.

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

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

다음 단계

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

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

피드백

이 페이지가 도움이 되었나요?

Last updated on 2025-09-03

다음을 통해 공유

페이지 간 이동

새 참고 사항

기존 노트

뒤로 가기

다음 단계

피드백

추가 리소스