Search code examples
c#wpfbuttoncontroltemplatecontentpresenter

How to center Content in a Button Template and keep mouse events in empty area

I am using a Button Template to customize the look and feel of my buttons like so:

<ControlTemplate TargetType="Button">
    <Border x:Name="Border" CornerRadius="6" BorderThickness="1">
        <ContentPresenter Margin="3" HorizontalAlignment="Center" VerticalAlignment="Center" RecognizesAccessKey="True" ContentSource="Content"/>
    </Border>
</ControlTemplate>

I want to center horizontally and vertically the Content, but when I do it the "empty" areas of the Button don't react to the Mouse. When I use Stretch the entire Button behaves alright, but the Content is aligned top-right.

How do I do both?

Solution

  • To make whole area of a Border hit test visible you need to initialise its Background property with some Brush. Can be even Transparent which will have same visual effect as default null. 

     <Border ... Background="Transparent" />