[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] Interaction 엘리먼트 : Behaviors 첨부 속성을 사용해 버튼 클릭시 애니메이션 만들기

■ Interaction 엘리먼트의 Behaviors 첨부 속성을 사용해 버튼 클릭시 애니메이션을 만드는 방법을 보여준다

※ 이 예제 코드에서 사용된 Interaction 엘리먼트는 CommunityToolkit.WinUI.Behaviors 누겟(버전 : 8.0.240109)을 참조한다.
※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다.
※ TestProject.csproj 프로젝트 파일에서 WindowsPackageType 태그를 None으로 추가했다.

▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8"?>
<Page x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mxic="using:Microsoft.Xaml.Interactions.Core"
    xmlns:mxi="using:Microsoft.Xaml.Interactivity"
    xmlns:ctwa="using:CommunityToolkit.WinUI.Animations"
    xmlns:ctwb="using:CommunityToolkit.WinUI.Behaviors"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Button
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Width="150"
        Height="100">
        <ctwa:Explicit.Animations>
            <ctwa:AnimationSet x:Name="moveAnimationSet"
                IsSequential="True">
                <ctwa:StartAnimationActivity Animation="{Binding ElementName=fadeOutAnimationSet}" />
                <ctwa:InvokeActionsActivity>
                    <mxic:ChangePropertyAction
                        TargetObject="{Binding ElementName=textBlock}"
                        PropertyName="Foreground"
                        Value="Purple" />
                </ctwa:InvokeActionsActivity>
                <ctwa:StartAnimationActivity
                    Animation="{Binding ElementName=fadeInAnimationSet}"
                    Delay="00:00:02" />
            </ctwa:AnimationSet>
        </ctwa:Explicit.Animations>
        <TextBlock Name="textBlock"
            FontSize="20"
            Text="🦙 Text">
            <ctwa:Explicit.Animations>
                <ctwa:AnimationSet x:Name="fadeOutAnimationSet">
                    <ctwa:OpacityAnimation
                        Delay="0"
                        EasingMode="EaseOut"
                        EasingType="Linear"
                        Duration="00:00:01"
                        From="1"
                        To="0" />
                </ctwa:AnimationSet>
                <ctwa:AnimationSet x:Name="fadeInAnimationSet">
                    <ctwa:OpacityAnimation
                        Delay="0"
                        EasingMode="EaseOut"
                        EasingType="Linear"
                        Duration="00:00:01"
                        From="0"
                        To="1" />
                </ctwa:AnimationSet>
            </ctwa:Explicit.Animations>
        </TextBlock>
        <mxi:Interaction.Behaviors>
            <mxic:EventTriggerBehavior EventName="Click">
                <mxic:ChangePropertyAction
                    TargetObject="{Binding ElementName=textBlock}"
                    PropertyName="Foreground"
                    Value="White" />
                <ctwb:StartAnimationAction Animation="{Binding ElementName=moveAnimationSet}" />
            </mxic:EventTriggerBehavior>
        </mxi:Interaction.Behaviors>
    </Button>
</Page>

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

<Page x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

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

xmlns:mxic="using:Microsoft.Xaml.Interactions.Core"

xmlns:mxi="using:Microsoft.Xaml.Interactivity"

xmlns:ctwa="using:CommunityToolkit.WinUI.Animations"

xmlns:ctwb="using:CommunityToolkit.WinUI.Behaviors"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Button

HorizontalAlignment="Center"

VerticalAlignment="Center"

Width="150"

Height="100">

<ctwa:Explicit.Animations>

<ctwa:AnimationSet x:Name="moveAnimationSet"

IsSequential="True">

<ctwa:StartAnimationActivity Animation="{Binding ElementName=fadeOutAnimationSet}" />

<ctwa:InvokeActionsActivity>

<mxic:ChangePropertyAction

TargetObject="{Binding ElementName=textBlock}"

PropertyName="Foreground"

Value="Purple" />

</ctwa:InvokeActionsActivity>

<ctwa:StartAnimationActivity

Animation="{Binding ElementName=fadeInAnimationSet}"

Delay="00:00:02" />

</ctwa:AnimationSet>

</ctwa:Explicit.Animations>

<TextBlock Name="textBlock"

FontSize="20"

Text="🦙 Text">

<ctwa:Explicit.Animations>

<ctwa:AnimationSet x:Name="fadeOutAnimationSet">

<ctwa:OpacityAnimation

Delay="0"

EasingMode="EaseOut"

EasingType="Linear"

Duration="00:00:01"

From="1"

To="0" />

</ctwa:AnimationSet>

<ctwa:AnimationSet x:Name="fadeInAnimationSet">

<ctwa:OpacityAnimation

Delay="0"

EasingMode="EaseOut"

EasingType="Linear"

Duration="00:00:01"

From="0"

To="1" />

</ctwa:AnimationSet>

</ctwa:Explicit.Animations>

</TextBlock>

<mxi:Interaction.Behaviors>

<mxic:EventTriggerBehavior EventName="Click">

<mxic:ChangePropertyAction

TargetObject="{Binding ElementName=textBlock}"

PropertyName="Foreground"

Value="White" />

<ctwb:StartAnimationAction Animation="{Binding ElementName=moveAnimationSet}" />

</mxic:EventTriggerBehavior>

</mxi:Interaction.Behaviors>

</Button>

</Page>

TestProject.zip