How to apply a RenderTransform.TranslateTransform on a Grid using a Storyboard?
21,882
For me, this example works. Please note to Grid.RenderTransform
:
XAML
<Window.Resources>
<Storyboard x:Key="TestStoryboard">
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)"
To="0"/>
<DoubleAnimation Storyboard.TargetProperty="Opacity"
From="0"
To="1" />
</Storyboard>
</Window.Resources>
<Grid Name="MyGrid"
Background="AliceBlue">
<Grid.RenderTransform>
<TranslateTransform X="50" Y="0" />
</Grid.RenderTransform>
<Button VerticalAlignment="Top"
HorizontalAlignment="Left"
Margin="10"
Content="Click"
Click="Button_Click" />
</Grid>
Code-behind
private void Button_Click(object sender, RoutedEventArgs e)
{
Storyboard myStoryboard = (Storyboard)this.Resources["TestStoryboard"];
Storyboard.SetTarget(myStoryboard.Children.ElementAt(0) as DoubleAnimation, MyGrid);
Storyboard.SetTarget(myStoryboard.Children.ElementAt(1) as DoubleAnimation, MyGrid);
myStoryboard.Begin();
}
For more information please see:
Edit
Also you can create TranslateTransform
and set for RenderTransform
in code-behind like this:
private void Button_Click(object sender, RoutedEventArgs e)
{
Storyboard myStoryboard = (Storyboard)this.Resources["TestStoryboard"];
TranslateTransform myTranslate = new TranslateTransform();
myTranslate.X = 50;
myTranslate.Y = 0;
MyGrid.RenderTransform = myTranslate;
Storyboard.SetTarget(myStoryboard.Children.ElementAt(0) as DoubleAnimation, MyGrid);
Storyboard.SetTarget(myStoryboard.Children.ElementAt(1) as DoubleAnimation, MyGrid);
myStoryboard.Begin();
}
Author by
Audio
Updated on July 09, 2022Comments
-
Audio almost 2 years
In my application resources I have defined the following
Storyboard
:App.xaml
<Storyboard x:Key="DefaultSB" Name="DefaultSB" x:Shared="false"> <DoubleAnimation Duration="0:0:1" From="100" To="-100" Storyboard.TargetProperty="RenderTransform.(TranslateTransform.Y)" /> <DoubleAnimation Duration="0:0:0.2" From="0" To="1" Storyboard.TargetProperty="Opacity" /> </Storyboard>
In my code behind I apply the
Storyboard
to a Grid Control:Storyboard myStoryboard = (Storyboard)App.Current.Resources["DefaultSB"]; Storyboard.SetTarget(myStoryboard.Children.ElementAt(0) as DoubleAnimation, Editor); Storyboard.SetTarget(myStoryboard.Children.ElementAt(1) as DoubleAnimation, Editor); myStoryboard.Begin();
Now the
Opacity
change happens, but the RenderTransform is not applied. I also tried(UIElement.RenderTransform).TranslateTransform.Y
but that didn't work either.How can I animate the TranslateTransform?
-
Audio about 10 yearsSo the conclusion is that Storyboards can only animate properties which have been explicitly set in XAML?
-
Fᴀʀʜᴀɴ Aɴᴀᴍ over 8 yearsAlso, another thing to note is that if you set the properties explicitly using the designer then you will get an additional 'TransformGroup' Element acting as a parent of the 'TranslateTransform' Element. That is what caused the problem for me!