Why is my WPF XAML Grid TranslateTransform.X?

Question

I can change the width / height of the grid using this, so why not work when I use (Grid.RenderTransform) .TranslateTransform.X as such:

<Window.Triggers>
 <EventTrigger RoutedEvent="Button.Click" SourceName="button">
  <BeginStoryboard>
    <Storyboard>
      <DoubleAnimation  
      Storyboard.TargetProperty="(Grid.RenderTransform).(TranslateTransform.X)" 
      From="0" To="200" Storyboard.TargetName="grid" Duration="0:0:2"
      />
    </Storyboard>
  </BeginStoryboard>
 </EventTrigger>
</Window.Triggers>

The application loads, etc., but nothing happens when the button is pressed.

Here is the XAML for my grid:

    <Grid x:Name="grid" Height="714" Canvas.Left="240" Canvas.Top="8" Width="360" RenderTransformOrigin="0.5,0.5">
         <Grid.Background>
          <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
           <GradientStop Color="Black" Offset="0"/>
           <GradientStop Color="White" Offset="1"/>
          </LinearGradientBrush>
         </Grid.Background>
         <Grid.ColumnDefinitions>
          <ColumnDefinition Width="0*"/>
          <ColumnDefinition/>
         </Grid.ColumnDefinitions>
     </Grid>

Note that I tried many different Canvas.Left values, but to no avail.

Answer 1

You will need to define the object TranslateTransformas RenderTransformfor the grid before you can change its values:

<Grid x:Name="grid" ... >
    <Grid.RenderTransform>
        <TranslateTransform X="0" Y="0" />
    </Grid.RenderTransform>
    <!-- ... -->
</Grid>

I hope this works. Good luck