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格式）; here

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

希望这有帮助，欢呼！

使用Storyboard动画大小更改

1 个答案: