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

■ CompareStateTrigger 엘리먼트를 사용하는 방법을 보여준다.

▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <ContentPage.Resources>
        <Style TargetType="Grid">
            <Setter Property="VisualStateManager.VisualStateGroups">
                <VisualStateGroupList>
                    <VisualStateGroup>
                        <VisualState x:Name="Checked">
                            <VisualState.StateTriggers>
                                <CompareStateTrigger Property="{Binding Source={x:Reference checkBox}, Path=IsChecked}" Value="True" />
                            </VisualState.StateTriggers>
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor" Value="Orange" />
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="Unchecked">
                            <VisualState.StateTriggers>
                                <CompareStateTrigger Property="{Binding Source={x:Reference checkBox}, Path=IsChecked}" Value="False" />
                            </VisualState.StateTriggers>
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor" Value="White" />
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateGroupList>
            </Setter>
        </Style>
    </ContentPage.Resources>
    <Grid>
        <Frame
            HorizontalOptions="Center"
            VerticalOptions="Center"
            Margin="24"
            CornerRadius="12"
            BackgroundColor="White">
            <StackLayout Orientation="Horizontal">
                <CheckBox x:Name="checkBox"
                    VerticalOptions="Center" />
                <Label
                    VerticalOptions="Center"
                    Text="그리드 배경색 변경" />
            </StackLayout>
        </Frame>
    </Grid>
</ContentPage>

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

<ContentPage x:Class="TestProject.MainPage"

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

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

<ContentPage.Resources>

<VisualState.StateTriggers>

</VisualState.StateTriggers>

<VisualState.Setters>

</VisualState.Setters>

</VisualState>

<VisualState.StateTriggers>

</VisualState.StateTriggers>

<VisualState.Setters>

</VisualState.Setters>

</VisualState>

</VisualStateGroup>

</VisualStateGroupList>

</Setter>

</Style>

</ContentPage.Resources>

<Grid>

<Frame

HorizontalOptions="Center"

VerticalOptions="Center"

Margin="24"

CornerRadius="12"

BackgroundColor="White">

<CheckBox x:Name="checkBox"

VerticalOptions="Center" />

<Label

VerticalOptions="Center"

Text="그리드 배경색 변경" />

</StackLayout>

</Frame>

</Grid>

</ContentPage>

TestProject.zip