Clever Geek Handbook

How to center content in a button template and keep mouse events in an empty area

I use Button

Template

to customize the look of my buttons like this:

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

, but when I do that, the "blank" areas Button

are unresponsive Mouse

. When I use it Stretch

, everything Button

behaves well but is Content

aligned at the top right.

How can I do it?

+3


source to share


1 answer


To show the entire test scope of a tag Border

, you need to initialize the property Background

with Brush

. It might even be transparent, which will have the same visual effect as the default null.



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


source






More articles:


All Articles