Page 1 of 1

Can't get TranslateTransform to animate

Posted: 15 Aug 2019, 19:09
by darthmaule2
I'm trying to animate the Y property of a RenderTransform...
                           
<Rectangle.RenderTransform>
   <TranslateTransform x:Name="ToggleButtonTransform"/>
</Rectangle.RenderTransform>
Like this...
                <EventTrigger RoutedEvent="FrameworkElement.PreviewMouseUp">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimationUsingKeyFrames 
                                Storyboard.TargetProperty="(TranslateTransform.Y)" 
                                Storyboard.TargetName="ToggleButtonTransform">
                                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="10"/>
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
I know the event is firing, because I can animate other elements in the xaml, just not the RenderTransform. I've tried several different way to do this without any luck. Above works in WPF.

Full code below:
<Button x:Class="Controls.SoftButton.SBToggleButton"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:Controls.SoftButton"
             xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"        
             PreviewMouseDown="OnPreviewMouseDown"
             Click="OnClick"
             x:Name="toggleButton">
    <Button.Resources>

        <SolidColorBrush x:Key="SoftButtonBorderBrush" Color="#999C9F"/>
        <SolidColorBrush x:Key="SoftButtonBackgroundBrush" Color="#292A2F"/>

        <Storyboard x:Key="TapDownStoryboard" Completed="TapDownStoryboard_Completed">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(TranslateTransform.Y)" Storyboard.TargetName="ToggleButtonTransform">
                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="36.5"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>

        <Storyboard x:Key="TapUpStoryboard" Completed="TapUpStoryboard_Completed">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(TranslateTransform.Y)" Storyboard.TargetName="ToggleButtonTransform">
                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>

        <ControlTemplate x:Key="SBToggleButtonTemplate" TargetType="{x:Type local:SBToggleButton}">
            <Grid Background="Transparent">
                <Path Data="M329.70457,369.13358 C329.70457,369.13358 326.91559,369.90953 326.8275,371.5696 326.58877,376.06831 326.39655,451.44568 326.39655,451.44568 326.39655,451.44568 326.16828,455.44041 330.27998,455.42025 334.74175,455.39838 393.00021,455.54846 393.00021,455.54846 393.00021,455.54846 396.88462,455.98017 396.88419,452.08673 396.88395,449.89213 397.02806,371.44139 397.02806,371.44139 397.02806,371.44139 395.40692,369.13358 394.00713,369.13358 389.98284,369.13358 329.70457,369.13358&#xd;&#xa;329.70457,369.13358 z"
                      Stretch="Fill" Fill="#999C9F" StrokeThickness="6" Width="71.102" Height="84.411" >
                    <!-- BDMTODO: Put this back when it's implemented in Noesis 3.0.0 scheduled for release in 2020-03-01
                    <Path.Effect>
                        <BlurEffect/>
                    </Path.Effect>-->
                    <Path.Stroke>
                        <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
                            <GradientStop Color="#FF040404"/>
                            <GradientStop Color="#FF363636"/>
                        </LinearGradientBrush>
                    </Path.Stroke>
                </Path>
                <Path Data="M334.55108,372.37644 C334.55108,372.37644 331.28121,372.48244 330.96431,376.42551 330.50754,382.10886 330.8598,448.46888 330.8598,448.46888 330.8598,448.46888 330.64885,452.94448 335.39494,452.94491 341.87893,452.94549 387.3909,453.15805 387.3909,453.15805 387.3909,453.15805 390.97716,453.15829 391.08263,449.10831 391.23377,443.30469 391.08261,375.89294 391.08261,375.89294 391.08261,375.89294 391.39983,372.16379 386.5476,372.1633 378.01039,372.16245 334.55108,372.37644&#xd;&#xa;334.55108,372.37644 z"
                      Stretch="Fill" StrokeThickness="4" OpacityMask="Black" Width="76.287" Height="90" Stroke="{StaticResource SoftButtonBorderBrush}">
                </Path>
                <Border Height="70.5" Width="57.8" CornerRadius="5" Background="{StaticResource SoftButtonBackgroundBrush}">
                    <Grid>
                        <Rectangle x:Name="toggleRect" Width="56" Height="33" VerticalAlignment="Top" Margin="0, 0.5, 0, 0" RadiusX="5" RadiusY="5"
                               Fill="{StaticResource SoftButtonBorderBrush}" RenderTransformOrigin="0,0">
                            <Rectangle.Stroke>
                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                    <GradientStop Color="#FF999C9F"/>
                                    <GradientStop Color="#FFA6A4A4"/>
                                </LinearGradientBrush>
                            </Rectangle.Stroke>
                            <Rectangle.RenderTransform>
                                <TranslateTransform x:Name="ToggleButtonTransform"/>
                            </Rectangle.RenderTransform>
                        </Rectangle>
                    </Grid>
                </Border>
            </Grid>
            <ControlTemplate.Triggers>
                <EventTrigger RoutedEvent="FrameworkElement.PreviewMouseUp">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimationUsingKeyFrames 
                                Storyboard.TargetProperty="(TranslateTransform.Y)" 
                                Storyboard.TargetName="ToggleButtonTransform">
                                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="10"/>
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>

        <Style TargetType="{x:Type local:SBToggleButton}">
            <Setter Property="Template" Value="{StaticResource SBToggleButtonTemplate}" />
        </Style>

    </Button.Resources>
</Button>

Re: Can't get TranslateTransform to animate

Posted: 19 Aug 2019, 21:22
by sfernandez
I was able to reproduce the problem. It is a limitation in our current animation system, that cannot animate a property if the target is a frozen Freezable (which happens for freezables inside templates).

This problem has an easy workaround, just set a name in the transform owner and target that element in the animation:
<Rectangle x:Name="toggleRect" ...>
  <Rectangle.RenderTransform>
    <TranslateTransform/>
  <Rectangle.RenderTransform>
</Rectangle>
<Storyboard>
  <DoubleAnimationUsingKeyFrames 
    Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)" 
    Storyboard.TargetName="toggleRect">
      <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="36"/>
  </DoubleAnimationUsingKeyFrames>
</Storyboard>