.NET MAUI의 페이지 탐색: 개요

일반적인 애플리케이션에는 사용자가 필요에 따라 페이지를 앞뒤로 탐색할 수 있는 계층적 탐색 환경이 필요합니다.

.NET MAUI 플랫폼은 앱에 대한 두 가지 기본 페이지 탐색 형식을 제공합니다.

쉘.

FlyoutPage, TabbedPage 및 NavigationPage와 같은 기본 탐색 페이지입니다.

이 블로그에서는 .NET MAUI 애플리케이션의 페이지 탐색을 코드 예제와 통합하는 방법을 살펴보겠습니다.

Shell을 통한 페이지 탐색

.NET MAUI 모바일 앱에서 페이지 탐색 환경을 제공하려면 셸 페이지 탐색이 권장됩니다.

Shell은 페이지를 호스팅하고 탐색을 위한 플라이아웃 및 탭 메뉴를 제공하는 UI 컨트롤입니다. 셸 페이지 탐색은 URL을 기반으로 수행할 수도 있습니다. 콘텐츠 템플릿을 함께 사용하여 코드를 효율적으로 만들 수 있습니다.

셸 템플릿은 새 .NET MAUI 프로젝트에서 단일 페이지가 기본 페이지로 추가된 AppShell.Xaml 파일로 사용할 수 있습니다. 이 템플릿을 사용하려면:

Create a simple .NET MAUI app . 기본적으로 쉘 템플릿으로 생성됩니다.

그런 다음 필요한 페이지를 만듭니다. 여기서는 Add.Xaml 및 Edit.Xaml이라는 두 개의 추가 페이지를 만듭니다.

MainPage**가 이미 셸 콘텐츠로 추가된 AppShell.** Xaml 파일을 엽니다. 필요한 페이지를 콘텐츠로 추가합니다.
다음 코드 예제를 참조하십시오.

<Shell
    x:Class="ShellPageNavigation.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:ShellPageNavigation"
    Shell.FlyoutBehavior="Diabled">

  <ShellContent
      Title="Home"
      ContentTemplate="{DataTemplate local:MainPage}"
      Route="MainPage" />

  <ShellContent
      Title="Add"
      ContentTemplate="{DataTemplate local:AddPage}"
      Route="AddPage" />

  <ShellContent
      Title="Edit"
      ContentTemplate="{DataTemplate local:EditPage}"
      Route="EditPage" />

</Shell>

기본적으로 FlyoutBehavior는 비활성화되어 있습니다. Flyout 값으로 활성화할 수 있습니다.
다음 코드를 참조하십시오.

<Shell
   x:Class="ShellPageNavigation.AppShell"
   xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
   xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
   xmlns:local="clr-namespace:ShellPageNavigation"
   Shell.FlyoutBehavior="Flyout">

  <ShellContent
     Title="Home"
     ContentTemplate="{DataTemplate local:MainPage}"
     Route="MainPage" />

  <ShellContent
     Title="Add"
     ContentTemplate="{DataTemplate local:AddPage}"
     Route="AddPage" />

  <ShellContent
     Title="Edit"
     ContentTemplate="{DataTemplate local:EditPage}"
     Route="EditPage" />

</Shell>

셸을 사용하는 .NET MAUI 앱의 페이지 탐색

참고: 자세한 내용은 .NET MAUI Shell flyout 및 Shell tabs 설명서를 확인하십시오.

기본 탐색 페이지를 통한 페이지 탐색

기본 탐색 페이지는 .NET MAUI 앱에서 페이지 탐색을 수행하는 또 다른 방법입니다. FlyoutPage , TabbedPage 및 NavigationPage 와 같은 페이지를 지원합니다. 푸시 및 팝 작업을 통해 탐색을 수행할 수 있습니다.

이 페이지들을 간단히 살펴보겠습니다!

탭 페이지

.NET MAUI TabbedPage에는 탭이 포함되어 있으며 각 탭은 세부 정보 영역에 콘텐츠를 로드합니다.

다음 코드 예제를 참조하십시오.

<TabbedPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:ShellPageNavigation"
            x:Class="ShellPageNavigation.TabbedPageNavigation">
  <local:MainPage Title="Home"/>
  <local:AddPage Title="Add"/>
  <local:EditPage Title="Edit"/>
</TabbedPage>

TabbedPage를 사용하는 .NET MAUI 앱의 페이지 탐색

플라이아웃 페이지

.NET MAUI FlyoutPage에는 항목을 표시하기 위한 플라이아웃이라는 오버레이 페이지가 있는 세부 정보 페이지가 포함되어 있습니다. 세부 정보 페이지는 플라이아웃에서 선택한 페이지의 콘텐츠를 로드합니다.

다음 코드 예제를 참조하십시오.

<FlyoutPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:ShellPageNavigation"
            x:Class="ShellPageNavigation.FlyoutPageNavigation">
 <FlyoutPage.Flyout>
  <local:FlyMenuPage x:Name="flyoutMenu"/>
 </FlyoutPage.Flyout>
 <FlyoutPage.Detail>
  <NavigationPage>
   <x:Arguments>
    <local:MainPage/>
   </x:Arguments>
  </NavigationPage>
 </FlyoutPage.Detail>
</FlyoutPage>

NavigationPage

.NET MAUI NavigationPage는 페이지를 쌓는 데 사용되며 푸시 및 팝 동작으로 필요한 페이지로 쉽게 이동할 수 있습니다.

푸시 페이지

NavigationPage의 PushAsync 메서드는 탐색 스택에서 페이지를 푸시합니다.

다음 코드를 참조하십시오.

await Navigation.PushAsync(new DetailsPage());

팝 페이지

NavigationPage의 PopAsync 메서드는 탐색 스택에서 페이지를 팝합니다. 또한 장치에서 뒤로 버튼을 눌러 현재 페이지를 표시할 수 있습니다.

프로그래밍 방식으로 페이지를 팝하려면 다음 코드를 참조하십시오.

await Navigation.PopAsync();

GitHub 참조

page navigation in the .NET MAUI application on GitHub 의 완전한 예를 확인하십시오.

결론

읽어 주셔서 감사합니다. .NET MAUI 응용 프로그램에서 페이지 탐색에 대한 기본적인 아이디어를 얻었기를 바랍니다. Syncfusion.NET MAUI 컨트롤도 이러한 탐색 페이지와 호환됩니다. 사용해 보시고 아래 댓글 섹션에 피드백을 남겨주세요!

또한 support forum , support portal 또는 feedback portal 을 통해 문의하실 수 있습니다. 기꺼이 도와드리겠습니다!

관련 블로그