Анимация изменения размера с помощью раскадровки

Question

Я хочу изменить размер ScrollViewer с помощью раскадровки, но он не анимируется, он просто меняет размер 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(); 
     } 

Надеюсь, это поможет, ура!