Why won't my WPF XAML Grid TranslateTransform.X ?

Question

I'm able to change the width/height of the grid using this, so why won't it 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 clicked.

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've tried many different Canvas.Left values, to no avail.

Answer 1

You will have to define a TranslateTransform object as the RenderTransform for the Grid before you can change its values:

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

I hope it works this way. Good luck!

Answer 2

Was having the same issue, suggested solution works a treat! Thanks