[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] TintEffect 엘리먼트 : TINT 색상 효과 설정하기

■ TintEffect 엘리먼트를 사용해 TINT 색상 효과를 설정하는 방법을 보여준다.

▶ 예제 코드 (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"
xmlns:ctwm="using:CommunityToolkit.WinUI.Media"

<Border Height="280">
    <Image
        VerticalAlignment="Center"
        Source="ms-appx:///Assets/Bloom.jpg" />
    <ctwm:UIElementExtensions.VisualFactory>
        <ctwm:PipelineVisualFactory>
            <ctwm:TintEffect x:Name="tintEffect"
                IsAnimatable="True" />
        </ctwm:PipelineVisualFactory>
    </ctwm:UIElementExtensions.VisualFactory>
    <ctwa:Explicit.Animations>
        <ctwa:AnimationSet x:Name="animationSet"
            IsSequential="True">
            <ctwa:ColorEffectAnimation
                Target="{x:Bind tintEffect}"
                EasingMode="EaseOut"
                EasingType="Linear"
                Duration="00:00:02"
                From="Transparent"
                To="#803300ff" />
            <ctwa:ColorEffectAnimation
                Target="{x:Bind tintEffect}"
                EasingMode="EaseOut"
                EasingType="Linear"
                Duration="00:00:02"
                From="#803300FF"
                To="Transparent" />
        </ctwa:AnimationSet>
    </ctwa:Explicit.Animations>
    <mxi:Interaction.Behaviors>
        <mxic:EventTriggerBehavior EventName="Loaded">
            <ctwb:StartAnimationAction Animation="{x:Bind animationSet}" />
        </mxic:EventTriggerBehavior>
    </mxi:Interaction.Behaviors>
</Border>

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"

xmlns:ctwm="using:CommunityToolkit.WinUI.Media"

<Image

VerticalAlignment="Center"

Source="ms-appx:///Assets/Bloom.jpg" />

<ctwm:UIElementExtensions.VisualFactory>

<ctwm:PipelineVisualFactory>

<ctwm:TintEffect x:Name="tintEffect"

IsAnimatable="True" />

</ctwm:PipelineVisualFactory>

</ctwm:UIElementExtensions.VisualFactory>

<ctwa:Explicit.Animations>

<ctwa:AnimationSet x:Name="animationSet"

IsSequential="True">

<ctwa:ColorEffectAnimation

Target="{x:Bind tintEffect}"

EasingMode="EaseOut"

EasingType="Linear"

Duration="00:00:02"

From="Transparent"

To="#803300ff" />

<ctwa:ColorEffectAnimation

Target="{x:Bind tintEffect}"

EasingMode="EaseOut"

EasingType="Linear"

Duration="00:00:02"

From="#803300FF"

To="Transparent" />

</ctwa:AnimationSet>

</ctwa:Explicit.Animations>

<mxi:Interaction.Behaviors>

<mxic:EventTriggerBehavior EventName="Loaded">

<ctwb:StartAnimationAction Animation="{x:Bind animationSet}" />

</mxic:EventTriggerBehavior>

</mxi:Interaction.Behaviors>

</Border>