Why does System.Windows.Controls.Button always have a padding of 10px?

Question

See screenshot. The bounding cyan-bordered box is the button, while the blue fill is the rectangle. I cannot for the life of me figure out how to get rid of the padding in the button. Is there a way to position the rectangle to the top left so it touches the cyan border?

Thanks.

Answer 1

Did you try setting the Rectangle's margin to 0?

<Button x:Name="Button" BorderThickness="0" Margin="0" Padding="0" Width="96" Height="96">
    <Rectangle Fill="Blue" Margin="0" Width="96" Height="96" />
</Button>

EDIT: The padding must come from the button control template. Try using a custom template:

<Style x:Key="MyButton" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid>
                    <Rectangle Fill="Blue" Margin="0" Width="96" Height="96" />
                </Grid>
           </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Button x:Name="Button" BorderThickness="0" Margin="0" Padding="0"
    Width="96" Height="96" Style="{StaticResource MyButton}" />

Answer 2

A workaround:

Draw a rectangle and add onclick to it.

Answer 3

I can't generate that apparent behaviour but I wonder, would you be developing in Windows Phone app?

If so what you are most likely seeing is not the result of Padding but result of "PhoneTouchTargetOverhang". This is a Thickness resource found in App.xaml and is used by the "PhoneButtonBase" style for the outer border Margin for the button.

This is actually a copy of the default style that windows phone 7 applies to buttons. To replace it you will need to actually specify that your button use the "PhoneButtonBase" style then change the value of "PhoneTouchTargetOverhang". This will update any button using this style.