怎么只能在边界外实现发光效果？答案

【问题标题】：How can glowing effect be done only from outside the border?怎么只能在边界外实现发光效果？
【发布时间】：2019-01-10 13:12:17
【问题描述】：

我想要的是仅来自按钮边框外部的阴影，而没有来自内部的阴影。有没有办法在按钮样式中做到这一点？

https://stackoverflow.com/a/11124369/7402089 找到了我需要的东西，但阴影来自边界内外。我试图在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>

预期：来自外部的阴影，没有来自边界内部的阴影。带有边框颜色的填充按钮。当前结果：来自边界内外的阴影。 Foreground 和 Background 内的 Style 属性无效，按钮的 Context 也不显示。不知道为什么。

我该如何解决？

【问题讨论】：

标签： c# wpf border

【解决方案1】：

我没有对此进行测试，但我假设您的按钮的背景是透明的。也许通常阴影只在外面，但因为里面是透明的，你可以通过按钮看到它，使它在里面也发光。

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

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

【讨论】：

是的，你是对的。谢谢。将Border 的Background 分配给任何颜色都有帮助，但现在还有另一个问题：Border 覆盖了Button 的Context（即使Background 是Transparent）。到目前为止我还没有找到解决方案。有什么想法吗？
这听起来可能令人困惑，但也许您有“按钮内的边框”而不是“边框内的按钮”。我的意思是边框应该是父元素，而不是按钮。这样做的原因是您还可以（例如）创建一个带有边框的正方形，其中包含 3 个按钮。 wpf-tutorial.com/misc-controls/the-border-control 类似的东西

【解决方案2】：

这样的事情怎么样：

<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>

这应该适用于所有没有透明背景的按钮，因为您正在将另一个边框控件放在发光的顶部，从而覆盖内部发光。

【讨论】：