NET MAUI - XAML tab navigation

Tab Navigation 이란 화면 상단이나 하단에 고정되어 항상 나타나는 메뉴 같은 화면을 말한다. 

4개 이상의 Tab 이 필요하다면 flyout navigation 을 이용하도록 하자.

 

 

MAUI 에서는 Shell 에서 TabBar 를 통해 구현 가능 하다. 아래 그림을 보자

코드로 보면 아래 와 같이 구현 가능 하다

<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="Moon Phase"
            Icon="moon.png">
           <ShellContent ContentTemplate="{DataTemplate local:MoonPhasePage}" />
       </Tab>
       <Tab Title="Sunrise"
            Icon="sun.png">
           <ShellContent ContentTemplate="{DataTemplate local:SunrisePage}" />
       </Tab>
    </TabBar>
</Shell>

Flyout menu 와 함께 Tab 사용

 

플라이아웃 항목은 하나 이상의 탭을 표시하는 탭 표시줄이 있는 페이지를 열 수 있다. 
이것을 구현하는 것은 비교적 간단하다. 

<FlyoutItem> 내에서 표시하려는 각 탭에 대해 여러 <ShellContent> 항목을 추가한다.
<ShellContent>에 Title과 Icon을 설정하여 탭의 제목과 아이콘을 제어한다.

<FlyoutItem Title="Astronomy" Icon="moon.png">
    <ShellContent Title="Moon Phase" Icon="moon.png"
        ContentTemplate="{DataTemplate local:MoonPhasePage}"/>

    <ShellContent Title="Sunrise" Icon="sun.png"
        ContentTemplate="{DataTemplate local:SunrisePage}"/>
</FlyoutItem>

<FlyoutItem Title="About" Icon="question.png">
    <ShellContent
        ContentTemplate="{DataTemplate local:AboutPage}"/>
</FlyoutItem>

예제를 따라해보며 내용을 수정해 보자

이전 예제에서 만들어 두었던 MoonPhase  와 Sunrise 를 이용하자

 

AppShell.xaml 을 열고 내용을 다 지운 후 아래 내역을 입력하자

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="MauiApp1.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:MauiApp1"
    xmlns:localFlyoutNavigation="clr-namespace:MauiApp1.Xaml.FlyoutNavigation.Pages"
    FlyoutIcon="moon.png">

    <TabBar>
        <Tab>

        </Tab>
    </TabBar>

</Shell>

TabBar 의 Tab 안에 ShellContent 를  추가 하자. (MoonPhase 에 해당하는 MainPage 를 넣는다.)

<TabBar>
    <Tab>
        <ShellContent ContentTemplate="{DataTemplate localFlyoutNavigation:MainPage}" />
    </Tab>
</TabBar>

Tab 에 Title 과 Icon 을 넣자

<Tab Title="Moon Phase" Icon="moon.png">

같은 방식으로 SunrisePage 도 추가 하고 Title(Sunrise) 과 Icon(sun.png)도 넣자

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="MauiApp1.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:MauiApp1"
    xmlns:localFlyoutNavigation="clr-namespace:MauiApp1.Xaml.FlyoutNavigation.Pages"
    FlyoutIcon="moon.png">

    <TabBar>
        <Tab Title="Moon Phase" Icon="moon.png">
            <ShellContent ContentTemplate="{DataTemplate localFlyoutNavigation:MainPage}" />
        </Tab>
        <Tab Title="Sunrise" Icon="sun.png">
            <ShellContent ContentTemplate="{DataTemplate localFlyoutNavigation:SunrisePage}"/>
        </Tab>
    </TabBar>

</Shell>

실행

 

또한 flyout navigation 과 함께 사용할 수도 있다. 

 

다음과 같이 소스를 수정해 보자

...
<FlyoutItem Title="Moon Phase" Icon="moon.png">
    <ShellContent
    Title="Moon"  Icon="moon.png"
    ContentTemplate="{DataTemplate localFlyoutNavigation:MainPage}"
    Route="MainPage" />
    <ShellContent
    Title="Sun" Icon="sun.png"
    ContentTemplate="{DataTemplate localFlyoutNavigation:SunrisePage}"
    Route="SunrisePage" />
</FlyoutItem>

<FlyoutItem Title="About" Icon="question.png">
    <ShellContent
    ContentTemplate="{DataTemplate localFlyoutNavigation:AboutPage}"
    Route="AboutPage" />
</FlyoutItem>
...

실행

 

관련영상

https://youtu.be/lQ7rpabXdPk