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

时间:2019-01-10 13:12:17

标签: c# wpf border

我想要的是仅阴影在按钮边框的外部,而没有阴影在内部。有没有一种方法可以使用按钮样式?

https://stackoverflow.com/a/11124369/7402089 找到了我需要的东西,但是阴影既来自边界内部,也来自边界外部。 我试图在DropShadowEffect个属性和Border个属性中进行搜索,或者在Internet上搜索,但是没有找到任何内容。

<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中的BackgroundStyle属性无效,按钮的Context也不显示。不知道为什么。

我该如何解决?

2 个答案:

答案 0 :(得分:1)

我还没有测试过,但是我认为您的按钮背景是透明的。也许通常阴影仅在外部,但是由于内部是透明的,因此您可以通过按钮看到它使其也在内部发光。

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

在我链接的网站上找到了此内容

Padding

答案 1 :(得分:1)

怎么样呢?

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

这应该适用于所有不具有透明背景的按钮,因为您是在发光的顶部放置另一个“边框”控件,从而覆盖内部的发光。