WPF XAML中如何设置Storyboard.TargetProperty为DropShadowEffect或BitmapEffect？

一、绑定DropShadowEffect到Storyboard.TargetProperty #

无论是C#代码还是XAML中，都需要通过**属性路径(PropertyPath)**定位Effect下的子属性，格式为(UIElement.Effect).(EffectType.PropertyName)。

C#代码示例 #

Storyboard.SetTargetProperty(animation, new PropertyPath("(UIElement.Effect).(DropShadowEffect.Opacity)"));

纯XAML动画示例 #

<Storyboard>
    <DoubleAnimation Storyboard.TargetName="button"
                     Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.Opacity)"
                     To="0.5" Duration="0:0:0.25"/>
</Storyboard>

二、关于BitmapEffect的说明 #

BitmapEffect在WPF 3.5之后已被标记为过时(Obsolete)，官方推荐使用Effect类（如DropShadowEffect）替代。若需兼容旧代码，绑定方式类似：

// 过时写法，不推荐使用
Storyboard.SetTargetProperty(animation, new PropertyPath("(UIElement.BitmapEffect).(DropShadowBitmapEffect.Opacity)"));

三、可绑定到Storyboard.TargetProperty的属性列表 #

可绑定属性需满足两个条件：是依赖属性(DependencyProperty)，且支持对应动画类型（如DoubleAnimation对应double类型属性）。常见分类如下：

1. UIElement基础属性 #

• Opacity：控件透明度
• RenderTransform.(TranslateTransform.X/Y)：控件平移量
• RenderTransform.(ScaleTransform.ScaleX/ScaleY)：控件缩放比例
• RenderTransform.(RotateTransform.Angle)：控件旋转角度
• Width/Height：控件宽高
• Margin.Left/Top/Right/Bottom：控件边距的单独方向值

2. Effect相关属性（以DropShadowEffect为例） #

• DropShadowEffect.Opacity：阴影透明度
• DropShadowEffect.ShadowDepth：阴影与控件的距离
• DropShadowEffect.BlurRadius：阴影模糊程度
• DropShadowEffect.Color：阴影颜色
• DropShadowEffect.Direction：阴影投射方向

3. 视觉样式属性 #

• Background.Color：控件背景色
• Foreground.Color：控件前景色（如文本颜色）
• BorderBrush.Color：控件边框颜色

4. 布局相关属性 #

• Canvas.Left/Top：控件在Canvas布局中的位置
• Grid.Row/Column：控件在Grid布局中的行列（需配合ObjectAnimationUsingKeyFrames实现）

四、完整实现代码示例 #

C#后台代码 #

using System;
using System.Windows;
using System.Windows.Media;
using System.Windows.Media.Effects;
using System.Windows.Media.Animation;
using System.Windows.Input;

namespace WpfApp3
{
    public partial class MainWindow : Window
    {
        private DropShadowEffect _shadowEffect;

        public MainWindow()
        {
            InitializeComponent();

            // 初始化阴影效果
            _shadowEffect = new DropShadowEffect
            {
                ShadowDepth = 10,
                Color = Colors.Black,
                Opacity = 0,
                BlurRadius = 10,
                Direction = 270
            };
            button.Effect = _shadowEffect;

            // 绑定鼠标事件
            button.MouseEnter += Button_MouseEnter;
            button.MouseLeave += Button_MouseLeave;
        }

        private void Button_MouseEnter(object sender, MouseEventArgs e)
        {
            AnimateShadowOpacity(0.5);
        }

        private void Button_MouseLeave(object sender, MouseEventArgs e)
        {
            AnimateShadowOpacity(0);
        }

        /// <summary>
        /// 动画过渡阴影透明度
        /// </summary>
        /// <param name="targetOpacity">目标透明度</param>
        private void AnimateShadowOpacity(double targetOpacity)
        {
            var animation = new DoubleAnimation
            {
                To = targetOpacity,
                Duration = TimeSpan.FromMilliseconds(250)
            };

            var storyboard = new Storyboard();
            storyboard.Children.Add(animation);

            // 设置动画目标属性：按钮Effect下的DropShadowEffect.Opacity
            Storyboard.SetTargetProperty(animation, new PropertyPath("(UIElement.Effect).(DropShadowEffect.Opacity)"));
            Storyboard.SetTarget(animation, button);

            storyboard.Begin();
        }
    }
}

XAML界面代码 #

<Window x:Class="WpfApp3.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp3"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <!-- 按钮样式：圆角灰色背景 -->
        <Style TargetType="Button">
            <Setter Property="Height" Value="80"/>
            <Setter Property="Width" Value="80"/>
            <Setter Property="Background" Value="LightGray"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border Background="{TemplateBinding Background}" CornerRadius="18"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <Button x:Name="button" Content="Button" 
                MouseEnter="Button_MouseEnter" 
                MouseLeave="Button_MouseLeave"/>
    </Grid>
</Window>

内容的提问来源于stack exchange，提问作者abasirwani