How to animate Opacity of a DropShadowEffect?

Question

I have a WPF project with a border using the following style. The plan is to get the glow effect to fade in when the mouse moves over the border, and fade out when it leaves.

Answer 1

This is a followup to Simon's answer where I have a ListView where the Template item of the ListViewItem had a DropShadow on a Grid. Long story short, because one is overriding the ListViewItem, the selected item and the hover no longer work. To get those to work I had to modify the Opacity and there are two ways to access the Effect depending on where one is; which I show below...here are Full example of the two snippets:

Set during Selection

<ListView.ItemContainerStyle>
    <Style TargetType="ListViewItem">
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Cursor" Value="Hand"/>
            </Trigger>

            <MultiTrigger>
                <MultiTrigger.Conditions>
                    <Condition Property="IsSelected" Value="true" />
                    <Condition Property="Selector.IsSelectionActive" Value="true" />
                </MultiTrigger.Conditions>
                <Setter Property="FontWeight" Value="Bold" />
                <Setter Property="Effect">
                    <Setter.Value>
                        <DropShadowEffect Opacity="1"/>
                    </Setter.Value>
                </Setter>
            </MultiTrigger>
        </Style.Triggers>

Set for Grid.Triggers

<Grid Background="GhostWhite">
    <Grid.Effect>
        <DropShadowEffect Opacity="0" />
    </Grid.Effect>
    <GridViewRowPresenter Content="{TemplateBinding Content}"
                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                      SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />

    <Grid.Triggers>
        <EventTrigger RoutedEvent="MouseEnter">
            <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimationUsingKeyFrames 
                                        BeginTime="00:00:00"
                                        Storyboard.TargetProperty="(Effect).Opacity">
                            <SplineDoubleKeyFrame KeyTime="0:0:0.1" Value=".2"/>
                            <SplineDoubleKeyFrame KeyTime="0:0:0.4" Value=".6"/>
                            <SplineDoubleKeyFrame KeyTime="0:0:0.6" Value="1"/>
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
            </BeginStoryboard>
        </EventTrigger>

Answer 2

A couple of points to note

1) You need to be targeting an actual property of Border - You are in effect trying to target the value (DropShadowEffect) of the Effect property, not the property itself.

2) You need to sort the syntax of the PropertyPath.

Change your Storyboard.Target property to the following and you should be fine:

Storyboard.TargetProperty="(Effect).Opacity"

EDIT Working code as noted in comment:

<Border BorderThickness="10" Height="100" Width="100">
    <Border.BorderBrush>
        <SolidColorBrush Color="Red"></SolidColorBrush>
    </Border.BorderBrush>
    <Border.Style>
        <Style TargetType="Border">
            <Style.Resources>
                <Storyboard x:Key="GlowOn">
                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
                          Storyboard.TargetProperty="(Effect).Opacity">
                        <SplineDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/>
                    </DoubleAnimationUsingKeyFrames>
                </Storyboard>
                <Storyboard x:Key="GlowOff">
                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
                          Storyboard.TargetProperty="(Effect).Opacity">
                        <SplineDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
                    </DoubleAnimationUsingKeyFrames>
                </Storyboard>
            </Style.Resources>

            <Setter Property="CornerRadius" Value="6,1,6,1" />
        <!--<Setter Property="BorderBrush"
                    Value="{StaticResource SelectedBorder}" />-->
            <Setter Property="BorderThickness" Value="1" />
        <!--<Setter Property="Background"
                    Value="{StaticResource DeselectedBackground}" />-->
            <Setter Property="RenderTransformOrigin" Value="0.5,0.5" />
        <!--<Setter Property="TextBlock.Foreground"
                    Value="{StaticResource SelectedForeground}" />-->

            <Setter Property="RenderTransform">
                <Setter.Value>
                    <RotateTransform Angle="90"/>
                </Setter.Value>
            </Setter>

            <Setter Property="Effect">
                <Setter.Value>
                    <DropShadowEffect ShadowDepth="20"
                                      BlurRadius="8"
                                      Color="#FFB0E9EF"/>
                </Setter.Value>
            </Setter>

            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">

                    <Trigger.EnterActions>
                        <BeginStoryboard
                              Storyboard="{StaticResource GlowOn}"/>
                    </Trigger.EnterActions>

                    <Trigger.ExitActions>
                        <BeginStoryboard
                              Storyboard="{StaticResource GlowOff}"/>
                    </Trigger.ExitActions>

                </Trigger>
            </Style.Triggers>

        </Style>
    </Border.Style>
</Border>