How to: Animate Multiple Visual Effects

The following example shows how to animate the ShadowDepth and Softness properties of a DropShadowBitmapEffect and the Radius property of a BlurBitmapEffect to create the illusion of a button rising up from the screen.

Example

<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" >

  <StackPanel>

    <Button Margin="50" Width="200" Name="myButton">
      Click Me to Animate Drop Shadow!
      <Button.RenderTransform>
        <ScaleTransform x:Name="MyAnimatedScaleTransform" 
         ScaleX="1" ScaleY="1" CenterX="100"  />
      </Button.RenderTransform>
      <Button.BitmapEffect>
        <BitmapEffectGroup>
          <BlurBitmapEffect x:Name="myBlurBitmapEffect" Radius="0" KernelType="Box" />
          <DropShadowBitmapEffect x:Name="myDropShadowBitmapEffect" Color="Black"   
           ShadowDepth="0" />
        </BitmapEffectGroup>
      </Button.BitmapEffect>
      <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
          <BeginStoryboard>
            <Storyboard>

              <!-- Animate the ScaleX property to make the button
                   get larger and smaller in the horizontal axis. -->
              <DoubleAnimation
                Storyboard.TargetName="MyAnimatedScaleTransform"
                Storyboard.TargetProperty="ScaleX"
                To="5.0" Duration="0:0:1" AutoReverse="True" />

              <!-- Animate the ScaleY property to make the button
                   get larger and smaller in the vertical axis. -->
              <DoubleAnimation
                Storyboard.TargetName="MyAnimatedScaleTransform"
                Storyboard.TargetProperty="ScaleY"
                To="5.0" Duration="0:0:1" AutoReverse="True" />

              <!-- Animate the blur to make the object appear to
                   be comming out of the screen. Use a spline key
                   frame to make the blur animate suddenly at the 
                   very end of the animation. -->
              <DoubleAnimationUsingKeyFrames
               Storyboard.TargetName="myBlurBitmapEffect"
               Storyboard.TargetProperty="Radius" AutoReverse="True">
                <DoubleAnimationUsingKeyFrames.KeyFrames>
                  <SplineDoubleKeyFrame KeySpline="0.6,0.0 0.9,0.00" Value="30" KeyTime="0:0:1" />
                </DoubleAnimationUsingKeyFrames.KeyFrames>
              </DoubleAnimationUsingKeyFrames>
              
              <!-- Animate shadow depth of the effect. -->
              <DoubleAnimation
               Storyboard.TargetName="myDropShadowBitmapEffect"
               Storyboard.TargetProperty="ShadowDepth"
               From="0" To="50" Duration="0:0:1"
               AutoReverse="True" />

              <!-- Animate shadow softness. As the object gets
                   farther away, the shadow gets softer. -->
              <DoubleAnimation
               Storyboard.TargetName="myDropShadowBitmapEffect"
               Storyboard.TargetProperty="Softness"
               From="0" To="1" Duration="0:0:1"
               AutoReverse="True" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Button.Triggers>
    </Button>

  </StackPanel>

</Page>

See Also

Tasks

How to: Create a Glow Effect on the Outer Edge of an Object
How to: Apply a Blur Effect to a Visual
How to: Create a Drop Shadow Visual Effect
How to: Create Multiple Visual Effects

Concepts

Bitmap Effects Overview