Comment animer l'opacité d'un DropShadowEffect?

Question

J'ai un projet WPF avec une bordure utilisant le style suivant. Le plan consiste à faire fondre l'effet de lueur lorsque la souris passe au-dessus de la bordure et disparaître à la sortie.

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

Le problème est, rien ne se passe! L'animation fonctionne si je change le "DropShadowEffect" en "UIElement" dans le Storyboard TargetProperty, mais cela fane le contrôle entier.

Comment estomper uniquement DropShadowEffect?

Answer 1

Quelques points à noter

1) Vous devez cibler une propriété réelle de la frontière - Vous êtes en effet d'essayer de cibler la valeur (DropShadowEffect) de la propriété effet, pas la propriété elle-même.

2) Vous devez trier la syntaxe du PropertyPath.

Changer votre propriété Storyboard.Target à ce qui suit et vous devriez être bien:

Storyboard.TargetProperty="(Effect).Opacity" 

EDIT Code de travail comme il est indiqué dans le commentaire:

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