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

user_7402089 0
Viewed 344

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?

border wpf c#
2 Answers

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:

Padding

user_91130990

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.

user_3288480
Related