wpf - 如何根据控件的属性(Top/Tabstop)设置WPF动画BeginTime

Question

我有一个 WPF 应用程序，它在垂直堆栈面板中有一系列按钮，类似于 DVR 菜单的外观。我想出了如何制作动画，当加载每个新菜单页面时，按钮/控件都{unfade，fall，deblur，whatever}存在，这很好，但有点太统一了。我真正想要的是让每个按钮在稍微不同的时间开始动画，这取决于它的位置或制表符属性。因此，例如顶部按钮将是第一个开始，然后是下一个按钮，等等，直到底部按钮，每次开始之间可能有 50 毫秒的延迟，(但这样第一个按钮不必在第二个按钮之前完成开始)。当然我可以为每个按钮制作不同的动画，但我希望有一个更优雅的解决方案。我看不到将任何控件的属性加载到 Storyboard 的 BeginTime 中的方法。有没有只使用 XAML 的好方法，或者这样的事情需要代码隐藏？如果是后者，是否可以将其打包成一个 Behavior 并能够在以后以声明方式加载它，还是我永远坚持使用命令式代码？

Answer 1

简短的回答是否定的(据我所知)，您无法完全仅使用 XAML 完成您所要求的操作，这就是原因。

虽然在 WPF 中有多种制作动画的方法，但使用 XAML 制作动画的唯一方法是使用 Storyboard。跨元素共享 Storyboard 的唯一方法是将其打包到资源中，例如 Style、ControlTemplate 或 DataTemplate。但是，为了将 Storyboard 用作资源，它必须是 Freezable，这意味着它不能包含将动画 BeginTime 与动画目标的属性(例如 TabIndex 或一些按钮的其他属性)。即使您可以以某种方式将动画的 BeginTime 绑定(bind)到 Button 的属性，您仍然需要使用代码隐藏来编写 ValueConverter 以将 Button 属性值转换为 TimeSpan 值(您想要的 50 毫秒累积延迟)。

所以为了完全做你想做的事，你需要使用代码隐藏，如下例所示:

XAML:

<StackPanel HorizontalAlignment="Left" Width="100" Loaded="StackPanel_Loaded">
    <Button Content="Button1"/>
    <Button Content="Button2"/>
    <Button Content="Button3"/>
    <Button Content="Button4"/>
    <Button Content="Button5"/>
    <Button Content="Button6"/>
    <Button Content="Button7"/>
    <Button Content="Button8"/>
    <Button Content="Button9"/>
    <Button Content="Button10"/>
</StackPanel>

代码隐藏:

private void StackPanel_Loaded(object sender, RoutedEventArgs e)
{
    StackPanel stackPanel = sender as StackPanel;
    DoubleAnimation fadeInAnimation = new DoubleAnimation(1.0, new Duration(TimeSpan.FromMilliseconds(200)));
    for (int i = 0; i < stackPanel.Children.Count; i++)
    {
        fadeInAnimation.BeginTime = TimeSpan.FromMilliseconds(i * 50);
        stackPanel.Children[i].Opacity = 0.0;
        stackPanel.Children[i].BeginAnimation(UIElement.OpacityProperty, (AnimationTimeline)fadeInAnimation.GetAsFrozen());
    }
}

话虽如此，有一些方法可以仅使用 XAML 来近似您所需的行为。例如，您可以使用 LinearGradientBrush OpacityMask 覆盖 StackPanel，并使用单个 Storyboard 对其进行动画处理，如下所示:

XAML:

<StackPanel HorizontalAlignment="Left" Width="100">
    <StackPanel.OpacityMask>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="Black"/>
            <GradientStop x:Name="TransparentGradient" Color="Transparent"/>
        </LinearGradientBrush>
    </StackPanel.OpacityMask>
    <StackPanel.Triggers>
        <EventTrigger RoutedEvent="Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation
                        Storyboard.TargetName="TransparentGradient" Storyboard.TargetProperty="Offset"
                        To="1.0" Duration="0:0:0.5"/>
                    <ColorAnimation
                        Storyboard.TargetName="TransparentGradient" Storyboard.TargetProperty="Color"
                        To="Black" BeginTime="0:0:0.5" Duration="0:0:0.5"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </StackPanel.Triggers>
    <Button Content="Button1"/>
    <Button Content="Button2"/>
    <Button Content="Button3"/>
    <Button Content="Button4"/>
    <Button Content="Button5"/>
    <Button Content="Button6"/>
    <Button Content="Button7"/>
    <Button Content="Button8"/>
    <Button Content="Button9"/>
    <Button Content="Button10"/>
</StackPanel>

这会给你一个很好的从上到下的淡入效果。其他效果也可以通过一点创意来实现，但有一点建议:尽量避免花费太多时间来寻找复杂的 XAML 解决方案，当你可以达到预期的效果时只需几行代码。

编码愉快!