[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] UIElementExtensions 엘리먼트 : VisualFactory 첨부 속성을 사용해 PipelineVisualFactory 객체 설정하기

■ UIElementExtensions 엘리먼트의 VisualFactory 첨부 속성을 사용해 PipelineVisualFactory 객체를 설정하는 방법을 보여준다.

※ 이 예제 코드에서 사용된 UIElementExtensions 엘리먼트는 CommunityToolkit.WinUI.Media 누겟(버전 : 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"
    xmlns:ctwm="using:CommunityToolkit.WinUI.Media"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Button
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Width="100"
        Height="100"
        Content="Start">
        <mxi:Interaction.Behaviors>
            <mxic:EventTriggerBehavior EventName="Click">
                <ctwb:StartAnimationAction Animation="{x:Bind buttonAnimationSet}" />
            </mxic:EventTriggerBehavior>
        </mxi:Interaction.Behaviors>
        <ctwm:UIElementExtensions.VisualFactory>
            <ctwm:PipelineVisualFactory Source="{ctwm:BackdropSource}">
                <ctwm:BlurEffect x:Name="blurEffect"
                    Amount="0"
                    IsAnimatable="True" />
                <ctwm:SaturationEffect x:Name="saturationEffect"
                    Value="1"
                    IsAnimatable="True" />
                <ctwm:ExposureEffect x:Name="exposureEffect"
                    Amount="0"
                    IsAnimatable="True"/>
            </ctwm:PipelineVisualFactory>
        </ctwm:UIElementExtensions.VisualFactory>
        <ctwa:Explicit.Animations>
            <ctwa:AnimationSet x:Name="buttonAnimationSet">
                <ctwa:AnimationScope
                    Duration="00:00:01"
                    EasingMode="EaseOut">
                    <ctwa:ScaleAnimation
                        From="1.1"
                        To="1" />
                    <ctwa:BlurEffectAnimation
                        Target="{x:Bind blurEffect}"
                        From="32"
                        To="0" />
                    <ctwa:SaturationEffectAnimation
                        Target="{x:Bind saturationEffect}"
                        From="0"
                        To="1" />
                    <ctwa:ExposureEffectAnimation
                        Target="{x:Bind exposureEffect}"
                        From="1"
                        To="0" />
                </ctwa:AnimationScope>
            </ctwa:AnimationSet>
        </ctwa:Explicit.Animations>
    </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"

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

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Button

HorizontalAlignment="Center"

VerticalAlignment="Center"

Width="100"

Height="100"

Content="Start">

<mxi:Interaction.Behaviors>

<mxic:EventTriggerBehavior EventName="Click">

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

</mxic:EventTriggerBehavior>

</mxi:Interaction.Behaviors>

<ctwm:UIElementExtensions.VisualFactory>

<ctwm:PipelineVisualFactory Source="{ctwm:BackdropSource}">

<ctwm:BlurEffect x:Name="blurEffect"

Amount="0"

IsAnimatable="True" />

<ctwm:SaturationEffect x:Name="saturationEffect"

Value="1"

IsAnimatable="True" />

<ctwm:ExposureEffect x:Name="exposureEffect"

Amount="0"

IsAnimatable="True"/>

</ctwm:PipelineVisualFactory>

</ctwm:UIElementExtensions.VisualFactory>

<ctwa:Explicit.Animations>

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

<ctwa:AnimationScope

Duration="00:00:01"

EasingMode="EaseOut">

<ctwa:ScaleAnimation

From="1.1"

To="1" />

<ctwa:BlurEffectAnimation

Target="{x:Bind blurEffect}"

From="32"

To="0" />

<ctwa:SaturationEffectAnimation

Target="{x:Bind saturationEffect}"

From="0"

To="1" />

<ctwa:ExposureEffectAnimation

Target="{x:Bind exposureEffect}"

From="1"

To="0" />

</ctwa:AnimationScope>

</ctwa:AnimationSet>

</ctwa:Explicit.Animations>

</Button>

</Page>

TestProject.zip