如何动画DropShadowEffect的不透明度?
问题描述:
我有一个使用以下样式的边框的WPF项目。计划是当鼠标移过边界时使发光效果淡入,当它离开时淡出。如何动画DropShadowEffect的不透明度?
<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.Target属性更改为以下内容,你应该罚款:在注释中提到
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>
我得到一个InvalidOperationException,因为没有按效果”没有不透明属性。效果的值是DropShadowEffect,它具有我试图定位的Opacity属性,但正如你指出我的XAML是错误的。 我已经尝试在DropShadowEffect上设置x:Name,但不能在样式中使用TargetName。 在MSDN文档中有关于在故事板中使用这些括号的问题,但我在PropertyPath的帮助中对其进行了跟踪。但是我仍然无法解决问题。我认为我需要将效果施放到DropShadowEffect,但这在XAML中似乎不可行。 有没有其他想法? – Zodman 2009-09-16 01:37:38
我设法使用我提供的语法获得了您发布的代码,我在一个剥离的示例应用程序中完成了此操作。我会发布我用过的东西,你也许可以从中恢复... – 2009-09-16 02:02:41
注意我已经移除了那些使用静态资源的setters,但是这些静态资源并不会影响演示。我注意到你正在尝试在你的风格中设置TextBlock.Foreground属性,这也是行不通的。 – 2009-09-16 02:09:19