Can't get TranslateTransform to animate
Posted: 15 Aug 2019, 19:09
I'm trying to animate the Y property of a RenderTransform...
Like this...
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:
Code: Select all
<Rectangle.RenderTransform>
<TranslateTransform x:Name="ToggleButtonTransform"/>
</Rectangle.RenderTransform>
Code: Select all
<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>
Full code below:
Code: Select all
<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
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
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>