You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在WinUI 3中实现霓虹文字(文字发光)效果?

实现TextBlock/RichTextBlock的霓虹文字发光效果

我想在TextBlock/RichTextBlock元素中实现类似霓虹的文字发光效果,需要给文字添加描边和彩色阴影,但目前只实现了阴影,不知道怎么给文字加描边。

当前代码如下:

var compositor = ElementCompositionPreview.GetElementVisual(Host).Compositor;

var dropShadow = compositor.CreateDropShadow();
dropShadow.Color = Colors.Red;
dropShadow.BlurRadius = 3;
dropShadow.Opacity = 1;
dropShadow.Mask = TextBlock.GetAlphaMask();

var spriteVisual = compositor.CreateSpriteVisual();
spriteVisual.Size = Host.ActualSize;
spriteVisual.Shadow = dropShadow;

ElementCompositionPreview.SetElementChildVisual(Host, spriteVisual);

现在的问题是阴影效果很弱,就算叠加5层也没法形成发光效果,推测是颜色叠加没有正确累加。想请教:

  • 能不能给文字添加描边?
  • 如何让阴影效果更明显?
  • 有没有更高效的发光效果实现方式?

已解决方案

问题已解决,分享给需要的人:

我参考官方文档创建了自定义控件,修改了MakeShadow()方法的代码:

private void MakeShadow()
{
    var compositor = ElementCompositionPreview.GetElementVisual(Host).Compositor;

    for (float i = 1; i <= 5; i++)
    {
        ((ContainerVisual)ElementCompositionPreview.GetElementVisual(Host)).Children.InsertAtBottom(GetSpriteVisual(compositor, i));
    }


    SpriteVisual GetSpriteVisual(Compositor compositor, float radius)
    {
        var dropShadow = compositor.CreateDropShadow();
        dropShadow.Color = Color.FromArgb(250, 140, 240, 250);
        dropShadow.BlurRadius = radius;
        dropShadow.Opacity = 1;
        dropShadow.Mask = TextBlock.GetAlphaMask();

        var spriteVisual = compositor.CreateSpriteVisual();
        spriteVisual.Size = Host.ActualSize;
        spriteVisual.Shadow = dropShadow;

        return spriteVisual;
    }
}

代码中的循环变量i代表阴影效果的叠加次数,数值越高,文字发光效果越强烈。


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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.13 08:35:07