How do I get rid of the extra margin around a Button?

Question

I'm working with XAML in Windows 8 Metro.

I have a grid with multiple rows. The first row contains a button, and the second an image. The image is a full 600 units wide, and the button has an image content. The problem is that no matter how I style the button, its left edge doesn't match the left edge of the image. While poking around with the settings, it looks like the button includes an extra margin outside of the border, even though I've set the margin (and padding, and border thickness) of the button to 0.

Where does this border come from? How do I get rid of it? I tried creating a custom style with a Template value (below) but it ignores my other style settings. I couldn't find much useful documentation on how to build the template -- or even if that is the problem.

<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="Button">
            <Grid>
                <ContentPresenter Content="{TemplateBinding Content}" Margin="0" />
            </Grid>
        </ControlTemplate>
    </Setter.Value>
</Setter>

This appears to be a bug. Buttons with Image content render two pixels to the right of buttons without image content; this is easier to see in a vertical stack panel. And there might be fractional-pixel magic that's causing flaky false borders on hoverover, too. — AndrewS

kiewic kiewic · Accepted Answer · 2012-02-09T01:18:00

It is really annoying. The solution that seems to work for me is:

<Button Background="Crimson" 
    HorizontalAlignment="Stretch" 
    VerticalAlignment="Stretch" 
    BorderThickness="0" 
    Margin="-3">Click me!</Button>

The secret is in the negative value of margin.

How do I get rid of the extra margin around a Button?

1 Answers