Czy istnieje sposób na animowanie właściwości Margin w aplikacjach w stylu Metro?

Question

Próbuję zrobić animację z kodu przy użyciu klasy Storyboard. Nie ma klasy ThicknessAnimation. Próbowałem też stworzyć storyboard za pomocą Blend, to nie działa tam. po prostu przeskakuje bezpośrednio do nowej wartości, bez płynnej animacji.

AKTUALIZACJA: Próbowałem użyć transformacji TłumaczX. Ale kiedy używam go na obrazku, obrazy są przycinane. Co próbuję zrobić, to animować duży obraz bardzo wolno w małej siatce, więc ma taki efekt (podobny do tego w Galerii Zune i Windows Phone). Gdy obraz otwiera zacznę animację, jest to mój kod:

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

pierwsze, animowanie margines nie jest dobrym pomysłem (to będzie wymagać aktualizacji całego drzewa). Jaki efekt chcesz osiągnąć? Czy chcesz przenieść obiekt? Jeśli tak, użyj DoubleAnimation, aby zmienić TranslateTransform.

Nie zrobiłem tego w Windows 8, ale zakład jest prawie taki sam jak w WPF. To najlepszy zdefiniować animację w 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> 

Następnie trzeba uczynić przekształcić do panelu

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

Aby uruchomić animację w kodzie (wolę ten sposób)

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

Answer 2

I w obliczu tego samego problemu dzisiaj. Aby to naprawić, zrobiłem co następuje:

Mój Storyboard najpierw resetuje margines do tego, co chciałem, i przeciwstawiam go ustawiając TranslateTransform na oposite. Efektem jest brak efektu, ale teraz mogę osiągnąć animację w programie TranslateTransform i obrazach.

<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>