Question

我一直在研究如何在WPF文档中复制Google按钮在悬停效果上的阴影，并遇到了这个问题：https://stackoverflow.com/a/53031057/12299798，它可以准确回答我的问题，但是我唯一的问题是我通常会做所有XAML中的前端事物，因此我对C＃的样式还没有足够的经验。我的问题是我想将我的前景色“绑定”为阴影色，这是因为在代码中，它仅将其设置为灰色，这意味着我将不得不为我想要的每种颜色做一整个其他类为它设置。这是我的代码：

MainWindow.xaml：

<Button Content="shadow">
        <Button.Style>
            <Style TargetType="Button">
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="local:UI.Elevation" Value="10"/>
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="False">
                        <Setter Property="local:UI.Elevation" Value="0"/>

                    </Trigger>
                </Style.Triggers>
            </Style>
        </Button.Style>
</Button>

UI.cs：

public static class UI
{

    public static readonly DependencyProperty ElevationProperty = DependencyProperty.RegisterAttached("Elevation", typeof(double), typeof(UI), new FrameworkPropertyMetadata(default(double), FrameworkPropertyMetadataOptions.AffectsRender, null, OnRedElevationChanged));

    public static double GetElevation(this UIElement element) => element.GetValue(ElevationProperty) as double? ?? default;

    public static void SetElevation(this UIElement element, double elevation) => element.SetValue(ElevationProperty, elevation);

    private static object OnRedElevationChanged(DependencyObject d, object value)
    {
        if (d is UIElement element && value is double elevation)
            if (elevation == 0)
                element.Effect = null;
            else
            {
                Effect e = CreateElevation(elevation, element.Effect);
                if (e != null)
                    element.Effect = e;
            }
        return value;
    }

    private static Effect CreateElevation(double elevation, Effect source)
    {
        void MixShadows(DropShadowEffect nearest, DropShadowEffect matched, double balance)
        {
            matched.BlurRadius = matched.BlurRadius * (1 - balance) + nearest.BlurRadius * balance;
            matched.ShadowDepth = matched.ShadowDepth * (1 - balance) + nearest.ShadowDepth * balance;
        }
        DropShadowEffect[] shadows = new DropShadowEffect[]
        {
        new DropShadowEffect()
        {
            BlurRadius = 5,
            ShadowDepth = 1
        },
        new DropShadowEffect()
        {
            BlurRadius = 8,
            ShadowDepth = 1.5
        },
        new DropShadowEffect()
        {
            BlurRadius = 14,
            ShadowDepth = 4.5
        },
        new DropShadowEffect()
        {
            BlurRadius = 25,
            ShadowDepth = 8
        },
        new DropShadowEffect()
        {
            BlurRadius = 35,
            ShadowDepth = 13
        }
        };
        elevation = Math.Max(0, elevation / 12 * shadows.Length - 1);
        int prevIndex = (int)Math.Floor(elevation), index = (int)elevation, nextIndex = (int)Math.Ceiling(elevation);
        double approx = elevation - index;
        DropShadowEffect shadow = shadows[index];
        if (approx != 0)
            MixShadows(approx < 0 ? shadows[prevIndex] : shadows[nextIndex], shadow, Math.Abs(approx));
        bool modify = false;
        if (source is DropShadowEffect sourceShadow)
        {
            sourceShadow.BlurRadius = shadow.BlurRadius;
            sourceShadow.ShadowDepth = shadow.ShadowDepth;
            shadow = sourceShadow;
            modify = true;
        }
        shadow.Direction = 270;
        shadow.Color = Colors.Red;
        shadow.Opacity = .42;
        shadow.RenderingBias = RenderingBias.Performance;
        return modify ? null : shadow;
    }
}

要在XAML中获得我想要的东西，我会做这样的事情：

<Button Content="shadow">
        <Button.Style>
            <Style TargetType="Button">
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="local:UI.Elevation" Value="10"/>
                        <Setter Property="local:UI.Elevation.Foreground" Value="Blue"/>
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="False">
                        <Setter Property="local:UI.Elevation" Value="0"/>
                        <Setter Property="local:UI.Elevation.Foreground" Value="Blue"/>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Button.Style>
</Button>

但是我不太知道如何链接local:UI.Elevation.Foreground来更改阴影颜色，我必须在这里从UI.cs：shadow.Color = Colors.Red;更改此行并将其绑定到Elevation.Foreground，但我遇到了困难。有人可以帮忙吗？

Answer 1

您需要做的就是用一个名为Color类型的Color之类的新附加属性更新UI类，并为其提供所需的默认颜色。

然后，在其OnColorChanged处理程序中调用OnElevationChanged，以便重新创建阴影。

#region Color (Attached Property)
public static readonly DependencyProperty ColorProperty =
    DependencyProperty.RegisterAttached(
        "Color",
        typeof(Color),
        typeof(UI),
        new PropertyMetadata(Colors.Black, OnColorChanged));

public static Color GetColor(DependencyObject obj)
{
    return (Color)obj.GetValue(ColorProperty);
}

public static void SetColor(DependencyObject obj, Color value)
{
    obj.SetValue(ColorProperty, value);
}

private static void OnColorChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
    OnElevationChanged(d, GetElevation((UIElement)d));
}
#endregion

在CreateElevation方法中，为颜色添加一个新参数，以便进行设置。

private static Effect CreateElevation(double elevation, Effect source, Color color)
{
    ...
    shadow.Color = color;
    ...
}

最后，在OnElevationChanged中对其进行更新，以使其调用GetColor，以便它可以传递新的Color属性。

private static object OnElevationChanged(DependencyObject d, object value)
{
    if (d is UIElement element && value is double elevation)
        if (elevation == 0)
            element.Effect = null;
        else
        {
            Effect e = CreateElevation(elevation, element.Effect, GetColor(element));
            if (e != null)
                element.Effect = e;
        }
    return value;
}

XAML示例

<Button
    Width="100"
    Height="20"
    Content="shadow">
    <Button.Style>
        <Style TargetType="Button">
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="local:UI.Elevation" Value="10" />
                    <Setter Property="local:UI.Color" Value="Blue" />
                </Trigger>
                <Trigger Property="IsMouseOver" Value="False">
                    <Setter Property="local:UI.Elevation" Value="5" />
                    <Setter Property="local:UI.Color" Value="Red" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>

注意：您可以进行一些重构以使所有这些内容更加整洁，但是希望这可以帮助您入门。

更改类别绑定的阴影颜色WPF

1 个答案: