SHELL Archives - 2 중 2 번째 페이지

[C#/MAUI/.NET6] Shell 엘리먼트 : TabBarDisabledColor 속성을 사용해 탭바 비활성화 색상 설정하기

■ Shell 엘리먼트의 TabBarDisabledColor 속성을 사용해 탭바 비활성화 색상을 설정하는 방법을 보여준다. ▶ AppShell.xaml


<?xml version="1.0" encoding="utf-8" ?>
<Shell x:Class="TestProject.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TestProject"
    TabBarDisabledColor="Red">
    <TabBar>
        <Tab
            Icon="sample1.png"
            Title="Domestic">
            <ShellContent
                Title="고양이"
                ContentTemplate="{DataTemplate local:CatPage}" />
            <ShellContent
                Title="개"
                ContentTemplate="{DataTemplate local:DogPage}" />
        </Tab>
        <Tab
            Icon="sample2.png"
            Title="원숭이"
            IsEnabled="False">
            <ShellContent ContentTemplate="{DataTemplate local:MonkeyPage}" />
        </Tab>
    </TabBar>
</Shell>

<?xml version="1.0" encoding="utf-8" ?>

<Shell x:Class="TestProject.AppShell"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:TestProject"

TabBarDisabledColor="Red">

<Tab

Icon="sample1.png"

Title="Domestic">

<ShellContent

Title="고양이"

ContentTemplate="{DataTemplate local:CatPage}" />

<ShellContent

Title="개"

ContentTemplate="{DataTemplate local:DogPage}" />

</Tab>

<Tab

Icon="sample2.png"

Title="원숭이"

IsEnabled="False">

</Tab>

</TabBar>

</Shell>

TestProject.zip

[C#/MAUI/.NET6] Shell 엘리먼트 : TabBarBackgroundColor 속성을 사용해 탭바 배경색 설정하기

■ Shell 엘리먼트의 TabBarBackgroundColor 속성을 사용해 탭바 배경색을 설정하는 방법을 보여준다. ▶ AppShell.xaml


<?xml version="1.0" encoding="utf-8" ?>
<Shell x:Class="TestProject.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TestProject"
    TabBarBackgroundColor="Red">
    <TabBar>
        <Tab
            Icon="sample1.png"
            Title="Domestic">
            <ShellContent
                Title="고양이"
                ContentTemplate="{DataTemplate local:CatPage}" />
            <ShellContent
                Title="개"
                ContentTemplate="{DataTemplate local:DogPage}" />
        </Tab>
        <Tab
            Icon="sample2.png"
            Title="원숭이">
            <ShellContent ContentTemplate="{DataTemplate local:MonkeyPage}" />
        </Tab>
    </TabBar>
</Shell>

<?xml version="1.0" encoding="utf-8" ?>

<Shell x:Class="TestProject.AppShell"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:TestProject"

TabBarBackgroundColor="Red">

<Tab

Icon="sample1.png"

Title="Domestic">

<ShellContent

Title="고양이"

ContentTemplate="{DataTemplate local:CatPage}" />

<ShellContent

Title="개"

ContentTemplate="{DataTemplate local:DogPage}" />

</Tab>

<Tab

Icon="sample2.png"

Title="원숭이">

</Tab>

</TabBar>

</Shell>

TestProject.zip

[C#/MAUI/.NET6] TabBar 엘리먼트 사용하기

■ TabBar 엘리먼트를 사용하는 방법을 보여준다. ▶ AppShell.xaml


<?xml version="1.0" encoding="utf-8" ?>
<Shell x:Class="TestProject.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TestProject">
    <TabBar>
        <Tab
            Icon="sample1.png"
            Title="Domestic">
            <ShellContent
                Title="고양이"
                ContentTemplate="{DataTemplate local:CatPage}" />
            <ShellContent
                Title="개"
                ContentTemplate="{DataTemplate local:DogPage}" />
        </Tab>
        <Tab
            Icon="sample2.png"
            Title="원숭이">
            <ShellContent ContentTemplate="{DataTemplate local:MonkeyPage}" />
        </Tab>
    </TabBar>
</Shell>

<?xml version="1.0" encoding="utf-8" ?>

<Shell x:Class="TestProject.AppShell"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:TestProject">

<Tab

Icon="sample1.png"

Title="Domestic">

<ShellContent

Title="고양이"

ContentTemplate="{DataTemplate local:CatPage}" />

<ShellContent

Title="개"

ContentTemplate="{DataTemplate local:DogPage}" />

</Tab>

<Tab

Icon="sample2.png"

Title="원숭이">

</Tab>

</TabBar>

</Shell>

TestProject.zip

[C#/MAUI/.NET6] TabBar 엘리먼트 사용하기

■ TabBar 엘리먼트를 사용하는 방법을 보여준다. ▶ AppShell.xaml


<?xml version="1.0" encoding="utf-8" ?>
<Shell x:Class="TestProject.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TestProject">
    <TabBar>
        <Tab
            Icon="sample1.png"
            Title="고양이">
            <ShellContent ContentTemplate="{DataTemplate local:CatPage}" />
        </Tab>
        <Tab
            Icon="sample2.png"
            Title="개">
            <ShellContent ContentTemplate="{DataTemplate local:DogPage}" />
        </Tab>
    </TabBar>
</Shell>

<?xml version="1.0" encoding="utf-8" ?>

<Shell x:Class="TestProject.AppShell"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:TestProject">

<Tab

Icon="sample1.png"

Title="고양이">

</Tab>

<Tab

Icon="sample2.png"

Title="개">

</Tab>

</TabBar>

</Shell>

TestProject.zip

[C#/MAUI/.NET6] TabBar 엘리먼트 사용하기

■ TabBar 엘리먼트를 사용하는 방법을 보여준다. ▶ AppShell.xaml


<?xml version="1.0" encoding="utf-8" ?>
<Shell x:Class="TestProject.AppShell" x:Name="shell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TestProject">
    <TabBar>
        <Tab>
            <ShellContent ContentTemplate="{DataTemplate local:CatPage}" />
        </Tab>
    </TabBar>
</Shell>

<?xml version="1.0" encoding="utf-8" ?>

<Shell x:Class="TestProject.AppShell" x:Name="shell"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:TestProject">

<Tab>

</Tab>

</TabBar>

</Shell>

TestProject.zip

[C#/MAUI/.NET6] Shell 클래스 : FlyoutIsPresented 속성을 사용해 플라이아웃 표시하기

■ Shell 클래스의 FlyoutIsPresented 속성을 사용해 플라이아웃을 표시하는 방법을 보여준다. ▶ CatPage.xaml.cs


namespace TestProject;

/// <summary>
/// 고양이 페이지
/// </summary>
public partial class CatPage : ContentPage
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 생성자 - CatPage()

    /// <summary>
    /// 생성자
    /// </summary>
    public CatPage()
    {
        InitializeComponent();

        this.testButton.Clicked += testButton_Clicked;
    }

    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Method
    ////////////////////////////////////////////////////////////////////////////////////////// Private

    #region 테스트 버튼 클릭시 처리하기 - button_Clicked(sender, e)

    /// <summary>
    /// 테스트 버튼 클릭시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private void testButton_Clicked(object sender, EventArgs e)
    {
        Shell.Current.FlyoutIsPresented = true;
    }

    #endregion
}

namespace TestProject;

/// <summary>

/// 고양이 페이지

/// </summary>

public partial class CatPage : ContentPage

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - CatPage()

/// <summary>

/// 생성자

/// </summary>

public CatPage()

{

InitializeComponent();

this.testButton.Clicked += testButton_Clicked;

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Private

#region 테스트 버튼 클릭시 처리하기 - button_Clicked(sender, e)

/// <summary>

/// 테스트 버튼 클릭시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void testButton_Clicked(object sender, EventArgs e)

{

Shell.Current.FlyoutIsPresented = true;

}

#endregion

}

TestProject.zip

[C#/MAUI/.NET6] ShellContent 엘리먼트 : FlyoutItemIsVisible 속성을 사용해 플라이아웃 항목 숨기기

■ ShellContent 엘리먼트의 FlyoutItemIsVisible 속성을 사용해 플라이아웃 항목을 숨기는 방법을 보여준다. ▶ AppShell.xaml


<?xml version="1.0" encoding="utf-8" ?>
<Shell x:Class="TestProject.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TestProject">
    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <Tab
            Icon="sample1.png"
            Title="고양이/개">
            <ShellContent
                Icon="sample2.png"
                Title="고양이"
                ContentTemplate="{DataTemplate local:CatPage}" />
            <ShellContent
                Icon="sample3.png"
                Title="개"
                ContentTemplate="{DataTemplate local:DogPage}" />
        </Tab>
        <ShellContent
            Icon="sample1.png"
            Title="원숭이"
            FlyoutItemIsVisible="False"
            ContentTemplate="{DataTemplate local:MonkeyPage}" />
        <ShellContent
            Icon="sample2.png"
            Title="코끼리"
            ContentTemplate="{DataTemplate local:ElephantPage}" />
        <ShellContent
            Icon="sample3.png"
            Title="곰"
            ContentTemplate="{DataTemplate local:BearPage}" />
    </FlyoutItem>
    <ShellContent
        Icon="sample1.png"
        Title="정보"
        ContentTemplate="{DataTemplate local:AboutPage}" />
    <MenuItem x:Name="helpMenuItem"
        Text="도움말"
        IconImageSource="sample2.png" />
</Shell>

<?xml version="1.0" encoding="utf-8" ?>

<Shell x:Class="TestProject.AppShell"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:TestProject">

<Tab

Icon="sample1.png"

Title="고양이/개">

<ShellContent

Icon="sample2.png"

Title="고양이"

ContentTemplate="{DataTemplate local:CatPage}" />

<ShellContent

Icon="sample3.png"

Title="개"

ContentTemplate="{DataTemplate local:DogPage}" />

</Tab>

<ShellContent

Icon="sample1.png"

Title="원숭이"

FlyoutItemIsVisible="False"

ContentTemplate="{DataTemplate local:MonkeyPage}" />

<ShellContent

Icon="sample2.png"

Title="코끼리"

ContentTemplate="{DataTemplate local:ElephantPage}" />

<ShellContent

Icon="sample3.png"

Title="곰"

ContentTemplate="{DataTemplate local:BearPage}" />

</FlyoutItem>

<ShellContent

Icon="sample1.png"

Title="정보"

ContentTemplate="{DataTemplate local:AboutPage}" />

<MenuItem x:Name="helpMenuItem"

Text="도움말"

IconImageSource="sample2.png" />

</Shell>

TestProject.zip

[C#/MAUI/.NET6] Shell 클래스 : CurrentItem 속성을 사용해 플라이아웃 항목 선택하기

■ Shell 클래스의 CurrentItem 속성을 사용해 플라이아웃 항목을 선택하는 방법을 보여준다. ▶ AppShell.xaml


<?xml version="1.0" encoding="utf-8" ?>
<Shell x:Class="TestProject.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TestProject">
    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <Tab
            Icon="sample1.png"
            Title="고양이/개">
            <ShellContent
                Icon="sample2.png"
                Title="고양이"
                ContentTemplate="{DataTemplate local:CatPage}" />
            <ShellContent
                Icon="sample3.png"
                Title="개"
                ContentTemplate="{DataTemplate local:DogPage}" />
        </Tab>
        <ShellContent
            Icon="sample1.png"
            Title="원숭이"
            ContentTemplate="{DataTemplate local:MonkeyPage}" />
        <ShellContent
            Icon="sample2.png"
            Title="코끼리"
            ContentTemplate="{DataTemplate local:ElephantPage}" />
        <ShellContent
            Icon="sample3.png"
            Title="곰"
            ContentTemplate="{DataTemplate local:BearPage}" />
    </FlyoutItem>
    <ShellContent x:Name="aboutItem"
        Icon="sample1.png"
        Title="정보"
        ContentTemplate="{DataTemplate local:AboutPage}" />
    <MenuItem
        Text="도움말"
        IconImageSource="sample2.png" />
</Shell>

<?xml version="1.0" encoding="utf-8" ?>

<Shell x:Class="TestProject.AppShell"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:TestProject">

<Tab

Icon="sample1.png"

Title="고양이/개">

<ShellContent

Icon="sample2.png"

Title="고양이"

ContentTemplate="{DataTemplate local:CatPage}" />

<ShellContent

Icon="sample3.png"

Title="개"

ContentTemplate="{DataTemplate local:DogPage}" />

</Tab>

<ShellContent

Icon="sample1.png"

Title="원숭이"

ContentTemplate="{DataTemplate local:MonkeyPage}" />

<ShellContent

Icon="sample2.png"

Title="코끼리"

ContentTemplate="{DataTemplate local:ElephantPage}" />

<ShellContent

Icon="sample3.png"

Title="곰"

ContentTemplate="{DataTemplate local:BearPage}" />

</FlyoutItem>

<ShellContent x:Name="aboutItem"

Icon="sample1.png"

Title="정보"

ContentTemplate="{DataTemplate local:AboutPage}" />

<MenuItem

Text="도움말"

IconImageSource="sample2.png" />

</Shell>

▶ AppShell.xaml.cs


namespace TestProject;

/// <summary>
/// 앱 쉘
/// </summary>
public partial class AppShell : Shell
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 생성자 - AppShell()

    /// <summary>
    /// 생성자
    /// </summary>
    public AppShell()
    {
        InitializeComponent();

        Loaded += shell_Loaded;
    }

    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Method
    ////////////////////////////////////////////////////////////////////////////////////////// Private

    #region 셸 로드시 처리하기 - shell_Loaded(sender, e)

    /// <summary>
    /// 셸 로드시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private void shell_Loaded(object sender, EventArgs e)
    {
        Shell.Current.CurrentItem = this.aboutItem;
    }

    #endregion
}

namespace TestProject;

/// <summary>

/// 앱 쉘

/// </summary>

public partial class AppShell : Shell

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - AppShell()

/// <summary>

/// 생성자

/// </summary>

public AppShell()

{

InitializeComponent();

Loaded += shell_Loaded;

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Private

#region 셸 로드시 처리하기 - shell_Loaded(sender, e)

/// <summary>

/// 셸 로드시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void shell_Loaded(object sender, EventArgs e)

{

Shell.Current.CurrentItem = this.aboutItem;

}

#endregion

}

TestProject.zip

[C#/MAUI/.NET6] Shell 엘리먼트 : FlyoutFooter 속성을 사용해 플라이아웃 바닥글 설정하기

■ Shell 엘리먼트의 FlyoutFooter 속성을 사용해 플라이아웃 바닥글을 설정하는 방법을 보여준다. ▶ AppShell.xaml


<?xml version="1.0" encoding="utf-8" ?>
<Shell x:Class="TestProject.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:sys="clr-namespace:System;assembly=netstandard"
    xmlns:local="clr-namespace:TestProject">
    <Shell.FlyoutFooter>
        <Grid BackgroundColor="Black">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Label Grid.Row="0"
                HorizontalOptions="Center"
                FontAttributes="Bold"
                TextColor="White"
                Text="TestProject" />
            <Label Grid.Row="1"
                HorizontalOptions="Center"
                TextColor="White"
                Text="{Binding Source={x:Static sys:DateTime.Now}, StringFormat='{0:yyyy-MM-dd HH:mm:ss}'}" />
        </Grid>
    </Shell.FlyoutFooter>
    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <Tab
            Icon="sample1.png"
            Title="고양이/개">
            <ShellContent
                Icon="sample2.png"
                Title="고양이"
                ContentTemplate="{DataTemplate local:CatPage}" />
            <ShellContent
                Icon="sample3.png"
                Title="개"
                ContentTemplate="{DataTemplate local:DogPage}" />
        </Tab>
        <ShellContent
            Icon="sample1.png"
            Title="원숭이"
            ContentTemplate="{DataTemplate local:MonkeyPage}" />
        <ShellContent
            Icon="sample2.png"
            Title="코끼리"
            ContentTemplate="{DataTemplate local:ElephantPage}" />
        <ShellContent
            Icon="sample3.png"
            Title="곰"
            ContentTemplate="{DataTemplate local:BearPage}" />
    </FlyoutItem>
    <ShellContent
        Icon="sample1.png"
        Title="정보"
        ContentTemplate="{DataTemplate local:AboutPage}" />
    <MenuItem x:Name="helpMenuItem"
        Text="도움말"
        IconImageSource="sample2.png" />
</Shell>

<?xml version="1.0" encoding="utf-8" ?>

<Shell x:Class="TestProject.AppShell"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:sys="clr-namespace:System;assembly=netstandard"

xmlns:local="clr-namespace:TestProject">

<Shell.FlyoutFooter>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Label Grid.Row="0"

HorizontalOptions="Center"

FontAttributes="Bold"

TextColor="White"

Text="TestProject" />

<Label Grid.Row="1"

HorizontalOptions="Center"

TextColor="White"

Text="{Binding Source={x:Static sys:DateTime.Now}, StringFormat='{0:yyyy-MM-dd HH:mm:ss}'}" />

</Grid>

</Shell.FlyoutFooter>

<Tab

Icon="sample1.png"

Title="고양이/개">

<ShellContent

Icon="sample2.png"

Title="고양이"

ContentTemplate="{DataTemplate local:CatPage}" />

<ShellContent

Icon="sample3.png"

Title="개"

ContentTemplate="{DataTemplate local:DogPage}" />

</Tab>

<ShellContent

Icon="sample1.png"

Title="원숭이"

ContentTemplate="{DataTemplate local:MonkeyPage}" />

<ShellContent

Icon="sample2.png"

Title="코끼리"

ContentTemplate="{DataTemplate local:ElephantPage}" />

<ShellContent

Icon="sample3.png"

Title="곰"

ContentTemplate="{DataTemplate local:BearPage}" />

</FlyoutItem>

<ShellContent

Icon="sample1.png"

Title="정보"

ContentTemplate="{DataTemplate local:AboutPage}" />

<MenuItem x:Name="helpMenuItem"

Text="도움말"

IconImageSource="sample2.png" />

</Shell>

TestProject.zip

[C#/MAUI/.NET6] Shell 엘리먼트 : FlyoutContent 속성 사용하기

■ Shell 엘리먼트의 FlyoutContent 속성을 사용하는 방법을 보여준다. ▶ AppShell.xaml


<?xml version="1.0" encoding="utf-8" ?>
<Shell x:Class="TestProject.AppShell" x:Name="shell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TestProject">
    <Shell.FlyoutContent>
        <CollectionView
            BindingContext="{x:Reference shell}"
            IsGrouped="True"
            ItemsSource="{Binding FlyoutItems}">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Label
                        FontSize="18"
                        TextColor="Black"
                        Text="{Binding Title}" />
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </Shell.FlyoutContent>
    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <Tab
            Icon="sample1.png"
            Title="고양이/개">
            <ShellContent
                Icon="sample2.png"
                Title="고양이"
                ContentTemplate="{DataTemplate local:CatPage}" />
            <ShellContent
                Icon="sample3.png"
                Title="개"
                ContentTemplate="{DataTemplate local:DogPage}" />
        </Tab>
        <ShellContent
            Icon="sample1.png"
            Title="원숭이"
            ContentTemplate="{DataTemplate local:MonkeyPage}" />
        <ShellContent
            Icon="sample2.png"
            Title="코끼리"
            ContentTemplate="{DataTemplate local:ElephantPage}" />
        <ShellContent
            Icon="sample3.png"
            Title="곰"
            ContentTemplate="{DataTemplate local:BearPage}" />
    </FlyoutItem>
    <ShellContent
        Icon="sample1.png"
        Title="정보"
        ContentTemplate="{DataTemplate local:AboutPage}" />
    <MenuItem x:Name="helpMenuItem"
        Text="도움말"
        IconImageSource="sample2.png" />
</Shell>

<?xml version="1.0" encoding="utf-8" ?>

<Shell x:Class="TestProject.AppShell" x:Name="shell"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:TestProject">

<Shell.FlyoutContent>

<CollectionView

BindingContext="{x:Reference shell}"

IsGrouped="True"

ItemsSource="{Binding FlyoutItems}">

<CollectionView.ItemTemplate>

<Label

FontSize="18"

TextColor="Black"

Text="{Binding Title}" />

</DataTemplate>

</CollectionView.ItemTemplate>

</CollectionView>

</Shell.FlyoutContent>

<Tab

Icon="sample1.png"

Title="고양이/개">

<ShellContent

Icon="sample2.png"

Title="고양이"

ContentTemplate="{DataTemplate local:CatPage}" />

<ShellContent

Icon="sample3.png"

Title="개"

ContentTemplate="{DataTemplate local:DogPage}" />

</Tab>

<ShellContent

Icon="sample1.png"

Title="원숭이"

ContentTemplate="{DataTemplate local:MonkeyPage}" />

<ShellContent

Icon="sample2.png"

Title="코끼리"

ContentTemplate="{DataTemplate local:ElephantPage}" />

<ShellContent

Icon="sample3.png"

Title="곰"

ContentTemplate="{DataTemplate local:BearPage}" />

</FlyoutItem>

<ShellContent

Icon="sample1.png"

Title="정보"

ContentTemplate="{DataTemplate local:AboutPage}" />

<MenuItem x:Name="helpMenuItem"

Text="도움말"

IconImageSource="sample2.png" />

</Shell>

TestProject.zip

[C#/MAUI/.NET6] Shell 엘리먼트 : FlyoutBackdrop 속성을 사용해 플라이아웃 백드롭 설정하기

■ Shell 엘리먼트의 FlyoutBackdrop 속성을 사용해 플라이아웃 백드롭을 설정하는 방법을 보여준다. ▶ AppShell.xaml


<?xml version="1.0" encoding="utf-8" ?>
<Shell x:Class="TestProject.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TestProject">
    <Shell.FlyoutBackdrop>
        <LinearGradientBrush
            StartPoint="0,0"
            EndPoint="1,1">
            <GradientStop Offset="0.1" Color="#8a2387" />
            <GradientStop Offset="0.6" Color="#e94057" />
            <GradientStop Offset="1.0" Color="#f27121" />
        </LinearGradientBrush>
    </Shell.FlyoutBackdrop>
    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <Tab
            Icon="sample1.png"
            Title="고양이/개">
            <ShellContent
                Icon="sample2.png"
                Title="고양이"
                ContentTemplate="{DataTemplate local:CatPage}" />
            <ShellContent
                Icon="sample3.png"
                Title="개"
                ContentTemplate="{DataTemplate local:DogPage}" />
        </Tab>
        <ShellContent
            Icon="sample1.png"
            Title="원숭이"
            ContentTemplate="{DataTemplate local:MonkeyPage}" />
        <ShellContent
            Icon="sample2.png"
            Title="코끼리"
            ContentTemplate="{DataTemplate local:ElephantPage}" />
        <ShellContent
            Icon="sample3.png"
            Title="곰"
            ContentTemplate="{DataTemplate local:BearPage}" />
    </FlyoutItem>
    <ShellContent
        Icon="sample1.png"
        Title="정보"
        ContentTemplate="{DataTemplate local:AboutPage}" />
    <MenuItem x:Name="helpMenuItem"
        Text="도움말"
        IconImageSource="sample2.png" />
</Shell>

<?xml version="1.0" encoding="utf-8" ?>

<Shell x:Class="TestProject.AppShell"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:TestProject">

<Shell.FlyoutBackdrop>

<LinearGradientBrush

StartPoint="0,0"

EndPoint="1,1">

</LinearGradientBrush>

</Shell.FlyoutBackdrop>

<Tab

Icon="sample1.png"

Title="고양이/개">

<ShellContent

Icon="sample2.png"

Title="고양이"

ContentTemplate="{DataTemplate local:CatPage}" />

<ShellContent

Icon="sample3.png"

Title="개"

ContentTemplate="{DataTemplate local:DogPage}" />

</Tab>

<ShellContent

Icon="sample1.png"

Title="원숭이"

ContentTemplate="{DataTemplate local:MonkeyPage}" />

<ShellContent

Icon="sample2.png"

Title="코끼리"

ContentTemplate="{DataTemplate local:ElephantPage}" />

<ShellContent

Icon="sample3.png"

Title="곰"

ContentTemplate="{DataTemplate local:BearPage}" />

</FlyoutItem>

<ShellContent

Icon="sample1.png"

Title="정보"

ContentTemplate="{DataTemplate local:AboutPage}" />

<MenuItem x:Name="helpMenuItem"

Text="도움말"

IconImageSource="sample2.png" />

</Shell>

TestProject.zip

[C#/MAUI/.NET6] Shell 엘리먼트 : FlyoutBackgroundImageAspect/FlyoutBackgroundImage 속성을 사용해 플라이아웃 배경 이미지 설정하기

■ Shell 엘리먼트의 FlyoutBackgroundImageAspect/FlyoutBackgroundImage 속성을 사용해 플라이아웃 배경 이미지를 설정하는 방법을 보여준다. ▶ AppShell.xaml


<?xml version="1.0" encoding="utf-8" ?>
<Shell x:Class="TestProject.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TestProject"
    FlyoutBackgroundImageAspect="AspectFill"
    FlyoutBackgroundImage="sample4.jpg">
    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <Tab
            Icon="sample1.png"
            Title="고양이/개">
            <ShellContent
                Icon="sample2.png"
                Title="고양이"
                ContentTemplate="{DataTemplate local:CatPage}" />
            <ShellContent
                Icon="sample3.png"
                Title="개"
                ContentTemplate="{DataTemplate local:DogPage}" />
        </Tab>
        <ShellContent
            Icon="sample1.png"
            Title="원숭이"
            ContentTemplate="{DataTemplate local:MonkeyPage}" />
        <ShellContent
            Icon="sample2.png"
            Title="코끼리"
            ContentTemplate="{DataTemplate local:ElephantPage}" />
        <ShellContent
            Icon="sample3.png"
            Title="곰"
            ContentTemplate="{DataTemplate local:BearPage}" />
    </FlyoutItem>
    <ShellContent
        Icon="sample1.png"
        Title="정보"
        ContentTemplate="{DataTemplate local:AboutPage}" />
    <MenuItem x:Name="helpMenuItem"
        Text="도움말"
        IconImageSource="sample2.png" />
</Shell>

<?xml version="1.0" encoding="utf-8" ?>

<Shell x:Class="TestProject.AppShell"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:TestProject"

FlyoutBackgroundImageAspect="AspectFill"

FlyoutBackgroundImage="sample4.jpg">

<Tab

Icon="sample1.png"

Title="고양이/개">

<ShellContent

Icon="sample2.png"

Title="고양이"

ContentTemplate="{DataTemplate local:CatPage}" />

<ShellContent

Icon="sample3.png"

Title="개"

ContentTemplate="{DataTemplate local:DogPage}" />

</Tab>

<ShellContent

Icon="sample1.png"

Title="원숭이"

ContentTemplate="{DataTemplate local:MonkeyPage}" />

<ShellContent

Icon="sample2.png"

Title="코끼리"

ContentTemplate="{DataTemplate local:ElephantPage}" />

<ShellContent

Icon="sample3.png"

Title="곰"

ContentTemplate="{DataTemplate local:BearPage}" />

</FlyoutItem>

<ShellContent

Icon="sample1.png"

Title="정보"

ContentTemplate="{DataTemplate local:AboutPage}" />

<MenuItem x:Name="helpMenuItem"

Text="도움말"

IconImageSource="sample2.png" />

</Shell>

TestProject.zip

[C#/MAUI/.NET6] Shell 엘리먼트 : FlyoutBackground 속성을 사용해 플라이아웃 배경 색상 설정하기

■ Shell 엘리먼트의 FlyoutBackground 속성을 사용해 플라이아웃 배경 색상을 설정하는 방법을 보여준다. ▶ AppShell.xaml


<?xml version="1.0" encoding="utf-8" ?>
<Shell x:Class="TestProject.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TestProject">
    <Shell.FlyoutBackground>
        <LinearGradientBrush
                StartPoint="0,0"
                EndPoint="1,1">
            <GradientStop Offset="0.1" Color="#8a2387" />
            <GradientStop Offset="0.6" Color="#e94057" />
            <GradientStop Offset="1.0" Color="#f27121" />
        </LinearGradientBrush>
    </Shell.FlyoutBackground>
    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <Tab
            Icon="sample1.png"
            Title="고양이/개">
            <ShellContent
                Icon="sample2.png"
                Title="고양이"
                ContentTemplate="{DataTemplate local:CatPage}" />
            <ShellContent
                Icon="sample3.png"
                Title="개"
                ContentTemplate="{DataTemplate local:DogPage}" />
        </Tab>
        <ShellContent
            Icon="sample1.png"
            Title="원숭이"
            ContentTemplate="{DataTemplate local:MonkeyPage}" />
        <ShellContent
            Icon="sample2.png"
            Title="코끼리"
            ContentTemplate="{DataTemplate local:ElephantPage}" />
        <ShellContent
            Icon="sample3.png"
            Title="곰"
            ContentTemplate="{DataTemplate local:BearPage}" />
    </FlyoutItem>
    <ShellContent
        Icon="sample1.png"
        Title="정보"
        ContentTemplate="{DataTemplate local:AboutPage}" />
    <MenuItem x:Name="helpMenuItem"
        Text="도움말"
        IconImageSource="sample2.png" />
</Shell>

<?xml version="1.0" encoding="utf-8" ?>

<Shell x:Class="TestProject.AppShell"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:TestProject">

<Shell.FlyoutBackground>

<LinearGradientBrush

StartPoint="0,0"

EndPoint="1,1">

</LinearGradientBrush>

</Shell.FlyoutBackground>

<Tab

Icon="sample1.png"

Title="고양이/개">

<ShellContent

Icon="sample2.png"

Title="고양이"

ContentTemplate="{DataTemplate local:CatPage}" />

<ShellContent

Icon="sample3.png"

Title="개"

ContentTemplate="{DataTemplate local:DogPage}" />

</Tab>

<ShellContent

Icon="sample1.png"

Title="원숭이"

ContentTemplate="{DataTemplate local:MonkeyPage}" />

<ShellContent

Icon="sample2.png"

Title="코끼리"

ContentTemplate="{DataTemplate local:ElephantPage}" />

<ShellContent

Icon="sample3.png"

Title="곰"

ContentTemplate="{DataTemplate local:BearPage}" />

</FlyoutItem>

<ShellContent

Icon="sample1.png"

Title="정보"

ContentTemplate="{DataTemplate local:AboutPage}" />

<MenuItem x:Name="helpMenuItem"

Text="도움말"

IconImageSource="sample2.png" />

</Shell>

TestProject.zip

[C#/MAUI/.NET6] Shell 엘리먼트 : FlyoutBackgroundColor 속성을 사용해 플라이아웃 배경 색상 설정하기

■ Shell 엘리먼트의 FlyoutBackgroundColor 속성을 사용해 플라이아웃 배경 색상을 설정하는 방법을 보여준다. ▶ AppShell.xaml


<?xml version="1.0" encoding="utf-8" ?>
<Shell x:Class="TestProject.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TestProject"
    FlyoutBackgroundColor="RoyalBlue">
    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <Tab
            Icon="sample1.png"
            Title="고양이/개">
            <ShellContent
                Icon="sample2.png"
                Title="고양이"
                ContentTemplate="{DataTemplate local:CatPage}" />
            <ShellContent
                Icon="sample3.png"
                Title="개"
                ContentTemplate="{DataTemplate local:DogPage}" />
        </Tab>
        <ShellContent
            Icon="sample1.png"
            Title="원숭이"
            ContentTemplate="{DataTemplate local:MonkeyPage}" />
        <ShellContent
            Icon="sample2.png"
            Title="코끼리"
            ContentTemplate="{DataTemplate local:ElephantPage}" />
        <ShellContent
            Icon="sample3.png"
            Title="곰"
            ContentTemplate="{DataTemplate local:BearPage}" />
    </FlyoutItem>
    <ShellContent
        Icon="sample1.png"
        Title="정보"
        ContentTemplate="{DataTemplate local:AboutPage}" />
    <MenuItem x:Name="helpMenuItem"
        Text="도움말"
        IconImageSource="sample2.png" />
</Shell>

<?xml version="1.0" encoding="utf-8" ?>

<Shell x:Class="TestProject.AppShell"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:TestProject"

FlyoutBackgroundColor="RoyalBlue">

<Tab

Icon="sample1.png"

Title="고양이/개">

<ShellContent

Icon="sample2.png"

Title="고양이"

ContentTemplate="{DataTemplate local:CatPage}" />

<ShellContent

Icon="sample3.png"

Title="개"

ContentTemplate="{DataTemplate local:DogPage}" />

</Tab>

<ShellContent

Icon="sample1.png"

Title="원숭이"

ContentTemplate="{DataTemplate local:MonkeyPage}" />

<ShellContent

Icon="sample2.png"

Title="코끼리"

ContentTemplate="{DataTemplate local:ElephantPage}" />

<ShellContent

Icon="sample3.png"

Title="곰"

ContentTemplate="{DataTemplate local:BearPage}" />

</FlyoutItem>

<ShellContent

Icon="sample1.png"

Title="정보"

ContentTemplate="{DataTemplate local:AboutPage}" />

<MenuItem x:Name="helpMenuItem"

Text="도움말"

IconImageSource="sample2.png" />

</Shell>

TestProject.zip

[C#/MAUI/.NET6] Shell 엘리먼트 : FlyoutIcon 속성을 사용해 플라이아웃 아이콘 설정하기

■ Shell 엘리먼트의 FlyoutIcon 속성을 사용해 플라이아웃 아이콘을 설정하는 방법을 보여준다. ▶ AppShell.xaml


<?xml version="1.0" encoding="utf-8" ?>
<Shell x:Class="TestProject.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TestProject"
    FlyoutIcon="sample1.png">
    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <Tab
            Icon="sample1.png"
            Title="고양이/개">
            <ShellContent
                Icon="sample2.png"
                Title="고양이"
                ContentTemplate="{DataTemplate local:CatPage}" />
            <ShellContent
                Icon="sample3.png"
                Title="개"
                ContentTemplate="{DataTemplate local:DogPage}" />
        </Tab>
        <ShellContent
            Icon="sample1.png"
            Title="원숭이"
            ContentTemplate="{DataTemplate local:MonkeyPage}" />
        <ShellContent
            Icon="sample2.png"
            Title="코끼리"
            ContentTemplate="{DataTemplate local:ElephantPage}" />
        <ShellContent
            Icon="sample3.png"
            Title="곰"
            ContentTemplate="{DataTemplate local:BearPage}" />
    </FlyoutItem>
    <ShellContent
        Icon="sample1.png"
        Title="정보"
        ContentTemplate="{DataTemplate local:AboutPage}" />
    <MenuItem x:Name="helpMenuItem"
        Text="도움말"
        IconImageSource="sample2.png" />
</Shell>

<?xml version="1.0" encoding="utf-8" ?>

<Shell x:Class="TestProject.AppShell"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:TestProject"

FlyoutIcon="sample1.png">

<Tab

Icon="sample1.png"

Title="고양이/개">

<ShellContent

Icon="sample2.png"

Title="고양이"

ContentTemplate="{DataTemplate local:CatPage}" />

<ShellContent

Icon="sample3.png"

Title="개"

ContentTemplate="{DataTemplate local:DogPage}" />

</Tab>

<ShellContent

Icon="sample1.png"

Title="원숭이"

ContentTemplate="{DataTemplate local:MonkeyPage}" />

<ShellContent

Icon="sample2.png"

Title="코끼리"

ContentTemplate="{DataTemplate local:ElephantPage}" />

<ShellContent

Icon="sample3.png"

Title="곰"

ContentTemplate="{DataTemplate local:BearPage}" />

</FlyoutItem>

<ShellContent

Icon="sample1.png"

Title="정보"

ContentTemplate="{DataTemplate local:AboutPage}" />

<MenuItem x:Name="helpMenuItem"

Text="도움말"

IconImageSource="sample2.png" />

</Shell>

TestProject.zip

[C#/MAUI/.NET6] Shell 엘리먼트 : FlyoutWidth/FlyoutHeight 속성을 사용해 플라이아웃 너비 및 높이 설정하기

■ Shell 엘리먼트의 FlyoutWidth/FlyoutHeight 속성을 사용해 플라이아웃 너비 및 높이를 설정하는 방법을 보여준다. ▶ AppShell.xaml


<?xml version="1.0" encoding="utf-8" ?>
<Shell x:Class="TestProject.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TestProject"
    FlyoutWidth="200"
    FlyoutHeight="200">
    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <Tab
            Icon="sample1.png"
            Title="고양이/개">
            <ShellContent
                Icon="sample2.png"
                Title="고양이"
                ContentTemplate="{DataTemplate local:CatPage}" />
            <ShellContent
                Icon="sample3.png"
                Title="개"
                ContentTemplate="{DataTemplate local:DogPage}" />
        </Tab>
        <ShellContent
            Icon="sample1.png"
            Title="원숭이"
            ContentTemplate="{DataTemplate local:MonkeyPage}" />
        <ShellContent
            Icon="sample2.png"
            Title="코끼리"
            ContentTemplate="{DataTemplate local:ElephantPage}" />
        <ShellContent
            Icon="sample3.png"
            Title="곰"
            ContentTemplate="{DataTemplate local:BearPage}" />
    </FlyoutItem>
    <ShellContent
        Icon="sample1.png"
        Title="정보"
        ContentTemplate="{DataTemplate local:AboutPage}" />
    <MenuItem x:Name="helpMenuItem"
        Text="도움말"
        IconImageSource="sample2.png" />
</Shell>

<?xml version="1.0" encoding="utf-8" ?>

<Shell x:Class="TestProject.AppShell"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:TestProject"

FlyoutWidth="200"

FlyoutHeight="200">

<Tab

Icon="sample1.png"

Title="고양이/개">

<ShellContent

Icon="sample2.png"

Title="고양이"

ContentTemplate="{DataTemplate local:CatPage}" />

<ShellContent

Icon="sample3.png"

Title="개"

ContentTemplate="{DataTemplate local:DogPage}" />

</Tab>

<ShellContent

Icon="sample1.png"

Title="원숭이"

ContentTemplate="{DataTemplate local:MonkeyPage}" />

<ShellContent

Icon="sample2.png"

Title="코끼리"

ContentTemplate="{DataTemplate local:ElephantPage}" />

<ShellContent

Icon="sample3.png"

Title="곰"

ContentTemplate="{DataTemplate local:BearPage}" />

</FlyoutItem>

<ShellContent

Icon="sample1.png"

Title="정보"

ContentTemplate="{DataTemplate local:AboutPage}" />

<MenuItem x:Name="helpMenuItem"

Text="도움말"

IconImageSource="sample2.png" />

</Shell>

TestProject.zip

[C#/MAUI/.NET6] Shell 엘리먼트 : FlyoutHeaderBehavior 속성 사용하기

■ Shell 엘리먼트의 FlyoutHeaderBehavior 속성을 사용하는 방법을 보여준다. ▶ AppShell.xaml


<?xml version="1.0" encoding="utf-8" ?>
<Shell x:Class="TestProject.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TestProject"
    FlyoutHeaderBehavior="Scroll">
    <Shell.FlyoutHeader>
        <Grid BackgroundColor="Black">
            <Image
                Aspect="AspectFill"
                Opacity="0.6"
                Source="sample1.png" />
            <Label
                Margin="10"
                HorizontalTextAlignment="Center"
                VerticalTextAlignment="Center"
                FontAttributes="Bold"
                TextColor="White"
                Text="Animals" />
        </Grid>
    </Shell.FlyoutHeader>
    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <Tab
            Icon="sample1.png"
            Title="고양이/개">
            <ShellContent
                Icon="sample2.png"
                Title="고양이"
                ContentTemplate="{DataTemplate local:CatPage}" />
            <ShellContent
                Icon="sample3.png"
                Title="개"
                ContentTemplate="{DataTemplate local:DogPage}" />
        </Tab>
        <ShellContent
            Icon="sample1.png"
            Title="원숭이"
            ContentTemplate="{DataTemplate local:MonkeyPage}" />
        <ShellContent
            Icon="sample2.png"
            Title="코끼리"
            ContentTemplate="{DataTemplate local:ElephantPage}" />
        <ShellContent
            Icon="sample3.png"
            Title="곰"
            ContentTemplate="{DataTemplate local:BearPage}" />
        <ShellContent
            Icon="sample1.png"
            Title="원숭이"
            ContentTemplate="{DataTemplate local:MonkeyPage}" />
        <ShellContent
            Icon="sample2.png"
            Title="코끼리"
            ContentTemplate="{DataTemplate local:ElephantPage}" />
        <ShellContent
            Icon="sample3.png"
            Title="곰"
            ContentTemplate="{DataTemplate local:BearPage}" />
        <ShellContent
            Icon="sample1.png"
            Title="원숭이"
            ContentTemplate="{DataTemplate local:MonkeyPage}" />
        <ShellContent
            Icon="sample2.png"
            Title="코끼리"
            ContentTemplate="{DataTemplate local:ElephantPage}" />
        <ShellContent
            Icon="sample3.png"
            Title="곰"
            ContentTemplate="{DataTemplate local:BearPage}" />
        <ShellContent
            Icon="sample1.png"
            Title="원숭이"
            ContentTemplate="{DataTemplate local:MonkeyPage}" />
        <ShellContent
            Icon="sample2.png"
            Title="코끼리"
            ContentTemplate="{DataTemplate local:ElephantPage}" />
        <ShellContent
            Icon="sample3.png"
            Title="곰"
            ContentTemplate="{DataTemplate local:BearPage}" />
        <ShellContent
            Icon="sample1.png"
            Title="원숭이"
            ContentTemplate="{DataTemplate local:MonkeyPage}" />
        <ShellContent
            Icon="sample2.png"
            Title="코끼리"
            ContentTemplate="{DataTemplate local:ElephantPage}" />
        <ShellContent
            Icon="sample3.png"
            Title="곰"
            ContentTemplate="{DataTemplate local:BearPage}" />
        <ShellContent
            Icon="sample1.png"
            Title="원숭이"
            ContentTemplate="{DataTemplate local:MonkeyPage}" />
        <ShellContent
            Icon="sample2.png"
            Title="코끼리"
            ContentTemplate="{DataTemplate local:ElephantPage}" />
        <ShellContent
            Icon="sample3.png"
            Title="곰"
            ContentTemplate="{DataTemplate local:BearPage}" />
    </FlyoutItem>
    <ShellContent
        Icon="sample1.png"
        Title="정보"
        ContentTemplate="{DataTemplate local:AboutPage}" />
    <MenuItem x:Name="helpMenuItem"
        Text="도움말"
        IconImageSource="sample2.png" />
</Shell>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

<?xml version="1.0" encoding="utf-8" ?>

<Shell x:Class="TestProject.AppShell"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:TestProject"

FlyoutHeaderBehavior="Scroll">

<Shell.FlyoutHeader>

<Image

Aspect="AspectFill"

Opacity="0.6"

Source="sample1.png" />

<Label

Margin="10"

HorizontalTextAlignment="Center"

VerticalTextAlignment="Center"

FontAttributes="Bold"

TextColor="White"

Text="Animals" />

</Grid>

</Shell.FlyoutHeader>

<Tab

Icon="sample1.png"

Title="고양이/개">

<ShellContent

Icon="sample2.png"

Title="고양이"

ContentTemplate="{DataTemplate local:CatPage}" />

<ShellContent

Icon="sample3.png"

Title="개"

ContentTemplate="{DataTemplate local:DogPage}" />

</Tab>

<ShellContent

Icon="sample1.png"

Title="원숭이"

ContentTemplate="{DataTemplate local:MonkeyPage}" />

<ShellContent

Icon="sample2.png"

Title="코끼리"

ContentTemplate="{DataTemplate local:ElephantPage}" />

<ShellContent

Icon="sample3.png"

Title="곰"

ContentTemplate="{DataTemplate local:BearPage}" />

<ShellContent

Icon="sample1.png"

Title="원숭이"

ContentTemplate="{DataTemplate local:MonkeyPage}" />

<ShellContent

Icon="sample2.png"

Title="코끼리"

ContentTemplate="{DataTemplate local:ElephantPage}" />

<ShellContent

Icon="sample3.png"

Title="곰"

ContentTemplate="{DataTemplate local:BearPage}" />

<ShellContent

Icon="sample1.png"

Title="원숭이"

ContentTemplate="{DataTemplate local:MonkeyPage}" />

<ShellContent

Icon="sample2.png"

Title="코끼리"

ContentTemplate="{DataTemplate local:ElephantPage}" />

<ShellContent

Icon="sample3.png"

Title="곰"

ContentTemplate="{DataTemplate local:BearPage}" />

<ShellContent

Icon="sample1.png"

Title="원숭이"

ContentTemplate="{DataTemplate local:MonkeyPage}" />

<ShellContent

Icon="sample2.png"

Title="코끼리"

ContentTemplate="{DataTemplate local:ElephantPage}" />

<ShellContent

Icon="sample3.png"

Title="곰"

ContentTemplate="{DataTemplate local:BearPage}" />

<ShellContent

Icon="sample1.png"

Title="원숭이"

ContentTemplate="{DataTemplate local:MonkeyPage}" />

<ShellContent

Icon="sample2.png"

Title="코끼리"

ContentTemplate="{DataTemplate local:ElephantPage}" />

<ShellContent

Icon="sample3.png"

Title="곰"

ContentTemplate="{DataTemplate local:BearPage}" />

<ShellContent

Icon="sample1.png"

Title="원숭이"

ContentTemplate="{DataTemplate local:MonkeyPage}" />

<ShellContent

Icon="sample2.png"

Title="코끼리"

ContentTemplate="{DataTemplate local:ElephantPage}" />

<ShellContent

Icon="sample3.png"

Title="곰"

ContentTemplate="{DataTemplate local:BearPage}" />

</FlyoutItem>

<ShellContent

Icon="sample1.png"

Title="정보"

ContentTemplate="{DataTemplate local:AboutPage}" />

<MenuItem x:Name="helpMenuItem"

Text="도움말"

IconImageSource="sample2.png" />

</Shell>

TestProject.zip

[C#/MAUI/.NET6] Shell 엘리먼트 : FlyoutHeader 속성을 사용해 플라이아웃 헤더 설정하기

■ Shell 엘리먼트의 FlyoutHeader 속성을 사용해 플라이아웃 헤더를 설정하는 방법을 보여준다. ▶ AppShell.xaml


<?xml version="1.0" encoding="utf-8" ?>
<Shell x:Class="TestProject.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TestProject">
    <Shell.FlyoutHeader>
        <Grid BackgroundColor="Black">
            <Image
                Aspect="AspectFill"
                Opacity="0.6"
                Source="sample1.png" />
            <Label
                Margin="10"
                HorizontalTextAlignment="Center"
                VerticalTextAlignment="Center"
                FontAttributes="Bold"
                TextColor="White"
                Text="Animals" />
        </Grid>
    </Shell.FlyoutHeader>
    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <Tab
            Icon="sample1.png"
            Title="고양이/개">
            <ShellContent
                Icon="sample2.png"
                Title="고양이"
                ContentTemplate="{DataTemplate local:CatPage}" />
            <ShellContent
                Icon="sample3.png"
                Title="개"
                ContentTemplate="{DataTemplate local:DogPage}" />
        </Tab>
        <ShellContent
            Icon="sample1.png"
            Title="원숭이"
            ContentTemplate="{DataTemplate local:MonkeyPage}" />
        <ShellContent
            Icon="sample2.png"
            Title="코끼리"
            ContentTemplate="{DataTemplate local:ElephantPage}" />
        <ShellContent
            Icon="sample3.png"
            Title="곰"
            ContentTemplate="{DataTemplate local:BearPage}" />
    </FlyoutItem>
    <ShellContent
        Icon="sample1.png"
        Title="정보"
        ContentTemplate="{DataTemplate local:AboutPage}" />
    <MenuItem x:Name="helpMenuItem"
        Text="도움말"
        IconImageSource="sample2.png" />
</Shell>

<?xml version="1.0" encoding="utf-8" ?>

<Shell x:Class="TestProject.AppShell"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:TestProject">

<Shell.FlyoutHeader>

<Image

Aspect="AspectFill"

Opacity="0.6"

Source="sample1.png" />

<Label

Margin="10"

HorizontalTextAlignment="Center"

VerticalTextAlignment="Center"

FontAttributes="Bold"

TextColor="White"

Text="Animals" />

</Grid>

</Shell.FlyoutHeader>

<Tab

Icon="sample1.png"

Title="고양이/개">

<ShellContent

Icon="sample2.png"

Title="고양이"

ContentTemplate="{DataTemplate local:CatPage}" />

<ShellContent

Icon="sample3.png"

Title="개"

ContentTemplate="{DataTemplate local:DogPage}" />

</Tab>

<ShellContent

Icon="sample1.png"

Title="원숭이"

ContentTemplate="{DataTemplate local:MonkeyPage}" />

<ShellContent

Icon="sample2.png"

Title="코끼리"

ContentTemplate="{DataTemplate local:ElephantPage}" />

<ShellContent

Icon="sample3.png"

Title="곰"

ContentTemplate="{DataTemplate local:BearPage}" />

</FlyoutItem>

<ShellContent

Icon="sample1.png"

Title="정보"

ContentTemplate="{DataTemplate local:AboutPage}" />

<MenuItem x:Name="helpMenuItem"

Text="도움말"

IconImageSource="sample2.png" />

</Shell>

TestProject.zip

[C#/MAUI/.NET6] Shell 엘리먼트 : FlyoutItem 및 MenuItem를 위한 3가지 스타일 클래스 사용하기

■ Shell 엘리먼트에서 FlyoutItem 및 MenuItem를 위한 3가지 스타일 클래스를 사용하는 방법을 보여준다. ▶ AppShell.xaml


<?xml version="1.0" encoding="utf-8" ?>
<Shell x:Class="TestProject.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TestProject">
    <Shell.Resources>
        <Style TargetType="Label" Class="FlyoutItemLabelStyle">
            <Setter Property="Margin"    Value="10"    />
            <Setter Property="TextColor" Value="Black" />
        </Style>
        <Style TargetType="Image" Class="FlyoutItemImageStyle">
            <Setter Property="Margin" Value="10"   />
            <Setter Property="Aspect" Value="Fill" />
        </Style>
        <Style TargetType="Layout" Class="FlyoutItemLayoutStyle"
            ApplyToDerivedTypes="True">
            <Setter Property="BackgroundColor" Value="Teal" />
        </Style>
    </Shell.Resources>
    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <Tab
            Icon="sample1.png"
            Title="고양이/개">
            <ShellContent
                Icon="sample2.png"
                Title="고양이"
                ContentTemplate="{DataTemplate local:CatPage}" />
            <ShellContent
                Icon="sample3.png"
                Title="개"
                ContentTemplate="{DataTemplate local:DogPage}" />
        </Tab>
        <ShellContent
            Icon="sample1.png"
            Title="원숭이"
            ContentTemplate="{DataTemplate local:MonkeyPage}" />
        <ShellContent
            Icon="sample2.png"
            Title="코끼리"
            ContentTemplate="{DataTemplate local:ElephantPage}" />
        <ShellContent
            Icon="sample3.png"
            Title="곰"
            ContentTemplate="{DataTemplate local:BearPage}" />
    </FlyoutItem>
    <ShellContent
        Icon="sample1.png"
        Title="정보"
        ContentTemplate="{DataTemplate local:AboutPage}" />
    <MenuItem x:Name="helpMenuItem"
        Text="도움말"
        IconImageSource="sample2.png" />
</Shell>

<?xml version="1.0" encoding="utf-8" ?>

<Shell x:Class="TestProject.AppShell"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:TestProject">

<Shell.Resources>

</Style>

</Style>

<Style TargetType="Layout" Class="FlyoutItemLayoutStyle"

ApplyToDerivedTypes="True">

</Style>

</Shell.Resources>

<Tab

Icon="sample1.png"

Title="고양이/개">

<ShellContent

Icon="sample2.png"

Title="고양이"

ContentTemplate="{DataTemplate local:CatPage}" />

<ShellContent

Icon="sample3.png"

Title="개"

ContentTemplate="{DataTemplate local:DogPage}" />

</Tab>

<ShellContent

Icon="sample1.png"

Title="원숭이"

ContentTemplate="{DataTemplate local:MonkeyPage}" />

<ShellContent

Icon="sample2.png"

Title="코끼리"

ContentTemplate="{DataTemplate local:ElephantPage}" />

<ShellContent

Icon="sample3.png"

Title="곰"

ContentTemplate="{DataTemplate local:BearPage}" />

</FlyoutItem>

<ShellContent

Icon="sample1.png"

Title="정보"

ContentTemplate="{DataTemplate local:AboutPage}" />

<MenuItem x:Name="helpMenuItem"

Text="도움말"

IconImageSource="sample2.png" />

</Shell>

TestProject.zip

[C#/MAUI/.NET6] Shell 엘리먼트 : MenuItemTemplate 속성 사용하기

■ Shell 엘리먼트의 MenuItemTemplate 속성을 사용하는 방법을 보여준다. ▶ AppShell.xaml


<?xml version="1.0" encoding="utf-8" ?>
<Shell x:Class="TestProject.AppShell" x:Name="shell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TestProject">
    <Shell.ItemTemplate>
        <DataTemplate>
            <Grid ColumnDefinitions="0.2*,0.8*">
                <Image
                    Margin="5"
                    HeightRequest="45"
                    Source="{Binding FlyoutIcon}" />
                <Label Grid.Column="1"
                    VerticalTextAlignment="Center"
                    FontAttributes="Italic"
                    Text="{Binding Title}" />
            </Grid>
        </DataTemplate>
    </Shell.ItemTemplate>
    <Shell.MenuItemTemplate>
        <DataTemplate>
            <Grid ColumnDefinitions="0.2*,0.8*">
                <Image
                    Margin="5"
                    HeightRequest="45"
                    Source="{Binding Icon}" />
                <Label Grid.Column="1"
                    VerticalTextAlignment="Center"
                    FontAttributes="Italic"
                    Text="{Binding Text}" />
            </Grid>
        </DataTemplate>
    </Shell.MenuItemTemplate>
    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <Tab
            Icon="sample1.png"
            Title="고양이/개">
            <ShellContent
                Icon="sample2.png"
                Title="고양이"
                ContentTemplate="{DataTemplate local:CatPage}" />
            <ShellContent
                Icon="sample3.png"
                Title="개"
                ContentTemplate="{DataTemplate local:DogPage}" />
        </Tab>
        <ShellContent
            Icon="sample1.png"
            Title="원숭이"
            ContentTemplate="{DataTemplate local:MonkeyPage}" />
        <ShellContent
            Icon="sample2.png"
            Title="코끼리"
            ContentTemplate="{DataTemplate local:ElephantPage}" />
        <ShellContent
            Icon="sample3.png"
            Title="곰"
            ContentTemplate="{DataTemplate local:BearPage}" />
    </FlyoutItem>
    <ShellContent
        Icon="sample1.png"
        Title="정보"
        ContentTemplate="{DataTemplate local:AboutPage}" />
    <MenuItem x:Name="helpMenuItem"
        Text="도움말"
        IconImageSource="sample2.png" />
</Shell>

<?xml version="1.0" encoding="utf-8" ?>

<Shell x:Class="TestProject.AppShell" x:Name="shell"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:TestProject">

<Shell.ItemTemplate>

<Image

Margin="5"

HeightRequest="45"

Source="{Binding FlyoutIcon}" />

<Label Grid.Column="1"

VerticalTextAlignment="Center"

FontAttributes="Italic"

Text="{Binding Title}" />

</Grid>

</DataTemplate>

</Shell.ItemTemplate>

<Shell.MenuItemTemplate>

<Image

Margin="5"

HeightRequest="45"

Source="{Binding Icon}" />

<Label Grid.Column="1"

VerticalTextAlignment="Center"

FontAttributes="Italic"

Text="{Binding Text}" />

</Grid>

</DataTemplate>

</Shell.MenuItemTemplate>

<Tab

Icon="sample1.png"

Title="고양이/개">

<ShellContent

Icon="sample2.png"

Title="고양이"

ContentTemplate="{DataTemplate local:CatPage}" />

<ShellContent

Icon="sample3.png"

Title="개"

ContentTemplate="{DataTemplate local:DogPage}" />

</Tab>

<ShellContent

Icon="sample1.png"

Title="원숭이"

ContentTemplate="{DataTemplate local:MonkeyPage}" />

<ShellContent

Icon="sample2.png"

Title="코끼리"

ContentTemplate="{DataTemplate local:ElephantPage}" />

<ShellContent

Icon="sample3.png"

Title="곰"

ContentTemplate="{DataTemplate local:BearPage}" />

</FlyoutItem>

<ShellContent

Icon="sample1.png"

Title="정보"

ContentTemplate="{DataTemplate local:AboutPage}" />

<MenuItem x:Name="helpMenuItem"

Text="도움말"

IconImageSource="sample2.png" />

</Shell>

▶ AppShell.xaml.cs


namespace TestProject;

/// <summary>
/// 앱 쉘
/// </summary>
public partial class AppShell : Shell
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 생성자 - AppShell()

    /// <summary>
    /// 생성자
    /// </summary>
    public AppShell()
    {
        InitializeComponent();

        this.helpMenuItem.Clicked += helpMenuItem_Clicked;
    }

    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Method
    ////////////////////////////////////////////////////////////////////////////////////////// Private

    #region 도움말 메뉴 항목 클릭시 처리하기 - helpMenuItem_Clicked(sender, e)

    /// <summary>
    /// 도움말 메뉴 항목 클릭시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private async void helpMenuItem_Clicked(object sender, EventArgs e)
    {
        MenuItem menuItem = sender as MenuItem;

        await DisplayAlert("정보", $"{menuItem.Text} 메뉴를 클릭했습니다.", "확인");
    }

    #endregion
}

namespace TestProject;

/// <summary>

/// 앱 쉘

/// </summary>

public partial class AppShell : Shell

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - AppShell()

/// <summary>

/// 생성자

/// </summary>

public AppShell()

{

InitializeComponent();

this.helpMenuItem.Clicked += helpMenuItem_Clicked;

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Private

#region 도움말 메뉴 항목 클릭시 처리하기 - helpMenuItem_Clicked(sender, e)

/// <summary>

/// 도움말 메뉴 항목 클릭시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private async void helpMenuItem_Clicked(object sender, EventArgs e)

{

MenuItem menuItem = sender as MenuItem;

await DisplayAlert("정보", $"{menuItem.Text} 메뉴를 클릭했습니다.", "확인");

}

#endregion

}

TestProject.zip

[C#/MAUI/.NET6] Shell 엘리먼트 : ItemTemplate 속성 사용하기

■ Shell 엘리먼트의 ItemTemplate 속성을 사용하는 방법을 보여준다. ▶ AppShell.xaml


<?xml version="1.0" encoding="utf-8" ?>
<Shell x:Class="TestProject.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TestProject">
    <Shell.ItemTemplate>
        <DataTemplate>
            <Grid ColumnDefinitions="0.2*,0.8*">
                <Image
                    Margin="5"
                    HeightRequest="45"
                    Source="{Binding FlyoutIcon}" />
                <Label Grid.Column="1"
                    VerticalTextAlignment="Center"
                    FontAttributes="Italic"
                    Text="{Binding Title}" />
            </Grid>
        </DataTemplate>
    </Shell.ItemTemplate>
    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <Tab
            Icon="sample1.png"
            Title="고양이/개">
            <ShellContent
                Icon="sample2.png"
                Title="고양이"
                ContentTemplate="{DataTemplate local:CatPage}" />
            <ShellContent
                Icon="sample3.png"
                Title="개"
                ContentTemplate="{DataTemplate local:DogPage}" />
        </Tab>
        <ShellContent
            Icon="sample1.png"
            Title="원숭이"
            ContentTemplate="{DataTemplate local:MonkeyPage}" />
        <ShellContent
            Icon="sample2.png"
            Title="코끼리"
            ContentTemplate="{DataTemplate local:ElephantPage}" />
        <ShellContent
            Icon="sample3.png"
            Title="곰"
            ContentTemplate="{DataTemplate local:BearPage}" />
    </FlyoutItem>
    <ShellContent
        Icon="sample1.png"
        Title="정보"
        ContentTemplate="{DataTemplate local:AboutPage}" />
</Shell>

<?xml version="1.0" encoding="utf-8" ?>

<Shell x:Class="TestProject.AppShell"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:TestProject">

<Shell.ItemTemplate>

<Image

Margin="5"

HeightRequest="45"

Source="{Binding FlyoutIcon}" />

<Label Grid.Column="1"

VerticalTextAlignment="Center"

FontAttributes="Italic"

Text="{Binding Title}" />

</Grid>

</DataTemplate>

</Shell.ItemTemplate>

<Tab

Icon="sample1.png"

Title="고양이/개">

<ShellContent

Icon="sample2.png"

Title="고양이"

ContentTemplate="{DataTemplate local:CatPage}" />

<ShellContent

Icon="sample3.png"

Title="개"

ContentTemplate="{DataTemplate local:DogPage}" />

</Tab>

<ShellContent

Icon="sample1.png"

Title="원숭이"

ContentTemplate="{DataTemplate local:MonkeyPage}" />

<ShellContent

Icon="sample2.png"

Title="코끼리"

ContentTemplate="{DataTemplate local:ElephantPage}" />

<ShellContent

Icon="sample3.png"

Title="곰"

ContentTemplate="{DataTemplate local:BearPage}" />

</FlyoutItem>

<ShellContent

Icon="sample1.png"

Title="정보"

ContentTemplate="{DataTemplate local:AboutPage}" />

</Shell>

TestProject.zip

[C#/MAUI/.NET6] FlyoutItem 엘리먼트 사용하기

■ FlyoutItem 엘리먼트를 사용하는 방법을 보여준다. ▶ CatPage.xaml


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="TestProject.CatPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    Title="Cat Page"
    BackgroundColor="White">
    <StackLayout>
        <Label
            HorizontalOptions="CenterAndExpand"
            VerticalOptions="CenterAndExpand"
            Text="CAT PAGE" />
    </StackLayout>
</ContentPage>

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage x:Class="TestProject.CatPage"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

Title="Cat Page"

BackgroundColor="White">

<Label

HorizontalOptions="CenterAndExpand"

VerticalOptions="CenterAndExpand"

Text="CAT PAGE" />

</StackLayout>

</ContentPage>

▶ DogPage.xaml


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="TestProject.DogPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    Title="Dog Page"
    BackgroundColor="White">
    <StackLayout>
        <Label
            HorizontalOptions="CenterAndExpand"
            VerticalOptions="CenterAndExpand"
            Text="DOG PAGE" />
    </StackLayout>
</ContentPage>

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage x:Class="TestProject.DogPage"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

Title="Dog Page"

BackgroundColor="White">

<Label

HorizontalOptions="CenterAndExpand"

VerticalOptions="CenterAndExpand"

Text="DOG PAGE" />

</StackLayout>

</ContentPage>

▶ MonkeyPage.xaml


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="TestProject.MonkeyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    Title="Monkey Page"
    BackgroundColor="White">
    <StackLayout>
        <Label
            HorizontalOptions="CenterAndExpand"
            VerticalOptions="CenterAndExpand"
            Text="MONKEY PAGE" />
    </StackLayout>
</ContentPage>

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage x:Class="TestProject.MonkeyPage"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

Title="Monkey Page"

BackgroundColor="White">

<Label

HorizontalOptions="CenterAndExpand"

VerticalOptions="CenterAndExpand"

Text="MONKEY PAGE" />

</StackLayout>

</ContentPage>

▶ ElephantPage.xaml


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="TestProject.ElephantPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    Title="Elephant Page"
    BackgroundColor="White">
    <StackLayout>
        <Label
            HorizontalOptions="CenterAndExpand"
            VerticalOptions="CenterAndExpand"
            Text="ELEPHANT PAGE" />
    </StackLayout>
</ContentPage>

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage x:Class="TestProject.ElephantPage"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

Title="Elephant Page"

BackgroundColor="White">

<Label

HorizontalOptions="CenterAndExpand"

VerticalOptions="CenterAndExpand"

Text="ELEPHANT PAGE" />

</StackLayout>

</ContentPage>

▶ BearPage.xaml


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="TestProject.BearPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    Title="Bear Page"
    BackgroundColor="White">
    <StackLayout>
        <Label
            HorizontalOptions="CenterAndExpand"
            VerticalOptions="CenterAndExpand"
            Text="BEAR PAGE" />
    </StackLayout>
</ContentPage>

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage x:Class="TestProject.BearPage"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

Title="Bear Page"

BackgroundColor="White">

<Label

HorizontalOptions="CenterAndExpand"

VerticalOptions="CenterAndExpand"

Text="BEAR PAGE" />

</StackLayout>

</ContentPage>

▶

[C#/MAUI/.NET6] Tab 엘리먼트 사용하기

■ Tab 엘리먼트를 사용하는 방법을 보여준다. ▶ AppShell.xaml


<?xml version="1.0" encoding="utf-8" ?>
<Shell x:Class="TestProject.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TestProject">
    <FlyoutItem
        Icon="sample1.png"
        Title="고양이">
        <Tab>
            <ShellContent ContentTemplate="{DataTemplate local:CatPage}" />
        </Tab>
    </FlyoutItem>
    <FlyoutItem
        Title="개/원숭이"
        Icon="sample2.png">
        <Tab>
            <ShellContent
                Icon="sample2.png"
                Title="개"
                ContentTemplate="{DataTemplate local:DogPage}" />
            <ShellContent
                Icon="sample3.png"
                Title="원숭이"
                ContentTemplate="{DataTemplate local:MonkeyPage}" />
        </Tab>
    </FlyoutItem>
</Shell>

<?xml version="1.0" encoding="utf-8" ?>

<Shell x:Class="TestProject.AppShell"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:TestProject">

<FlyoutItem

Icon="sample1.png"

Title="고양이">

<Tab>

</Tab>

</FlyoutItem>

<FlyoutItem

Title="개/원숭이"

Icon="sample2.png">

<Tab>

<ShellContent

Icon="sample2.png"

Title="개"

ContentTemplate="{DataTemplate local:DogPage}" />

<ShellContent

Icon="sample3.png"

Title="원숭이"

ContentTemplate="{DataTemplate local:MonkeyPage}" />

</Tab>

</FlyoutItem>

</Shell>

TestProject.zip

[C#/MAUI/.NET6] FlyoutItem 엘리먼트 사용하기

■ FlyoutItem 엘리먼트를 사용하는 방법을 보여준다. ▶ AppShell.xaml


<?xml version="1.0" encoding="utf-8" ?>
<Shell x:Class="TestProject.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TestProject">
    <FlyoutItem
        Title="고양이"
        Icon="sample1.png">
        <Tab>
            <ShellContent ContentTemplate="{DataTemplate local:CatPage}" />
        </Tab>
    </FlyoutItem>
    <FlyoutItem
        Title="개"
        Icon="sample2.png">
        <Tab>
            <ShellContent ContentTemplate="{DataTemplate local:DogPage}" />
        </Tab>
    </FlyoutItem>
</Shell>

<?xml version="1.0" encoding="utf-8" ?>

<Shell x:Class="TestProject.AppShell"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:TestProject">

<FlyoutItem

Title="고양이"

Icon="sample1.png">

<Tab>

</Tab>

</FlyoutItem>

<FlyoutItem

Title="개"

Icon="sample2.png">

<Tab>

</Tab>

</FlyoutItem>

</Shell>

TestProject.zip