Как анимировать непрозрачность эффекта DropShadowEffect?
-
07-07-2019 - |
Вопрос
У меня есть проект WPF с границей, использующей следующий стиль.План состоит в том, чтобы эффект свечения исчезал при наведении курсора мыши на границу и исчезал при ее удалении.
<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>
Проблема в том, что ничего не происходит!Анимация работает, если я изменяю "DropShadowEffect" на "UIElement" в Storyboard TargetProperty, но при этом исчезает весь элемент управления.
Как мне убрать только эффект DropShadowEffect?
Решение
Следует отметить пару моментов
1) Вам нужно настроить таргетинг на фактическое свойство Border - фактически вы пытаетесь настроить таргетинг на значение (DropShadowEffect) свойства Effect, а не на само свойство.
2) Вам нужно отсортировать синтаксис Путь к свойству.
Измените свою раскадровку.Укажите целевое свойство на следующее, и все будет в порядке:
Storyboard.TargetProperty="(Effect).Opacity"
Редактировать Рабочий код, как указано в комментарии:
<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>