Jak animować krycie w programie DropShadowEffect?

Question

Mam projektu WPF z obramowaniem przy użyciu następującego stylu. Plan polega na tym, aby efekt blasku zanikł, gdy mysz przesunie się przez granicę i zaniknie, gdy opuści.

<Style x:Key="BorderGlow" TargetType="Border"> 
    <Style.Resources> 
     <Storyboard x:Key="GlowOn"> 
      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(DropShadowEffect.Opacity)"> 
       <SplineDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/> 
      </DoubleAnimationUsingKeyFrames> 
     </Storyboard> 
     <Storyboard x:Key="GlowOff"> 
      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(DropShadowEffect.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="0" 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> 

Problem polega na tym, że nic się nie dzieje! Animacja działa, jeśli zmienię "DropShadowEffect" na "UIElement" w Storyboard TargetProperty, ale to zanika całą kontrolę.

Jak wyciszyć tylko DropShadowEffect?

Answer 1

Kilka punktów zauważyć

1) Musisz być kierowanie rzeczywistą własność border - Jesteś w efekcie próbuje kierować wartość (DropShadowEffect) właściwości efekt, a nie sama nieruchomość.

2) Musisz posortować składnię PropertyPath.

Zmień swoją nieruchomość Storyboard.Target na następujące kwestie i powinno być w porządku:

Storyboard.TargetProperty="(Effect).Opacity" 

EDIT kod Praca jak zauważono w komentarzu:

<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>