如何在加载事件时通过 EventTrigger 制作 ScaleTransform（渲染变换）的仅 XAML 动画？

Question

我有一个 UserControl，RenderTransform 设置为 ScaleTransform。我尝试使用 RoutedEvent=Loaded 在 Storyboard 中为其 ScaleX 和 ScaleY 属性制作动画地点。

我尝试更改 DoubleAnimation 的持续时间，我尝试使用长语法显式设置动画的目标属性（例如 (ScaleTransform.ScaleX) 而不是关闭 ScaleX），我试图在标记中构造时将初始值设置为 ScaleTransform。

MainWindow.xaml

<Window x:Class="cs_wpf_test_18.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:cs_wpf_test_18"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <local:UserControl1/>
    </Grid>
</Window>

UserControl1.xaml

<UserControl x:Class="cs_wpf_test_18.UserControl1"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:cs_wpf_test_18"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800"
             Background="Blue" RenderTransformOrigin="0.5 0.5">

    <UserControl.RenderTransform>
        <ScaleTransform ScaleX="0.5" ScaleY="0.5" x:Name="MyRenderScaleTransform"/>
    </UserControl.RenderTransform>

    <UserControl.Triggers>
        <EventTrigger RoutedEvent="Loaded">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.Target="{Binding ElementName=MyRenderScaleTransform}"
                                         Storyboard.TargetProperty="(ScaleTransform.ScaleX)"
                                         From="0" To="1" Duration="0:0:2">
                            <DoubleAnimation.EasingFunction>
                                <BackEase/>
                            </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>
                        <DoubleAnimation Storyboard.Target="{Binding ElementName=MyRenderScaleTransform}"
                                         Storyboard.TargetProperty="(ScaleTransform.ScaleY)"
                                         From="0" To="1" Duration="0:0:2">
                            <DoubleAnimation.EasingFunction>
                                <BackEase/>
                            </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </UserControl.Triggers>
</UserControl>

动画不工作，相反，动画根本不启动，XAML中构造ScaleTransform时设置的初始值显示在UI中。

截图

Answer 1

不需要设置Storyboard.Target。

直接对RenderTransform中的ScaleTransform对象的属性进行动画处理即可：

<Storyboard>
    <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX"
                     From="0" To="1" Duration="0:0:2">
        <DoubleAnimation.EasingFunction>
            <BackEase/>
        </DoubleAnimation.EasingFunction>
    </DoubleAnimation>
    <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY"
                     From="0" To="1" Duration="0:0:2">
        <DoubleAnimation.EasingFunction>
            <BackEase/>
        </DoubleAnimation.EasingFunction>
    </DoubleAnimation>
</Storyboard>

或者，设置 Storyboard.TargetName:

<Storyboard>
    <DoubleAnimation Storyboard.TargetName="MyRenderScaleTransform"
                     Storyboard.TargetProperty="ScaleX"
                     From="0" To="1" Duration="0:0:2">
        <DoubleAnimation.EasingFunction>
            <BackEase/>
        </DoubleAnimation.EasingFunction>
    </DoubleAnimation>
    <DoubleAnimation Storyboard.TargetName="MyRenderScaleTransform"
                     Storyboard.TargetProperty="ScaleY"
                     From="0" To="1" Duration="0:0:2">
        <DoubleAnimation.EasingFunction>
            <BackEase/>
        </DoubleAnimation.EasingFunction>
    </DoubleAnimation>
</Storyboard>

如何在加载事件时通过 EventTrigger 制作 ScaleTransform（渲染变换）的仅 XAML 动画？

How to make a XAML-only animation of a ScaleTransform (render transform) work via an EventTrigger on event Loaded?

wpf

animation

xaml

eventtrigger

loaded

MainWindow.xaml

UserControl1.xaml

截图