How to: Animate an Effect within a BitmapEffectGroup

This example demonstrates how to animate a BitmapEffect within a BitmapEffectGroup.

Example

The following shows two examples of a TargetProperty path used to animate the Color property of a DropShadowBitmapEffect. The MouseEnter and MouseLeave event triggers use different paths to demonstrate the different ways of accessing a BitmapEffect within a BitmapEffectGroup.

<Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" >
  <Page.Resources>
    <Style TargetType="{x:Type Button}" x:Key="MyButtonStyle">
      <Setter Property="Button.BitmapEffect">
        <Setter.Value>
          <BitmapEffectGroup>
            <DropShadowBitmapEffect x:Name="myDropShadowBitMapEffect" Color="Black" ShadowDepth="3" />
            <OuterGlowBitmapEffect GlowColor="Gray"/>
            <!--  BitmapEffect -->
          </BitmapEffectGroup>
        </Setter.Value>
      </Setter>
      <Style.Triggers>
        <EventTrigger RoutedEvent="Button.MouseEnter">
          <EventTrigger.Actions>
            <BeginStoryboard >
              <Storyboard>
                <ColorAnimation Storyboard.TargetProperty="(Button.BitmapEffect).(BitmapEffectGroup.Children)[0].(DropShadowBitmapEffect.Color)" From="Gray" To="Red" Duration="0:0:0.5" AutoReverse="False" />
                <!-- <ColorAnimation Storyboard.TargetProperty="BitmapEffect.Children[0].Color" From="Gray" To="Red" Duration="0:0:0.5" AutoReverse="False" /> -->
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>
        <EventTrigger RoutedEvent="Button.MouseLeave">
          <EventTrigger.Actions>
            <BeginStoryboard >
              <Storyboard>
                <!-- <ColorAnimation Storyboard.TargetProperty="(Button.BitmapEffect).(BitmapEffectGroup.Children)[0].(DropShadowBitmapEffect.Color)" From="Gray" To="Red" Duration="0:0:0.5" AutoReverse="False" /> -->
                <ColorAnimation Storyboard.TargetProperty="BitmapEffect.Children[0].Color" From="Red" To="Gray" Duration="0:0:0.5" AutoReverse="False" />
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>
      </Style.Triggers>
    </Style>
  </Page.Resources>
  <StackPanel Margin="20">
    <Button Style="{StaticResource MyButtonStyle}">Click Me</Button>
  </StackPanel>
</Page>

See Also

Reference

BitmapEffect

BitmapEffectGroup