탐색 스택의 페이지에서 탭 페이지 사용

5분

플라이아웃 및 탭 탐색은 사용자가 앱에서 제공하는 데이터를 탐색할 수 있도록 하는 두 가지 방법일 뿐입니다. 또 다른 기술은 스택 탐색을 사용하는 것입니다. 각 탐색 유형은 페이지 간의 다양한 관계 유형에 적합합니다.

스택 탐색은 플라이아웃 및 탭과 함께 사용할 수 있습니다. 이 단원에서는 탭 및 플라이아웃 탐색과 스택 탐색 간의 차이점을 간략하게 검토하고 두 기술을 결합한 앱을 빌드하는 방법을 알아봅니다.

플라이아웃 및 탭 탐색은 사용자가 한 번에 볼 페이지를 선택할 수 있도록 하는 유용한 메커니즘을 제공합니다. 사용자는 간단히 적절한 탭 또는 플라이아웃 항목을 선택하여 페이지로 이동합니다. 이 탐색 유형은 서로 피어 관계가 있는 데이터 항목에 유용합니다. 천문학 앱에서 태양, 달 및 정보 페이지는 모두 피어이며, 서로 간에 직접적인 관계가 없습니다.

그러나 계층적 데이터의 경우 스택 탐색이 더 적합할 수도 있습니다. 스택 탐색을 사용하면 사용자가 일련의 페이지를 드릴다운할 수 있습니다. 여기서 스택의 다음 페이지는 이전 페이지에서 선택한 항목에 대한 자세한 보기를 제공합니다.

다음 시나리오를 고려하세요.

천체를 표시하는 새 페이지를 천문학 앱에 추가합니다. 사용자가 천체 개체 중 하나를 탭한 다음, 해당 개체에 대한 정보를 표시할 수 있도록 합니다. 천체를 나열하는 페이지는 달 위상과 일출 페이지의 형제로 탭 페이지에 표시되는 것이 가장 좋습니다. 천체에 대한 자세한 정보는 스택 탐색을 사용하여 일련의 단계로 더 잘 표시됩니다. 또한 이 메커니즘을 사용하면 사용자가 뒤로 단추를 탭하여 기본 천체 페이지로 돌아갈 수도 있습니다.

.NET MAUI(Multi-platform App UI) 셸에는 설정된 탐색 계층 구조를 따르지 않고도 경로를 사용하여 앱의 모든 페이지로 이동하는 URI 기반 탐색 환경이 포함되어 있습니다. 게다가 탐색 스택의 모든 페이지를 방문하지 않고도 뒤로 탐색할 수 있는 기능을 제공합니다.

Shell 클래스에서 정의하는 탐색 관련 속성은 다음과 같습니다.

BackButtonBehavior 형식의 BackButtonBehavior - [뒤로] 단추의 동작을 정의하는 연결된 속성입니다.
ShellItem 형식의 CurrentItem - 현재 선택된 항목입니다.
Page 형식의 CurrentPage - 현재 표시된 페이지입니다.
ShellNavigationState 형식의 CurrentState - Shell의 현재 탐색 상태입니다.
Shell 형식의 Current - Application.Current.MainPage의 형식 캐스팅된 별칭입니다.

Shell 클래스에서 GoToAsync 메서드를 호출하여 탐색을 수행합니다.

경로

탐색은 탐색할 URI를 지정하여 Shell 앱에서 수행됩니다. 탐색 URI에는 세 가지 구성 요소가 포함될 수 있습니다.

경로 - 셸 시각적 계층 구조의 일부로 존재하는 콘텐츠의 경로를 정의합니다.
페이지. Shell 시각적 계층 구조에 없는 페이지는 Shell 앱 내의 어디에서나 탐색 스택으로 푸시할 수 있습니다. 예를 들어 세부 정보 페이지는 Shell 시각적 계층 구조에서 정의되지 않지만, 필요에 따라 탐색 스택에 푸시할 수 있습니다.
하나 이상의 쿼리 매개 변수. 쿼리 매개 변수는 탐색하는 동안 대상 페이지에 전달할 수 있는 매개 변수입니다.

탐색 URI에 세 가지 구성 요소가 모두 포함되는 경우 구조체는 //route/page?queryParameters입니다.

경로 등록

경로는 Route 속성을 통해 해당 FlyoutItem, TabBar, Tab 및 ShellContent 개체에 정의할 수 있습니다.

<Shell ...>
    <FlyoutItem ... 
        Route = "astronomy">
        <ShellContent ...
            Route="moonphase" />
        <ShellContent ...
            Route="sunrise" />
    </FlyoutItem>
    <FlyoutItem>
        <ShellContent ...
            Route="about" />
    </FlyoutItem>
</Shell>

moonphase 경로로 이동하기 위한 절대 경로 URI는 //astronomy/moonphase입니다.

세부 정보 경로 등록

Shell 하위 클래스 생성자 또는 경로가 호출되기 전에 실행되는 기타 다른 위치에서 셸 시각적 계층 구조에서 표시되지 않는 세부 정보 페이지에 대해 Routing.RegisterRoute 메서드를 사용하여 경로를 명시적으로 등록할 수 있습니다.

Routing.RegisterRoute("astronomicalbodydetails", typeof(AstronomicalBodyPage));

AstronomicalBodyPage(으)로 이동하려면 다음을 호출합니다.

await Shell.Current.GoToAsync("astronomicalbodydetails");`

뒤로 탐색은 GoToAsync 메서드의 인수로 ".."를 지정하여 수행할 수 있습니다.

await Shell.Current.GoToAsync("..");

데이터 전달

URI 기반 프로그래밍 방식 탐색을 수행하는 경우 기본 데이터를 문자열 기반 쿼리 매개 변수로 전달할 수 있습니다. 경로 뒤에 ?을(를) 추가하여 데이터를 전달하고, 쿼리 매개 변수 ID, = 및 값을 전달합니다.

string celestialName = "moon";

await Shell.Current.GoToAsync($"astronomicalbodydetails?bodyName={celestialName}");

이 예제에서 경로는 astronomicalbodydetails이고, 매개 변수는 bodyName이며, 값은 celestialName 변수에서 가져옵니다.

데이터 검색

탐색 데이터는 각 문자열 기반 쿼리 매개 변수 및 개체 기반 탐색 매개 변수에 대해 받는 클래스를 QueryPropertyAttribute로 데코레이팅하여 받을 수 있습니다.

[QueryProperty(nameof(AstroName), "bodyName")]
public partial class AstronomicalBodyPage : ContentPage
{
    string astroName;
    public string AstroName
    {
        get => astroName;
        set
        {
            astroName = value;
        }
    }

    ...
}

이 예에서 QueryPropertyAttribute의 첫 번째 인수는 데이터를 받는 속성의 이름을 지정하고, 두 번째 인수는 매개 변수 ID를 지정합니다.

탐색 스택의 페이지에서 탭 페이지 사용

플라이아웃 및 탭 탐색 검토

스택 탐색을 사용하여 탐색

경로

경로 등록

세부 정보 경로 등록

뒤로 탐색

데이터 전달

데이터 검색

지식 확인

피드백