Search code examples
.netwpfxamlstoryboarddropshadow

Changing opacity WPF Button property using Animation


I created a button with Drop Shadow effect. Now i want to add an animation for this effect by changing opacity property during runtime. But this code doesn't work:

<Button x:Name="btnRun" Content="Run" Click="btn_RunEventHandler" BorderThickness="1"  >
                        <Button.Effect>
                            <DropShadowEffect Color="Red"  ShadowDepth="0" BlurRadius="21"  />
                        </Button.Effect>
                        <Button.Triggers>
                            <EventTrigger RoutedEvent="Button.MouseEnter">
                                <EventTrigger.Actions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames
                                                Storyboard.TargetProperty="(DropShadowEffect.Opacity)"
                                                Duration="0:0:1.6"
                                                RepeatBehavior="Forever">
                                                <LinearDoubleKeyFrame KeyTime="0:0:0" Value="1"/>                                                    
                                                <LinearDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
                                                <LinearDoubleKeyFrame KeyTime="0:0:0.55" Value="0"/>
                                                <LinearDoubleKeyFrame KeyTime="0:0:0.6" Value="1"/>
                                                <LinearDoubleKeyFrame KeyTime="0:0:0.7" Value="1"/>
                                                <LinearDoubleKeyFrame KeyTime="0:0:0.8" Value="0.6"/>
                                                <LinearDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
                                                <LinearDoubleKeyFrame KeyTime="0:0:1.6" Value="1"/>
                                            </DoubleAnimationUsingKeyFrames>                                                
                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger.Actions>
                            </EventTrigger>
                        </Button.Triggers>
                    </Button>

Solution

  • Give your DropShadow some name

    <DropShadowEffect Color="Red" x:Name="dropShadow" ShadowDepth="0" BlurRadius="21"  />
    

    and animate Opacity of that TargetName

    <DoubleAnimationUsingKeyFrames
        Storyboard.TargetName="dropShadow"
        Storyboard.TargetProperty="Opacity"
        .../>