如何仅从边界外完成发光效果?

How can glowing effect be done only from outside the border?

我想要的是只有按钮边框外的阴影,里面没有阴影。有没有办法在按钮样式中做到这一点?

找到了我需要的东西,但阴影来自边界内外。 我试图在 DropShadowEffect 属性和 Border 属性中搜索或在互联网上搜索,但我没有找到任何东西。

<Style x:Key="GlowingBorder" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border Margin="10" Background="Transparent"
                        BorderBrush="#171e25" BorderThickness="1" Opacity="1.0"
                        CornerRadius="{TemplateBinding Border.CornerRadius}">
                    <Border.Effect>
                        <DropShadowEffect ShadowDepth="0"
                                          Color="#72f4aa"
                                          Opacity="1"
                                          BlurRadius="6"/>
                    </Border.Effect>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

预期:外部有阴影,边界内部没有阴影。带有边框颜色的填充按钮。 当前结果:边界内外都有阴影。 ForegroundBackground 属性在 Style 中无效,按钮的 Context 也不显示。不知道为什么。

我该如何解决?

我还没有测试过这个,但我假设你的按钮的背景是透明的。可能正常情况下只有外面有影子,但因为里面是透明的,你可以透过按钮看到,里面也会发光。

编辑:显然您可以为效果添加填充,这可能会解决您遇到的问题:https://www.oreilly.com/library/view/hlsl-and-pixel/9781449324995/ch04.html

在我链接的网站上找到这个:

这样的事情怎么样:

<Style x:Key="GlowingBorder" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid>
                   <Border Margin="10" Background="Transparent"
                           BorderBrush="#171e25" BorderThickness="1" Opacity="1.0"
                           CornerRadius="{TemplateBinding Border.CornerRadius}">
                       <Border.Effect>
                           <DropShadowEffect ShadowDepth="0"
                                          Color="#72f4aa"
                                          Opacity="1"
                                          BlurRadius="6"/>
                       </Border.Effect>
                   </Border>
                   <Border BorderBrush="#171e25" BorderThickness="1" 
                       Background="{TemplateBinding Background}" 
                       CornerRadius="{TemplateBinding Border.CornerRadius}" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

这应该适用于所有没有透明背景的按钮,因为您将另一个 Border 控件放置在发光的按钮之上,从而覆盖了内部发光。