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

Question

What I want is shadow only from outside of the button border and no shadow from inside. Is there a way to do it in button Style?

https://stackoverflow.com/a/11124369/7402089 Found what I needed, but shadow is both from inside and outside of the border. I was trying to search among DropShadowEffect properties and Border properties or search on the internet, but I didn't find anything.

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

Expected: shadow from outside, no shadow from inside of the border. Filled button with border color. Current result: shadow both from inside and outside of the border. Foreground and Background properties inside Style have no effect and Context of button doesn't show neither. Don't know why.

How can I fix it?

score 1 · Accepted Answer · answered Jan 10 '19 at 13:35

1

I haven't tested this but i assume that the Background of your Button is Transparent. Maybe normally the shadow is only on the outside, but because the inside is transparent, you can see through the button making it also glow on the inside.

EDIT: Apparently you can add padding to an effect, which might solve the issue you're having: https://www.oreilly.com/library/view/hlsl-and-pixel/9781449324995/ch04.html

Found this on the site that i linked:

answered Jan 10 '19 at 13:35

Lennart

752
1
5
18

Yes, you were right. Thanks. Assigning `Border`'s `Background` to any color helps, but now there's another problem: `Border` covers `Button`'s `Context` (even if `Background` is `Transparent`). I didn't find solution so far. Any ideas? – Constantine Ketskalo Jan 14 '19 at 01:20
It might sound confusing but maybe you have "a border within your button" instead of "a button within your border". With this I mean that the border should be the parent element, not the button. The reason for this is that you could also (for example) create a square with a border, with 3 buttons in it. https://www.wpf-tutorial.com/misc-controls/the-border-control/ something like this – Lennart Jan 15 '19 at 13:48

score 1 · Answer 2 · answered Jan 10 '19 at 13:40

How about something like this:

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

This should work for all buttons that dont have a transparent background, because you are laying another Border control on top of the glowing one, thus overlaying the inner glow.

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

2 Answers2