如何为WPF自定义样式按钮添加不同颜色的DropShadow效果？

下面提供两种可行的实现方式，帮你给每个按钮添加对应颜色的投影效果：

方案1：利用Tag属性快速实现 #

这种方式无需额外编写C#代码，直接复用Button的Tag属性传递投影颜色：

步骤1：修改App.xaml中的按钮样式 #

给MenuButtonStyle的模板Border添加DropShadowEffect，并绑定Tag属性作为投影颜色：

<Style x:Key="MenuButtonStyle" TargetType="Button">
    <!-- 原有Setter配置保持不变 -->
    <Setter Property="FontFamily" Value="Montserrat"/>
    <Setter Property="Foreground" Value="#ffe7b3"/>
    <Setter Property="FontWeight" Value="Bold"/>
    <Setter Property="FontSize" Value="40"/>
    <Setter Property="Height" Value="80"/>
    <Setter Property="Width" Value="460"/>
    <Setter Property="Margin" Value="0,15"/>
    <Setter Property="Padding" Value="20,0"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="Cursor" Value="Hand"/>

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border Background="{TemplateBinding Background}" CornerRadius="17">
                    <Border.Effect>
                        <DropShadowEffect 
                            Color="{Binding Tag, RelativeSource={RelativeSource TemplatedParent}}"
                            BlurRadius="10"
                            ShadowDepth="5"/>
                    </Border.Effect>
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

步骤2：给每个按钮设置投影颜色 #

在Button实例中通过Tag属性指定对应投影色（建议使用背景色的深色同色系，匹配Mockup效果）：

<Button Style="{StaticResource MenuButtonStyle}" Background="#3baaa3" Tag="#2d8a84" Content="SIGN IN"/>
<Button Style="{StaticResource MenuButtonStyle}" Background="#3baa6a" Tag="#2d8a54" Content="SIGN UP"/>
<Button Style="{StaticResource MenuButtonStyle}" Background="#f29443" Tag="#d47a2b" Content="JOIN ROOM"/>
<Button Style="{StaticResource MenuButtonStyle}" Background="#e8644b" Tag="#c94a31" Content="CREATE ROOM"/>
<Button Style="{StaticResource MenuButtonStyle}" Background="#2b818d" Tag="#1f6570" Content="MY STATUS"/>
<Button Style="{StaticResource MenuButtonStyle}" Background="#1c4d9a" Tag="#153a7a" Content="HIGH SCORES"/>

你可以根据Mockup调整BlurRadius（模糊半径）和ShadowDepth（阴影深度）参数，优化投影的视觉效果。

方案2：自定义附加属性（更规范） #

如果不想占用Tag属性，可以创建专属的附加属性来管理投影颜色：

步骤1：创建附加属性类 #

在项目中新增一个C#类：

using System.Windows;
using System.Windows.Media;

public static class ButtonShadowProperties
{
    public static readonly DependencyProperty ShadowColorProperty =
        DependencyProperty.RegisterAttached(
            "ShadowColor",
            typeof(Color),
            typeof(ButtonShadowProperties),
            new PropertyMetadata(Colors.Black));

    public static void SetShadowColor(DependencyObject obj, Color value)
    {
        obj.SetValue(ShadowColorProperty, value);
    }

    public static Color GetShadowColor(DependencyObject obj)
    {
        return (Color)obj.GetValue(ShadowColorProperty);
    }
}

步骤2：修改按钮样式绑定附加属性 #

在App.xaml中添加命名空间引用（假设类所在命名空间为YourProjectNamespace），并更新Style：

<Window xmlns:local="clr-namespace:YourProjectNamespace">

<Style x:Key="MenuButtonStyle" TargetType="Button">
    <!-- 原有Setter配置保持不变 -->
    <Setter Property="FontFamily" Value="Montserrat"/>
    <Setter Property="Foreground" Value="#ffe7b3"/>
    <Setter Property="FontWeight" Value="Bold"/>
    <Setter Property="FontSize" Value="40"/>
    <Setter Property="Height" Value="80"/>
    <Setter Property="Width" Value="460"/>
    <Setter Property="Margin" Value="0,15"/>
    <Setter Property="Padding" Value="20,0"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="Cursor" Value="Hand"/>

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border Background="{TemplateBinding Background}" CornerRadius="17">
                    <Border.Effect>
                        <DropShadowEffect 
                            Color="{Binding (local:ButtonShadowProperties.ShadowColor), RelativeSource={RelativeSource TemplatedParent}}"
                            BlurRadius="10"
                            ShadowDepth="5"/>
                    </Border.Effect>
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

步骤3：给按钮设置附加属性 #

在Button实例中指定投影颜色：

<Button Style="{StaticResource MenuButtonStyle}" Background="#3baaa3" local:ButtonShadowProperties.ShadowColor="#2d8a84" Content="SIGN IN"/>
<Button Style="{StaticResource MenuButtonStyle}" Background="#3baa6a" local:ButtonShadowProperties.ShadowColor="#2d8a54" Content="SIGN UP"/>
<!-- 其他按钮同理 -->

额外优化建议 #

如果Mockup中的投影是背景色的自动深色版本，可以创建颜色转换器，避免手动输入每个投影色：

1. 新增转换器类：

using System.Globalization;
using System.Windows.Data;
using System.Windows.Media;

public class DarkenColorConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is Color color)
        {
            // 降低RGB通道亮度，生成深色投影
            return Color.FromRgb((byte)(color.R * 0.8), (byte)(color.G * 0.8), (byte)(color.B * 0.8));
        }
        return Colors.Black;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

2. 在资源中注册转换器，并绑定到投影颜色：

<Window.Resources>
    <local:DarkenColorConverter x:Key="DarkenColorConverter"/>
</Window.Resources>

<!-- 修改Style中的DropShadowEffect -->
<DropShadowEffect 
    Color="{Binding Background.Color, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource DarkenColorConverter}}"
    BlurRadius="10"
    ShadowDepth="5"/>

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