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>