[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