Como animar a opacidade de um DropShadowEffect?
-
07-07-2019 - |
Pergunta
Eu tenho um projeto WPF com uma borda usando o seguinte estilo. O plano é fazer com que o efeito de brilho a desvanecer-se quando o mouse se move sobre a fronteira, e fade out quando sai.
<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>
O problema é que nada acontece! A animação funciona se eu mudar o "DropShadowEffect" para "UIElement" no Storyboard TargetProperty, mas este desaparece todo o controle.
Como faço para desaparecer apenas o DropShadowEffect? ??
Solução
Um par de pontos a nota ??p>
1) Você precisa ser alvo de uma propriedade real de Border - Você está em efeito tentando atingir o valor (DropShadowEffect) da propriedade Effect, não a própria propriedade
.2) Você precisa classificar a sintaxe do PropertyPath .
Mude sua propriedade Storyboard.Target para o seguinte e você deve ser fino:
Storyboard.TargetProperty="(Effect).Opacity"
Editar Código de Trabalho como observado no comentário:
<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>