In WPF, why is my button border not showing?

Question

I've created the following style for buttons in XAML:

<Style x:Key="ButtonStyle" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border Background="#FFFEFF" BorderBrush="white" BorderThickness="0.8" CornerRadius="3">
                    <Button Background="#FFFEFF" Foreground="#009999">
                        <ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        <Button.Effect>
                            <DropShadowEffect Color="#BABABA" ShadowDepth="2"/>
                        </Button.Effect>
                    </Button>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

For some reason, the border changes are not displaying so I cannot change the corner radius. The drop shadow works great. This may be very simple, but I am stumbling through XAML and C# for the first time! I tired listing the border under a different setter in the style, but that only resulted in seeing the border under the squared edges of the button.

score 2 · Accepted Answer · answered Oct 11 '18 at 16:34

It looks like you will need to bring the border effect outside of the button and into the border element itself. By placing the border effect inside of the button, you are causing the effect to conform to the shape of the button, instead of the border, and since the button has square corners, it will always appear square, despite the border corners being rounded. Please see this post for an example: WPF style for buttons.

 <Style x:Key="ButtonStyle" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border Background="#FFFEFF" BorderBrush="white"     BorderThickness="0.8" CornerRadius="3">
                     <Border.Effect>
                          <DropShadowEffect Color="#BABABA" ShadowDepth="2"/>
                     </Border.Effect>
                    <Button Background="#FFFEFF" Foreground="#009999">
                        <ContentPresenter Content="{TemplateBinding Content}"      HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Button>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

In WPF, why is my button border not showing?

1 Answers1