[C#/WINUI3/.NET8] VisualState 엘리먼트 만들기

■ VisualState 엘리먼트를 만드는 방법을 보여준다.

▶ 예제 코드 (XAML)


<Grid>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState x:Name="DefaultState">
                <Storyboard />
            </VisualState>
            <VisualState x:Name="WideState">
                <Storyboard>
                    <ObjectAnimationUsingKeyFrames
                        Storyboard.TargetName="splitView"
                        Storyboard.TargetProperty="DisplayMode">
                        <DiscreteObjectKeyFrame KeyTime="0">
                            <DiscreteObjectKeyFrame.Value>
                                <SplitViewDisplayMode>Inline</SplitViewDisplayMode>
                            </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames
                        Storyboard.TargetName="splitView"
                        Storyboard.TargetProperty="IsPaneOpen">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="True" />
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <SplitView Name="splitView"
        DisplayMode="CompactInline"
        CompactPaneLength="20"
        IsPaneOpen="False">
    </SplitView>
</Grid>

<Grid>

<VisualStateManager.VisualStateGroups>

</VisualState>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetName="splitView"

Storyboard.TargetProperty="DisplayMode">

<DiscreteObjectKeyFrame.Value>

<SplitViewDisplayMode>Inline</SplitViewDisplayMode>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetName="splitView"

Storyboard.TargetProperty="IsPaneOpen">

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<SplitView Name="splitView"

DisplayMode="CompactInline"

CompactPaneLength="20"

IsPaneOpen="False">

</SplitView>

</Grid>