WinUI 3桌面应用DropShadow使用及文本描边问题求助

一、DropShadow类的正确使用（解决阴影在元素上方的问题） #

你的代码中阴影出现在元素上方，核心原因有两个：一是将承载阴影的SpriteVisual插入到了目标元素的可视化树顶部，导致层级覆盖；二是阴影的OffsetZ值为0，未让阴影处于元素后方。以下是修正后的实现方式：

1. 给Rectangle添加阴影的正确代码 #

<!-- XAML结构 -->
<Grid x:Name="_MainGrid">
    <Grid.RowDefinitions>
        <RowDefinition Height="32"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid Grid.Row="0"/>
    <Rectangle x:Name="MyRect1" Grid.Row="1" Width="500" Height="500" Fill="White"/>
    <Rectangle x:Name="MyRect2" Grid.Row="1" Width="250" Height="250" Fill="Green"/>
</Grid>

// C#代码
var targetVisual = ElementCompositionPreview.GetElementVisual(MyRect2);
var compositor = targetVisual.Compositor;

// 创建DropShadow并配置参数
var dropShadow = compositor.CreateDropShadow();
dropShadow.BlurRadius = 50;
// Z设为负数，让阴影处于元素后方；XY可调整阴影偏移方向
dropShadow.Offset = new Vector3(0, 0, -10);
dropShadow.Color = Colors.Black;

// 创建容器承载阴影
var shadowHost = compositor.CreateContainerVisual();
shadowHost.Size = new Vector2((float)MyRect2.ActualWidth, (float)MyRect2.ActualHeight);
shadowHost.Shadow = dropShadow;

// 将阴影容器插入到父级可视化树，且放在目标元素之前（层级更低）
var parentVisual = (ContainerVisual)ElementCompositionPreview.GetElementVisual(_MainGrid);
parentVisual.Children.InsertBefore(shadowHost, targetVisual);

// 同步阴影容器与目标元素的位置、大小（避免元素移动/缩放后阴影错位）
var offsetAnim = compositor.CreateExpressionAnimation("target.Offset");
offsetAnim.SetReferenceParameter("target", targetVisual);
shadowHost.StartAnimation("Offset", offsetAnim);

var sizeAnim = compositor.CreateExpressionAnimation("target.Size");
sizeAnim.SetReferenceParameter("target", targetVisual);
shadowHost.StartAnimation("Size", sizeAnim);

2. 给TextBlock添加阴影的实现 #

如果要给TextBlock添加阴影提升可读性，代码逻辑类似，只需替换目标元素为TextBlock：

var textVisual = ElementCompositionPreview.GetElementVisual(MyTextBlock);
var compositor = textVisual.Compositor;

var dropShadow = compositor.CreateDropShadow();
dropShadow.BlurRadius = 3;
// 轻微的XY偏移增强可读性，Z值设为负数让阴影在文本后方
dropShadow.Offset = new Vector3(1, 1, -2);
dropShadow.Color = Colors.Black;

var shadowHost = compositor.CreateContainerVisual();
shadowHost.Size = new Vector2((float)MyTextBlock.ActualWidth, (float)MyTextBlock.ActualHeight);
shadowHost.Shadow = dropShadow;

var parentVisual = (ContainerVisual)ElementCompositionPreview.GetElementVisual(ParentGrid);
parentVisual.Children.InsertBefore(shadowHost, textVisual);

// 同步位置和大小
var offsetAnim = compositor.CreateExpressionAnimation("text.Offset");
offsetAnim.SetReferenceParameter("text", textVisual);
shadowHost.StartAnimation("Offset", offsetAnim);

var sizeAnim = compositor.CreateExpressionAnimation("text.Size");
sizeAnim.SetReferenceParameter("text", textVisual);
shadowHost.StartAnimation("Size", sizeAnim);

3. 更简便的官方替代方案（WinUI Community Toolkit） #

如果不想手动处理合成层，可以使用WinUI社区工具包中的DropShadowPanel，用法类似WPF的Effect属性，只需将元素嵌套其中：

1. 安装NuGet包：Microsoft.UI.Xaml.Controls.Toolkit
2. XAML中使用：

<controls:DropShadowPanel BlurRadius="10" ShadowOpacity="0.7" OffsetX="2" OffsetY="2">
    <TextBlock Text="带阴影的文本" FontSize="24" Foreground="White"/>
</controls:DropShadowPanel>

二、WinUI 3文本描边的实现方法 #

WinUI 3原生没有文本描边属性，可通过以下两种方式实现：

1. 双TextBlock叠加（简易方案） #

通过两个TextBlock叠加，底层文本用深色且偏移1像素模拟描边效果：

<Grid>
    <TextBlock Text="带描边的文本" FontSize="24" Foreground="Black" Margin="1"/>
    <TextBlock Text="带描边的文本" FontSize="24" Foreground="White"/>
</Grid>

2. Win2D绘制（专业方案） #

如果需要更精准的描边效果，可使用Win2D库实现：

1. 安装NuGet包：Win2D.uwp
2. XAML中添加CanvasControl：

<CanvasControl x:Name="TextCanvas" Draw="TextCanvas_Draw"/>

3. C#绘制逻辑：

private void TextCanvas_Draw(CanvasControl sender, CanvasDrawEventArgs args)
{
    var textFormat = new CanvasTextFormat
    {
        FontSize = 24,
        FontWeight = FontWeights.Bold,
        HorizontalAlignment = CanvasHorizontalAlignment.Center,
        VerticalAlignment = CanvasVerticalAlignment.Center
    };
    var textLayout = new CanvasTextLayout(sender, "带精准描边的文本", textFormat, sender.ActualWidth, sender.ActualHeight);
    
    // 绘制描边（最后一个参数为描边宽度）
    args.DrawingSession.DrawTextLayout(textLayout, 0, 0, Colors.Black, 2);
    // 绘制文本填充
    args.DrawingSession.FillTextLayout(textLayout, 0, 0, Colors.White);
}

内容的提问来源于stack exchange，提问作者Георгий Попов