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>
문제는 아무 일도 일어나지 않는다는 것입니다! 스토리 보드 TargetProperty의 "DropshadowEffect"를 "Uielement"로 변경하면 애니메이션이 작동하지만 전체 컨트롤이 사라집니다.
dropshadoweffect 만 어떻게 페이드합니까?
해결책
주목해야 할 몇 가지 포인트
1) 국경의 실제 속성을 목표로 삼아야합니다. 사실상 속성 자체가 아닌 효과 속성의 값 (DropshadowEffect)을 타겟팅하려고합니다.
2) 귀하는의 구문을 정렬해야합니다. PropertyPath.
스토리 보드를 변경하십시오. 타겟 속성을 다음과 같은 경우에는 괜찮을 것입니다.
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>
제휴하지 않습니다 StackOverflow