¿Hay alguna forma de animar la propiedad Margen en aplicaciones de estilo metro

Question

? Estoy intentando hacer algo de animación del código usando la clase Storyboard. No hay clase de Animación de Espesor. Y también intenté construir el guión gráfico con Blend, pero no funciona allí. simplemente salta directamente al nuevo valor, sin animación suave.

ACTUALIZACIÓN: He intentado utilizar la transformación TranslateX. Pero cuando lo uso en una imagen, las imágenes se recortan. Lo que trato de hacer es animar una imagen grande muy lenta dentro de una cuadrícula pequeña, por lo que tiene este efecto (similar a la que se encuentra dentro de la Galería de Zune y Windows Phone). Una vez que la imagen se abre comienzo a la animación, esta es mi código:

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

Xaml:

<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"> 
       <Grid.ItemTemplate> 
        <DataTemplate> 
         <Grid Height="250" VariableSizedWrapGrid.ColumnSpan="{Binding ColumnSpan}" Margin="2"> 
          <Image ImageOpened="Image_ImageOpened_1" Stretch="UniformToFill" Source="{Binding ImageHQ}" > 
           <Image.RenderTransform> 
            <CompositeTransform /> 
           </Image.RenderTransform> 
          </Image> 
          <StackPanel VerticalAlignment="Bottom" Background="#AA000000"> 
           <TextBlock Margin="5,5,5,0" FontSize="26" Text="{Binding Name,Mode=OneWay}" FontFamily="Arial Black" /> 
           <TextBlock Margin="5,0,5,5" FontSize="24" Text="{Binding Section,Mode=OneWay}" Foreground="{Binding SectionColor,Mode=OneWay}" /> 
          </StackPanel> 
         </Grid> 
        </DataTemplate> 
       </Grid.ItemTemplate> 
</Grid> 

Answer 1

En primer lugar, la animación de la margen no es una buena idea (que habrá de ser actualizada árbol entero). ¿Qué tipo de efecto quieres lograr? ¿Quieres mover el objeto? En caso afirmativo, utilice DoubleAnimation para cambiar TranslateTransform.

No he hecho esto en Windows 8, pero apuesto a que es casi lo mismo que en WPF. Es lo mejor para definir la animación en XAML

<Window.Resources> 

    <Storyboard x:Key="mainInAnimation"> 
     <DoubleAnimation Storyboard.TargetName="panelTrans" 
           Storyboard.TargetProperty="X" 
           BeginTime="0:0:0.2" 
           Duration="0:0:0.3" To="0" > 
      <DoubleAnimation.EasingFunction> 
       <ExponentialEase EasingMode="EaseOut" /> 
      </DoubleAnimation.EasingFunction> 
     </DoubleAnimation> 
    </Storyboard> 

Luego hay que hacer que transformar al panel

<StackPanel Name="leftPanel" ... > 
     <StackPanel.RenderTransform> 
      <TranslateTransform x:Name="panelTrans" X="-10"></TranslateTransform> 
     </StackPanel.RenderTransform> 

Para iniciar la animación en el código (prefiero esta manera)

 Storyboard anim = (Storyboard)this.Resources["mainInAnimation"]; 
     anim.Begin(); 

Answer 2

I enfrentó exactamente el mismo problema hoy. Para solucionarlo, hice lo siguiente:

Mi Storyboard primero restablece el margen a lo que yo quería que fuera y lo contrarresta estableciendo TranslateTransform en el opuesto. Esto tiene el efecto de no tener ningún efecto, pero ahora puedo lograr mi animación en TranslateTransform y la imagen muestra.

<Storyboard x:Name="rotateViews"> 
    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="root"> 
     <DiscreteObjectKeyFrame KeyTime="0"> 
      <DiscreteObjectKeyFrame.Value> 
       <Thickness>0,-100,0,0</Thickness> 
      </DiscreteObjectKeyFrame.Value> 
     </DiscreteObjectKeyFrame> 
    </ObjectAnimationUsingKeyFrames> 
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="root"> 
     <EasingDoubleKeyFrame KeyTime="0" Value="100"/> 
     <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0"> 
      <EasingDoubleKeyFrame.EasingFunction> 
       <CubicEase EasingMode="EaseInOut"/> 
      </EasingDoubleKeyFrame.EasingFunction> 
     </EasingDoubleKeyFrame> 
    </DoubleAnimationUsingKeyFrames> 
</Storyboard>