Wpf Button Template: Border without background not working

Question

I created a button with a corner radius based on this stackoverflow answer, which works fine.

Here is the XAML:

<Window x:Class="BorderButton.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:BorderButton"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <Style TargetType="Button">
            <Setter Property="Margin" Value="5"/>
            <Setter Property="Foreground" Value="Black"/>
            <Setter Property="Height" Value="150"/>
            <Setter Property="Width" Value="150"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border CornerRadius="5" 
                                BorderBrush="Black" 
                                Background="{TemplateBinding Background}">
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5"></ContentPresenter>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" >
        <Button Click="Button_Click">Button 1</Button>
    </StackPanel>
</Window>

Question: If I remove Background="{TemplateBinding Background}" the button click event only works if I exactly click on the button text. If I perfom a click inside the border area (and not at the text) no click event is fired. What is the technical reason for this behaviour? Why does border need the Background property set to work correctly?

Thx

score 1 · Accepted Answer · answered Jan 27 '22 at 06:29

Border.Background Property It says:

The Brush that draws the background. This property has no default value.

Probably because of this if you make it empty, the border behaves like empty just when you click the text it event is firing.

Background="Transparent" will make your button look like empty but when you click empty space it will also fire an event.

<Window.Resources>
    <Style TargetType="Button">
        <Setter Property="Margin" Value="5"/>
        <Setter Property="Foreground" Value="Black"/>
        <Setter Property="Height" Value="150"/>
        <Setter Property="Width" Value="150"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border CornerRadius="5" 
                            BorderBrush="Black" 
                            Background="Transparent">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5"></ContentPresenter>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

Wpf Button Template: Border without background not working

1 Answers1