How to apply a RenderTransform.TranslateTransform on a Grid using a Storyboard?

Question

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?

Answer 1

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:

MSDN: Transforms Overview

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();            
}