다음을 통해 공유

.NET MAUI 셸 탭

샘플을 찾아봅니다. 샘플 찾아보기

.NET 다중 플랫폼 앱 UI(.NET MAUI) 셸에서 제공하는 탐색 환경은 플라이아웃 및 탭을 기반으로 합니다. 셸 앱의 최상위 탐색 수준은 앱의 탐색 요구 사항에 따라 플라이아웃 또는 아래쪽 탭 표시줄입니다. 앱의 탐색 환경이 아래쪽 탭으로 시작하는 경우 하위 클래스 개체의 자식은 Shell 아래쪽 탭 표시줄을 나타내는 개체여야 합니다 TabBar .

개체는 TabBar 하나 이상의 Tab 개체를 포함할 수 있으며, 각 Tab 개체는 아래쪽 탭 표시줄의 탭을 나타냅니다. 각 Tab 개체는 하나 이상의 ShellContent 개체를 포함할 수 있으며 각 ShellContent 개체는 단일 ContentPage개체를 표시합니다. Tab 객체에 ShellContent 객체가 두 개 이상 있는 경우, ContentPage 객체는 위쪽 탭을 통해 탐색할 수 있습니다. 탭 내에서 세부 정보 페이지라고 하는 다른 ContentPage 개체로 이동할 수 있습니다.

중요합니다

이 형식은 TabBar 플라이아웃을 사용하지 않도록 설정합니다.

팁 (조언)

여러 ShellContent 개체를 FlyoutItem 개체 또는 Tab 개체에 추가하여 플라이아웃으로 탭을 표시할 수 있습니다. 자세한 내용은 .NET MAUI Shell 플라이아웃을 참조하세요.

단일 페이지

Tab 개체를 TabBar 개체에 추가하여 단일 페이지 Shell 앱을 만들 수 있습니다. Tab 개체 내에서 ShellContent 개체를 ContentPage 개체로 설정해야 합니다.

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:views="clr-namespace:Xaminals.Views"
       x:Class="Xaminals.AppShell">
    <TabBar>
       <Tab>
           <ShellContent ContentTemplate="{DataTemplate views:CatsPage}" />
       </Tab>
    </TabBar>
</Shell>

이 예제에서는 다음 단일 페이지 앱이 생성됩니다.

Shell 단일 페이지 앱의 스크린샷.

셸에는 시각적 트리에 더 많은 보기를 도입하지 않고 셸 시각적 계층 구조를 간소화할 수 있는 암시적 변환 연산자가 있습니다. 서브클래스된 Shell 개체는 FlyoutItem 개체만을 포함할 수 있으며, 이는 TabBar 개체만 포함할 수 있고, 이는 Tab 개체만 포함할 수 있으며, 이는 ShellContent 개체만 포함할 수 있으므로 이 간소화가 가능합니다. 이러한 암시적 변환 연산자를 사용하여 이전 예제에서 개체를 Tab 제거할 수 있습니다.

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:views="clr-namespace:Xaminals.Views"
       x:Class="Xaminals.AppShell">
    <Tab>
        <ShellContent ContentTemplate="{DataTemplate views:CatsPage}" />
    </Tab>
</Shell>

이 암시적 변환은 ShellContent 개체를 Tab 개체로 래핑하고, 이를 다시 TabBar 개체로 래핑합니다.

중요합니다

셸 앱에서는 탐색에 대한 응답으로 요청 시 페이지가 만들어집니다. 마크업 확장을 사용하여 각 ContentTemplate 개체의 ShellContent 속성을 ContentPage 개체로 설정하여 이 작업을 수행합니다.

아래쪽 탭

단일 Tab 개체에 여러 TabBar 개체가 있는 경우 개체 Tab 는 아래쪽 탭으로 렌더링됩니다.

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:views="clr-namespace:Xaminals.Views"
       x:Class="Xaminals.AppShell">
    <TabBar>
       <Tab Title="Cats"
            Icon="cat.png">
           <ShellContent ContentTemplate="{DataTemplate views:CatsPage}" />
       </Tab>
       <Tab Title="Dogs"
            Icon="dog.png">
           <ShellContent ContentTemplate="{DataTemplate views:DogsPage}" />
       </Tab>
    </TabBar>
</Shell>

형식Title의 속성은 string 탭 제목을 정의합니다. 형식Icon의 속성은 ImageSource 탭 아이콘을 정의합니다.

아래쪽 탭이 있는 셸 두 페이지 앱의 스크린샷.

탭에 5개가 넘는 탭이 있는 경우 다른 탭에 TabBar액세스하는 데 사용할 수 있는 추가 탭이 나타납니다.

자세히 탭이 있는 셸 앱의 스크린샷.

또한 셸의 암시적 변환 연산자를 사용하여 이전 예제에서 ShellContent 개체와 Tab 개체를 제거할 수 있습니다.

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:views="clr-namespace:Xaminals.Views"
       x:Class="Xaminals.AppShell">
    <TabBar>
       <ShellContent Title="Cats"
                     Icon="cat.png"
                     ContentTemplate="{DataTemplate views:CatsPage}" />
       <ShellContent Title="Dogs"
                     Icon="dog.png"
                     ContentTemplate="{DataTemplate views:DogsPage}" />
    </TabBar>
</Shell>

이 암시적 변환은 각 ShellContent 개체를 Tab 개체로 자동으로 래핑합니다.

중요합니다

셸 앱에서는 탐색에 대한 응답으로 요청 시 페이지가 만들어집니다. 이 작업은 DataTemplate 마크업 확장을 사용하여 각 ShellContent 개체의 ContentTemplate 속성을 ContentPage 개체로 설정함으로써 수행됩니다.

아래쪽 및 위쪽 탭

ShellContent 개체가 여러 개 있는 Tab 개체에서는 ContentPage 개체들을 탐색할 수 있는 위쪽 탭 표시줄이 맨 아래 탭에 추가됩니다.

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:views="clr-namespace:Xaminals.Views"
       x:Class="Xaminals.AppShell">
    <TabBar>
       <Tab Title="Domestic"
            Icon="paw.png">
           <ShellContent Title="Cats"
                         ContentTemplate="{DataTemplate views:CatsPage}" />
           <ShellContent Title="Dogs"
                         ContentTemplate="{DataTemplate views:DogsPage}" />
       </Tab>
       <Tab Title="Monkeys"
            Icon="monkey.png">
           <ShellContent ContentTemplate="{DataTemplate views:MonkeysPage}" />
       </Tab>
    </TabBar>
</Shell>

이 코드는 다음 스크린샷에 표시된 레이아웃을 생성합니다.

위쪽 및 아래쪽 탭이 있는 Shell 두 페이지 앱의 스크린샷

또한 셸의 암시적 변환 연산자를 사용하여 이전 예제에서 두 번째 Tab 개체를 제거할 수 있습니다.

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:views="clr-namespace:Xaminals.Views"
       x:Class="Xaminals.AppShell">
    <TabBar>
       <Tab Title="Domestic"
            Icon="paw.png">
           <ShellContent Title="Cats"
                         Icon="cat.png"
                         ContentTemplate="{DataTemplate views:CatsPage}" />
           <ShellContent Title="Dogs"
                         Icon="dog.png"
                         ContentTemplate="{DataTemplate views:DogsPage}" />
       </Tab>
       <ShellContent Title="Monkeys"
                     Icon="monkey.png"
                     ContentTemplate="{DataTemplate views:MonkeysPage}" />
    </TabBar>
</Shell>

이 암시적 변환은 세 번째 ShellContent 개체를 Tab 개체로 자동 래핑합니다.

탭 모양

이 클래스는 Shell 탭의 모양을 제어하는 다음과 같은 연결된 속성을 정의합니다.

  • TabBarBackgroundColor탭 표시줄의 배경색을 정의하는 형식 Color의 입니다. 속성이 설정되지 않은 경우 BackgroundColor 속성 값이 사용됩니다.
  • TabBarDisabledColor탭 표시줄의 비활성화된 색을 정의하는 형식 Color의 입니다. 속성이 설정 DisabledColor 되지 않은 경우 속성 값이 사용됩니다.
  • TabBarForegroundColor탭 표시줄의 전경색을 정의하는 형식 Color의 입니다. 속성이 설정되지 않은 경우, ForegroundColor 속성 값이 사용됩니다.
  • TabBarTitleColor탭 표시줄의 제목 색을 정의하는 형식 Color의 입니다. 속성이 설정되지 않은 경우, TitleColor 속성 값이 사용됩니다.
  • TabBarUnselectedColor탭 표시줄의 선택되지 않은 색을 정의하는 형식 Color의 입니다. 속성이 UnselectedColor 설정되지 않은 경우 해당 속성 값이 사용됩니다.

이러한 모든 속성은 개체에 의해 BindableProperty 지원됩니다. 즉, 속성은 데이터 바인딩의 대상이 될 수 있으며 스타일이 지정됩니다.

탭의 색에 가장 영향을 주는 세 가지 속성은 다음과 TabBarForegroundColorTabBarTitleColor같습니다TabBarUnselectedColor.

  • 속성만 TabBarTitleColor 설정된 경우 해당 값은 선택한 탭의 제목과 아이콘에 색을 지정하는 데 사용됩니다. 설정되지 않은 경우 TabBarTitleColor 제목 색이 속성 값과 일치합니다 TabBarForegroundColor .
  • 속성이 TabBarForegroundColor 설정되어 있고 속성이 TabBarUnselectedColor 설정되지 않은 경우 속성 값이 선택된 탭의 TabBarForegroundColor 제목과 아이콘에 색을 지정하는 데 사용됩니다.
  • 속성만 TabBarUnselectedColor 설정된 경우 해당 값은 선택되지 않은 탭의 제목과 아이콘에 색을 지정하는 데 사용됩니다.

다음은 그 예입니다.

  • 선택한 탭의 제목과 아이콘은 TabBarTitleColor 속성이 Green로 설정될 때 녹색으로 표시되며, 선택되지 않은 탭은 시스템 색상과 일치합니다.
  • TabBarForegroundColor 속성이 Blue로 설정되면 선택된 탭의 제목과 아이콘은 파란색으로 표시되고, 선택되지 않은 탭은 시스템 색상과 일치합니다.
  • 속성 TabBarTitleColor이 Green로 설정되고 속성 TabBarForegroundColor가 Blue로 설정된 경우, 선택된 탭의 제목은 녹색이고 아이콘은 파란색입니다. 선택되지 않은 탭은 시스템 색깔과 일치합니다.
  • TabBarTitleColor 속성이 Green로 설정되고 Shell.ForegroundColor 속성이 Blue로 설정된 경우, 선택된 탭의 제목은 녹색이고 아이콘은 파란색이 되며, 선택되지 않은 탭은 시스템 색상과 일치합니다. Shell.ForegroundColor 속성 값이 TabBarForegroundColor 속성으로 전파되기 때문에 이 문제가 발생합니다.
  • TabBarTitleColor 속성이 Green으로 설정되고, TabBarForegroundColor 속성이 Blue으로 설정되며, TabBarUnselectedColor 속성이 Red으로 설정되면 선택된 탭의 제목은 녹색이고 아이콘은 파란색이며, 선택되지 않은 탭의 제목과 아이콘은 빨간색입니다.

다음 예제에서는 다른 탭 표시줄 색 속성을 설정하는 XAML 스타일을 보여 주는 예제입니다.

<Style TargetType="TabBar">
    <Setter Property="Shell.TabBarBackgroundColor"
            Value="CornflowerBlue" />
    <Setter Property="Shell.TabBarTitleColor"
            Value="Black" />
    <Setter Property="Shell.TabBarUnselectedColor"
            Value="AntiqueWhite" />
</Style>

또한 CSS(Cascading Style Sheets)를 사용하여 탭의 스타일을 지정할 수도 있습니다. 자세한 내용은 .NET MAUI Shell 특정 속성을 참조하세요.

탭 선택

탭 막대를 사용하는 Shell 앱이 처음 실행될 때, Shell.CurrentItem 속성은 서브클래스된 Shell 개체의 첫 번째 Tab 개체로 설정됩니다. 그러나 다음 예제와 같이 속성을 다른 Tab속성으로 설정할 수 있습니다.

<Shell ...
       CurrentItem="{x:Reference dogsItem}">
    <TabBar>
        <ShellContent Title="Cats"
                      Icon="cat.png"
                      ContentTemplate="{DataTemplate views:CatsPage}" />
        <ShellContent x:Name="dogsItem"
                      Title="Dogs"
                      Icon="dog.png"
                      ContentTemplate="{DataTemplate views:DogsPage}" />
    </TabBar>
</Shell>

다음 예는 `CurrentItem` 속성을 `ShellContent` 개체, 즉 `dogsItem`라는 이름을 가진 객체로 설정하여 이 개체가 선택되고 표시되는 결과를 보여줍니다. 이 예제에서는 암시적 변환을 사용하여 각 ShellContent 개체를 Tab 개체로 래핑합니다.

ShellContent라는 객체에 대해 dogsItem로 명명된 해당 C# 코드는 다음과 같습니다.

CurrentItem = dogsItem;

이 예제에서 CurrentItem 속성은 서브클래스 클래스에 설정됩니다 Shell . CurrentItem 속성은 Shell.Current 정적 속성을 통해 모든 클래스에서 설정할 수 있습니다.

Shell.Current.CurrentItem = dogsItem;

TabBar 및 Tab 표시 여부

탭 표시줄 및 탭은 기본적으로 Shell 앱에 표시됩니다. 그러나 탭 표시줄은 Shell.TabBarIsVisible 첨부 속성을 false로 설정하여 숨길 수 있습니다.

이 속성은 서브클래스된 Shell 개체에서 설정할 수 있지만 일반적으로 탭 표시줄을 보이지 않게 하려는 개체 ShellContent 에 ContentPage 설정됩니다.

<TabBar>
   <Tab Title="Domestic"
        Icon="paw.png">
       <ShellContent Title="Cats"
                     ContentTemplate="{DataTemplate views:CatsPage}" />
       <ShellContent Shell.TabBarIsVisible="false"
                     Title="Dogs"
                     ContentTemplate="{DataTemplate views:DogsPage}" />
   </Tab>
   <Tab Title="Monkeys"
        Icon="monkey.png">
       <ShellContent ContentTemplate="{DataTemplate views:MonkeysPage}" />
   </Tab>
</TabBar>

이 예제에서는 상위 개 탭을 선택하면 탭 표시줄이 숨겨집니다.

또한 Tab 개체를 숨기려면 IsVisible 바인딩 가능한 속성을 false로 설정할 수 있습니다.

<TabBar>
    <ShellContent Title="Cats"
                  Icon="cat.png"
                  ContentTemplate="{DataTemplate views:CatsPage}" />
    <ShellContent Title="Dogs"
                  Icon="dog.png"
                  ContentTemplate="{DataTemplate views:DogsPage}"
                  IsVisible="False" />
    <ShellContent Title="Monkeys"
                  Icon="monkey.png"
                  ContentTemplate="{DataTemplate views:MonkeysPage}" />
</TabBar>

이 예제에서는 두 번째 탭이 숨겨집니다.

  • Last updated on