Cómo animar la opacidad de un efecto DropShadow?

Tengo un proyecto WPF con un borde con el siguiente estilo. El plan es lograr que el efecto de brillo se desvanezca cuando el mouse se mueva sobre el borde y desaparezca cuando se vaya.Cómo animar la opacidad de un efecto DropShadow?

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

¡El problema es que no pasa nada! La animación funciona si cambio el "DropShadowEffect" a "UIElement" en Storyboard TargetProperty, pero esto desvanece todo el control.

¿Cómo me desvanezco solo el efecto DropShadow?

Fuente

2009-09-15 Zodman

Un par de puntos a tener en cuenta

1) Es necesario tener como objetivo una propiedad real de la frontera - Usted está en efecto tratando de apuntar el valor (DropShadowEffect) Efecto de la propiedad, no la propiedad en sí.

2) Debe ordenar la sintaxis del PropertyPath.

Cambiar la propiedad Storyboard.Target a la siguiente y que debe estar bien:

Storyboard.TargetProperty="(Effect).Opacity"

EDITAR código Trabajando como se ha señalado en el comentario:

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

Fuente

2009-09-15 06:19:24

consigo un InvalidOperationException porque Efecto doesn' t tiene una propiedad de Opacidad. El valor de Effect es DropShadowEffect, que tiene la propiedad Opacity a la que intento apuntar, pero como usted señala, mi XAML es incorrecto. He intentado configurar x: Name en DropShadowEffect pero no puedes usar TargetName en Styles. Hay un agujero en la documentación de MSDN sobre el uso de estos corchetes en los guiones gráficos, pero lo rastreé en la ayuda de PropertyPath. Sin embargo, todavía no puedo resolver el problema. Creo que necesito enviar Effect a DropShadowEffect, pero esto no parece posible en XAML. ¿Alguna otra idea? – Zodman

Me las arreglé para obtener el código que ha publicado trabajando utilizando la sintaxis que he proporcionado, lo hice en una aplicación de muestra desprotegida. Publicaré lo que utilicé y quizás puedas recuperarlo ... –

Nota: he eliminado los organismos que utilizan recursos estáticos que no has proporcionado pero que no van a afectar la demostración. Y me doy cuenta de que está intentando establecer la propiedad TextBlock.Foreground dentro de su estilo, que tampoco funcionará. –

Cómo animar la opacidad de un efecto DropShadow?

Respuesta

Cuestiones relacionadas