wpfxamlanimationeventtriggerloaded

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

I have an UserControl with RenderTransform set to a ScaleTransform. I try to animate its ScaleX and ScaleY properties in a Storyboard inside an EventTrigger with RoutedEvent=Loaded, but the animation does not take place.

I have tried changing the Duration of the DoubleAnimations, I tried to explicitly set the target properties of the animations with the long syntax (e.g. (ScaleTransform.ScaleX) instead off ScaleX), I tried to change the initial values set to the ScaleTransform when it is constructed in markup.

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>

The animations do not work, instead the animations do not start at all and the initial values set when constructing the ScaleTransform in XAML are shown in the UI.

Screenshot

Screenshot

Solution

  • You don't need to set Storyboard.Target.

    Just directly animate the properties of the ScaleTransform object in RenderTransform:

    <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>

    Alternatively, set 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>