[C#/MAUI/.NET6] VisualStateManager 엘리먼트 : VisualStateGroups 첨부 속성을 Shell.ItemTemplate 속성에서 사용하기

■ VisualStateManager 엘리먼트의 VisualStateGroups 첨부 속성을 Shell.ItemTemplate 속성에서 사용하는 방법을 보여준다.

▶ 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 HeightRequest="50">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="50" />
                    <ColumnDefinition Width="*"  />
                </Grid.ColumnDefinitions>
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroupList>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal">
                                <VisualState.Setters>
                                    <Setter Property="BackgroundColor" Value="Transparent" />
                                    <Setter
                                        TargetName="label"
                                        Property="Label.TextColor"
                                        Value="Black" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="Selected">
                                <VisualState.Setters>
                                    <Setter Property="BackgroundColor" Value="RoyalBlue" />
                                    <Setter
                                        TargetName="label"
                                        Property="Label.TextColor"
                                        Value="White" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateGroupList>
                </VisualStateManager.VisualStateGroups>
                <Image Grid.Column="0"
                    HorizontalOptions="Center"
                    VerticalOptions="Center"
                    WidthRequest="32"
                    HeightRequest="32"
                    Source="{Binding FlyoutIcon}" />
                <Label x:Name="label" Grid.Column="1"
                    VerticalTextAlignment="Center"
                    FontSize="14"
                    Text="{Binding Title}" />
            </Grid>
        </DataTemplate>
    </Shell.ItemTemplate>
    <FlyoutItem
        Icon="sample1.png"
        Title="고양이"
        FlyoutDisplayOptions="AsSingleItem">
        <ShellContent ContentTemplate="{DataTemplate local:CatPage}" />
    </FlyoutItem>
    <FlyoutItem
        Icon="sample2.png"
        Title="개"
        FlyoutDisplayOptions="AsSingleItem">
        <ShellContent ContentTemplate="{DataTemplate local:DogPage}" />
    </FlyoutItem>
    <FlyoutItem
        Icon="sample3.png"
        Title="원숭이"
        FlyoutDisplayOptions="AsSingleItem">
        <ShellContent ContentTemplate="{DataTemplate local:MonkeyPage}" />
    </FlyoutItem>
</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>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<VisualStateManager.VisualStateGroups>

<VisualState.Setters>

<Setter

TargetName="label"

Property="Label.TextColor"

Value="Black" />

</VisualState.Setters>

</VisualState>

<VisualState.Setters>

<Setter

TargetName="label"

Property="Label.TextColor"

Value="White" />

</VisualState.Setters>

</VisualState>

</VisualStateGroup>

</VisualStateGroupList>

</VisualStateManager.VisualStateGroups>

<Image Grid.Column="0"

HorizontalOptions="Center"

VerticalOptions="Center"

WidthRequest="32"

HeightRequest="32"

Source="{Binding FlyoutIcon}" />

<Label x:Name="label" Grid.Column="1"

VerticalTextAlignment="Center"

FontSize="14"

Text="{Binding Title}" />

</Grid>

</DataTemplate>

</Shell.ItemTemplate>

<FlyoutItem

Icon="sample1.png"

Title="고양이"

FlyoutDisplayOptions="AsSingleItem">

</FlyoutItem>

<FlyoutItem

Icon="sample2.png"

Title="개"

FlyoutDisplayOptions="AsSingleItem">

</FlyoutItem>

<FlyoutItem

Icon="sample3.png"

Title="원숭이"

FlyoutDisplayOptions="AsSingleItem">

</FlyoutItem>

</Shell>

TestProject.zip