Question

When I tried a simple stackpanel with 2 buttons in a Windows Store project:

<Page ...>
    <StackPanel>
        <Button>Button 1</Button>
        <Button>Button 2</Button>
    </StackPanel>
</Page>

The buttons do not stretch to fill the horizontal space, whereas with the same code in a WPF project, they do stretch:

<Window ...>
    <StackPanel>
        <Button>Button 1</Button>
        <Button>Button 2</Button>
    </StackPanel>
</Window>

IS there any difference in the way the stackpanel behave? Or is there a difference in general with the layout system between WPF and Metro app?

Answer 1

It’s a difference in the default style for the Button control.

In WPF, the default style for the Button control (see http://msdn.microsoft.com/en-gb/library/ms753328.aspx) does not contain a setter for HorizontalAlignment, so WPF Buttons have the default value, Stretch.

However, in a Windows 8 app, the default style for a Button explicitly sets the HorizontalAlignment to Left. I don’t know if this default style is anywhere on MSDN, but, using Blend, I have verified that the Button‘s default style contains the following setter:

    <Setter Property="HorizontalAlignment" Value="Left"/>

Of course, if you want the Windows 8 buttons to fill the horizontal space, you can always write

    <Button HorizontalAlignment="Stretch">Button 1</Button>
    <Button HorizontalAlignment="Stretch">Button 2</Button>