ストーリーボードによるサイズ変更のアニメーション

Question

ストーリーボードを使用してScrollViewerのサイズを変更したいのですが、アニメーション化されていないため、遅れた直後にスクロールビューアのサイズを変更するだけです。

<Storyboard x:Name="ShowMenuStoryboard"> 
      <DoubleAnimation x:Name="changeHeight" 
          Duration="0:0:2" 
          EnableDependentAnimation="True" 
          Storyboard.TargetName="ScrollViewer" 
          Storyboard.TargetProperty="Height" 
          To="500" /> 
</Storyboard> 

<Storyboard x:Name="ShowMenu"> 
     <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="(ScrollViewer.Width)" Storyboard.TargetName="ScrollViewer"> 
      <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="900"/> 
     </DoubleAnimationUsingKeyFrames> 
     <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="(ScrollViewer.Height)" Storyboard.TargetName="ScrollViewer"> 
      <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="640"/> 
     </DoubleAnimationUsingKeyFrames> 

</Storyboard> 

<Storyboard x:Name="ShowSomeThing"> 
      <DoubleAnimation Duration="0:0:0.5" To="640" Storyboard.TargetProperty="(UIElement.Height)" Storyboard.TargetName="ScrollViewer" d:IsOptimized="True"/> 
      <DoubleAnimation Duration="0:0:0.5" To="900" Storyboard.TargetProperty="(UIElement.Width)" Storyboard.TargetName="ScrollViewer" d:IsOptimized="True"/> 

</Storyboard> 

<Storyboard x:Name="MaybeNow"> 
      <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="(UIElement.Width)" Storyboard.TargetName="ScrollViewer" d:IsOptimized="True"> 
       <EasingDoubleKeyFrame KeyTime="0:0:1.0" Value="900"/> 
      </DoubleAnimationUsingKeyFrames> 
      <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="(UIElement.Height)" Storyboard.TargetName="ScrollViewer" d:IsOptimized="True"> 
       <EasingDoubleKeyFrame KeyTime="0:0:1.0" Value="640"/> 
      </DoubleAnimationUsingKeyFrames> 

</Storyboard> 

私が間違っているのは何：

ここで私はこれまで試した変種がありますか？

Answer 1

だから、完全な実装を見ることなく、私はちょうどあなたが実際にTo値を宣言していないが、一方で、あなたはまだいくつかの形でFrom値を必要とするか、それがためにキーフレームを作成することはできませんので、それはそうだという仮定を作ってあげますその間のアニメーション。

以下は簡単な例です。 ScrollViewer自体の高さ/幅の設定に注意してください。これらは継承されたFromの値として機能します。必要に応じて、あなたのストーリーボードに直接または他の方法で組み込むことができます。

ビジュアル出力（不安定なgif形式）。

XAML PoC;

<Grid VerticalAlignment="Center" HorizontalAlignment="Center"> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="Auto"/> 
      <RowDefinition Height="Auto"/> 
     </Grid.RowDefinitions> 
     <Grid.Resources> 
      <Storyboard x:Name="CW_AnimSCSizeSample"> 
       <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" 
              Storyboard.TargetProperty="(FrameworkElement.Width)" 
              Storyboard.TargetName="scrollViewer"> 
        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="500"/> 
       </DoubleAnimationUsingKeyFrames> 
       <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" 
              Storyboard.TargetProperty="(FrameworkElement.Height)" 
              Storyboard.TargetName="scrollViewer"> 
        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="700"/> 
       </DoubleAnimationUsingKeyFrames> 
      </Storyboard> 
     </Grid.Resources> 

     <Button Content="Animate SV Size 1 time" 
       Click="play_CW_AnimSCSizeSample"/> 

     <ScrollViewer x:Name="scrollViewer" Grid.Row="1" 
         Height="200" Width="300" 
         Background="LightBlue" 
         BorderBrush="Blue" BorderThickness="3"/> 


    </Grid> 

の背後にあるコードあなたは.csからストーリーボードを開始します。

private void play_CW_AnimSCSizeSample(object sender, RoutedEventArgs e) 
     { 
      CW_AnimSCSizeSample.Begin(); 
     }