Question

我在WPF应用程序中多次使用故事板动画，我宁愿创建一个我可以编辑的样式而不是多个条目。但是，我需要每次传递对两个特定StackPanel的引用。是否只有XAML解决方案，或者只使用背后的代码？

有问题的变量将是下面引用的datePicker和classPicker StackPanel。

<BeginStoryboard>
  <Storyboard>
    <DoubleAnimation Storyboard.TargetProperty="Opacity" 
                     Storyboard.TargetName="classPicker"
                     From="1.0" To="0" Duration="0:0:0.25"
                     BeginTime="0:0:0"/>
    <DoubleAnimation Storyboard.TargetProperty="Opacity" 
                     Storyboard.TargetName="datePicker"
                     From="0" To="1.0" Duration="0:0:0.25"
                     BeginTime="0:0:0.25"/>
    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="classPicker"                                                                                    
                                   Storyboard.TargetProperty="Visibility">
      <DiscreteObjectKeyFrame KeyTime="0:0:0.25" 
                              Value="{x:Static Visibility.Collapsed}"/>
    </ObjectAnimationUsingKeyFrames>
    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="datePicker"                                                                                
                                   Storyboard.TargetProperty="Visibility">
      <DiscreteObjectKeyFrame KeyTime="0:0:0.25" 
                              Value="{x:Static Visibility.Visible}"/>
    </ObjectAnimationUsingKeyFrames>
  </Storyboard>
</BeginStoryboard>

Answer 1

要使其真正通用，应该创建一个自定义控件，其中包含要与故事板操作交换的控件。

创建控件后，可以在页面上放置1 *个控件，并使其可见并根据需要执行故事板。

Answer 2

按照@ OmegaMan的建议，我创建了一个继承自Button类的自定义控件。使用DependencyProperties，我能够传递XAML中我希望动画影响的元素。

自定义类：

public partial class ButtonWithAnim : Button
{
    public Grid GridToFadeOut
    {
        get { return (Grid)GetValue(GridToFadeOutProperty); }
        set { SetValue(GridToFadeOutProperty, value); }
    }

    // Using a DependencyProperty as the backing store for GridToFadeOut.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty GridToFadeOutProperty =
        DependencyProperty.Register("GridToFadeOut", typeof(Grid), typeof(ButtonWithAnim));

    public Grid GridToFadeIn
    {
        get { return (Grid)GetValue(GridToFadeInProperty); }
        set { SetValue(GridToFadeInProperty, value); }
    }

    // Using a DependencyProperty as the backing store for GridToFadeIn.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty GridToFadeInProperty =
        DependencyProperty.Register("GridToFadeIn", typeof(Grid), typeof(ButtonWithAnim));

    protected override void OnClick()
    {
        ButtonClickHandler();
    }

    public void ButtonClickHandler()
    {
        DoubleAnimation fadeOutAnimation = new DoubleAnimation(1.0, 0.0, new TimeSpan(0, 0, 0, 0, 250));
        DoubleAnimation fadeInAnimation  = new DoubleAnimation(0.0, 1.0, new TimeSpan(0, 0, 0, 0, 250));

        fadeOutAnimation.Completed += (sender, eArgs) =>
        {
            GridToFadeOut.Visibility = Visibility.Collapsed;
            GridToFadeIn.Visibility = Visibility.Visible;
            GridToFadeIn.BeginAnimation(Grid.OpacityProperty, fadeInAnimation);
        };

        GridToFadeOut.BeginAnimation(Grid.OpacityProperty, fadeOutAnimation);
    }
}

XAML

<custom:ButtonWithAnim Content="Test Button" Margin="0,10,25,0"
                               Grid.Row="1" Width="75" 
                               HorizontalAlignment="Right" 
                               GridToFadeOut="{Binding RelativeSource={RelativeSource AncestorType=Grid}}"
                               GridToFadeIn="{Binding ElementName=datePicker}" />

创建接受变量的故事板模板

2 个答案: