title: Is there a way to animate the Margin property in metro style apps
body: <p>I'm trying to do some animation from code using the Storyboard class. There is no ThicknessAnimation class. And I also tried to build the storyboard using Blend, it doesnt work there. it just jump directly to the new value, no smooth animation.</p>
  
  <p>UPDATE: I tried using the TranslateX transform. But when I use it on an image, the images get clipped.
  What I'm trying to do is animate a big image very slow inside a small grid, so it has this effect (similar to the one inside the Zune and Windows Phone Gallery). Once the image opens I start the animation, this is my code:</p>
  
  <pre><code>private void Image_ImageOpened_1(object sender, RoutedEventArgs e)
      {
          var img = sender as Image;
  
          Storyboard sb = new Storyboard();
          var doubleAnimationx = new DoubleAnimation() { To = -100, SpeedRatio = 0.1, From = 0 };
          Storyboard.SetTarget(doubleAnimationx, img);
          Storyboard.SetTargetProperty(doubleAnimationx, "(UIElement.RenderTransform).(CompositeTransform.TranslateX)");
          sb.Children.Add(doubleAnimationx);
          sb.Begin();
      }
  </code></pre>
  
  <p>Xaml:</p>
  
  <pre><code>&lt;Grid  IsSwipeEnabled="True" ItemsSource="{Binding Source={StaticResource cvs1}}" ItemClick="ItemsGridView_ItemClick_1"
                              x:Name="ItemsGridView" Margin="50,20,116,46" SelectionMode="None" IsItemClickEnabled="True"
                              AutomationProperties.AutomationId="ItemsGridView" 
                              AutomationProperties.Name="Grouped Items"&gt;
                  &lt;Grid.ItemTemplate&gt;
                      &lt;DataTemplate&gt;
                          &lt;Grid Height="250" VariableSizedWrapGrid.ColumnSpan="{Binding ColumnSpan}" Margin="2"&gt;
                              &lt;Image ImageOpened="Image_ImageOpened_1" Stretch="UniformToFill" Source="{Binding ImageHQ}" &gt;
                                  &lt;Image.RenderTransform&gt;
                                      &lt;CompositeTransform /&gt;
                                  &lt;/Image.RenderTransform&gt;
                              &lt;/Image&gt;
                              &lt;StackPanel VerticalAlignment="Bottom" Background="#AA000000"&gt;
                                  &lt;TextBlock Margin="5,5,5,0" FontSize="26" Text="{Binding Name,Mode=OneWay}" FontFamily="Arial Black" /&gt;
                                  &lt;TextBlock Margin="5,0,5,5" FontSize="24" Text="{Binding Section,Mode=OneWay}" Foreground="{Binding SectionColor,Mode=OneWay}" /&gt;
                              &lt;/StackPanel&gt;
                          &lt;/Grid&gt;
                      &lt;/DataTemplate&gt;
                  &lt;/Grid.ItemTemplate&gt;
  &lt;/Grid&gt;
  </code></pre>