メトロスタイルのアプリでMarginプロパティをアニメートする方法はありますか

Question

Storyboardクラスを使用してコードからアニメーションを作成しようとしています。 ThicknessAnimationクラスはありません。そして、私もBlendを使ってストーリーボードを作ろうとしましたが、そこではうまくいきません。新しい値に直接ジャンプするだけで、滑らかなアニメーションはありません。

更新：私はTranslateX変換を使ってみました。しかし、私がイメージ上でそれを使用すると、イメージはクリップされます。 私がしようとしているのは小さなグリッド内で大きな画像をアニメートすることです。そのため、ZuneとWindows Phone Galleryのような効果があります。画像は私がアニメーションを開始開いたら、これは私のコードです：

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

まず第一に、マージンをアニメーション化すること（それはツリー全体を更新する必要があります）良いアイデアではありません。どのような効果を達成したいですか？オブジェクトを移動しますか？はいの場合は、DoubleAnimationを使用してTranslateTransformを変更します。

Windows 8ではこれを行っていませんが、WPFとほぼ同じです。これは、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> 

でアニメーションを定義することが最善です次に、あなたは私が

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

Answer 2

（私はこの方法を好む）コードでアニメーションを開始するには、パネル

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

に変換をレンダリングする必要があります今日もまったく同じ問題に直面していました。それを修正するために、私は次のようにしました：

私のストーリーボードは、私が望むものにマージンをリセットし、TranslateTransformをopositeに設定することによってそれに対抗します。これは効果がないという効果がありますが、私はTranslateTransformとイメージでアニメーションを実現できます。

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