创建接受变量的情节提要模板

Question

I'm using a storyboard animation multiple times in my WPF application, and I would prefer to create one style I can edit rather than multiple entries. However, i need to pass in a reference to two particular StackPanel each time. Is there an XAML only solution to this, or is working with the code behind the only way?

The variables in question would be the datePicker and classPicker StackPanels referenced below.

<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

To make it truly generic one should create a custom control which contains the controls you want to swap out with the story board operation.

Once the control is created one can drop in 1-* of those controls on the page and make them visible and execute the storyboard(s) as needed.

Answer 2

Following @OmegaMan's suggestion, I created a custom control which inherited from the Button class. Using DependencyProperties, I was able to pass along the elements from the XAML that I wanted the animation to affect.

Custom Class:

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}" />