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

TestProject.zip

0.15MB

▶ 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>