如何在UWP中为DropShadowPanel实现渐变阴影效果？

DropShadowPanel的Color属性确实只支持单一颜色，无法直接绑定渐变画刷，要实现和矩形填充一致的渐变阴影，可以用以下两种方法：

方法一：用模糊渐变层模拟阴影 #

直接复制一份渐变矩形，将其颜色调至半透明，添加高斯模糊效果后放在原矩形下方，模拟阴影效果：

<Grid Width="400" Height="50">
    <!-- 渐变阴影层 -->
    <Rectangle RadiusX="25" RadiusY="25">
        <Rectangle.Fill>
            <LinearGradientBrush EndPoint="0,0.5" StartPoint="1,0.5" ColorInterpolationMode="ScRgbLinearInterpolation">
                <!-- 降低颜色透明度，让阴影更自然 -->
                <GradientStop Color="#80FF0000" Offset="0"/>
                <GradientStop Color="#80FF0000" Offset="0.4"/>
                <GradientStop Color="#80FFFF00" Offset="0.6"/>
                <GradientStop Color="#80FFFF00" Offset="1"/>
            </LinearGradientBrush>
        </Rectangle.Fill>
        <Rectangle.Effect>
            <!-- 调整模糊半径匹配需求 -->
            <BlurEffect Radius="30"/>
        </Rectangle.Effect>
        <!-- 可选：添加小偏移增强层次感 -->
        <Rectangle.RenderTransform>
            <TranslateTransform X="0" Y="5"/>
        </Rectangle.RenderTransform>
    </Rectangle>
    <!-- 原渐变矩形 -->
    <Rectangle RadiusX="25" RadiusY="25">
        <Rectangle.Fill>
            <LinearGradientBrush EndPoint="0,0.5" StartPoint="1,0.5" ColorInterpolationMode="ScRgbLinearInterpolation">
                <GradientStop Color="Red" Offset="0"/>
                <GradientStop Color="Red" Offset="0.4"/>
                <GradientStop Color="Yellow" Offset="0.6"/>
                <GradientStop Color="Yellow" Offset="1"/>
            </LinearGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
</Grid>

这种方法无需额外代码，简单直接，适合一次性使用的场景。

方法二：自定义渐变阴影面板 #

如果需要在多个控件中复用渐变阴影，可以基于Composition API自定义一个支持渐变阴影的面板：

C#自定义控件代码 #

using Windows.UI.Composition;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Hosting;

public class GradientDropShadowPanel : Panel
{
    public LinearGradientBrush ShadowGradient
    {
        get => (LinearGradientBrush)GetValue(ShadowGradientProperty);
        set => SetValue(ShadowGradientProperty, value);
    }

    public static readonly DependencyProperty ShadowGradientProperty =
        DependencyProperty.Register(nameof(ShadowGradient), typeof(LinearGradientBrush), typeof(GradientDropShadowPanel), new PropertyMetadata(null, OnShadowGradientChanged));

    private static void OnShadowGradientChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        ((GradientDropShadowPanel)d).UpdateShadow();
    }

    private void UpdateShadow()
    {
        if (ShadowGradient == null || Children.Count == 0) return;

        var child = Children[0];
        var visual = ElementCompositionPreview.GetElementVisual(child);
        var compositor = visual.Compositor;

        // 创建渐变画刷作为阴影遮罩
        var gradientBrush = compositor.CreateLinearGradientBrush();
        gradientBrush.StartPoint = ShadowGradient.StartPoint.ToVector2();
        gradientBrush.EndPoint = ShadowGradient.EndPoint.ToVector2();
        gradientBrush.ColorInterpolationSpace = CompositionColorInterpolationSpace.ScRgbLinearInterpolation;

        var gradientStops = new CompositionGradientStopCollection();
        foreach (var stop in ShadowGradient.GradientStops)
        {
            var compositionStop = compositor.CreateGradientStop();
            compositionStop.Color = stop.Color;
            compositionStop.Offset = (float)stop.Offset;
            gradientStops.Add(compositionStop);
        }
        gradientBrush.GradientStops = gradientStops;

        // 创建并配置阴影
        var shadow = compositor.CreateDropShadow();
        shadow.BlurRadius = 30;
        shadow.SourcePolicy = CompositionDropShadowSourcePolicy.InheritFromVisualContent;
        shadow.Mask = gradientBrush;

        // 将阴影应用到子元素
        visual.Shadow = shadow;
    }

    protected override Size MeasureOverride(Size availableSize)
    {
        if (Children.Count > 0)
        {
            Children[0].Measure(availableSize);
            return Children[0].DesiredSize;
        }
        return base.MeasureOverride(availableSize);
    }

    protected override Size ArrangeOverride(Size finalSize)
    {
        if (Children.Count > 0)
        {
            Children[0].Arrange(new Rect(finalSize));
            UpdateShadow();
        }
        return base.ArrangeOverride(finalSize);
    }
}

XAML使用示例 #

<!-- 注意引入自定义控件的命名空间，比如xmlns:local="using:你的命名空间" -->
<local:GradientDropShadowPanel>
    <local:GradientDropShadowPanel.ShadowGradient>
        <LinearGradientBrush EndPoint="0,0.5" StartPoint="1,0.5" ColorInterpolationMode="ScRgbLinearInterpolation">
            <GradientStop Color="#80FF0000" Offset="0"/>
            <GradientStop Color="#80FF0000" Offset="0.4"/>
            <GradientStop Color="#80FFFF00" Offset="0.6"/>
            <GradientStop Color="#80FFFF00" Offset="1"/>
        </LinearGradientBrush>
    </local:GradientDropShadowPanel.ShadowGradient>
    <Rectangle Width="400" Height="50" RadiusX="25" RadiusY="25">
        <Rectangle.Fill>
            <LinearGradientBrush EndPoint="0,0.5" StartPoint="1,0.5" ColorInterpolationMode="ScRgbLinearInterpolation">
                <GradientStop Color="Red" Offset="0"/>
                <GradientStop Color="Red" Offset="0.4"/>
                <GradientStop Color="Yellow" Offset="0.6"/>
                <GradientStop Color="Yellow" Offset="1"/>
            </LinearGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
</local:GradientDropShadowPanel>

这种方法更灵活，适合需要多次复用渐变阴影的场景，通过调整ShadowGradient的颜色和透明度，可以实现和原控件填充完全匹配的阴影效果。

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