WPF: Newbie animation question

Question

When button1 is clicked I want this sequence

1. RectangeA becomes visible
2. RectangeA opacity changed from 0 to 75% over lets say 3 seconds
3. ControlB becomes visible.

Steps 1 and 3 are easy with imperative code, but I'm assuming I need to learn how to use story boards to do step 2.

Answer 1

Here is the storyboard that describes your sequence:

<Storyboard x:Key="animate">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="button1" Storyboard.TargetProperty="(UIElement.Opacity)">
                <LinearDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                <LinearDoubleKeyFrame KeyTime="00:00:03" Value="0.75"/>
            </DoubleAnimationUsingKeyFrames>

            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="button1" Storyboard.TargetProperty="(UIElement.Visibility)">
                <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="Visibility.Visible"/>                
            </ObjectAnimationUsingKeyFrames>

            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="control" Storyboard.TargetProperty="(UIElement.Visibility)">
                <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="Visibility.Visible"/>
            </ObjectAnimationUsingKeyFrames>
        </Storyboard>

You can trigger it in xaml through EventTrigger or in code through TryFindResource(). Here is the link on Animation Overview MSDN Article and you can find there answers on your questions on many WPF animations topics.