Align buttons in a windows Phone 8.1 App

Question

I am trying to align 4 buttons on a window. Currently the window looks like this: enter image description here

We see that first two buttons are of same size and image and text are aligned. Since the text in the third and fourth button i.e. Settings & About is smaller than the previous two, the buttons became smaller and also image is not aligned with the first two buttons. How can I increase the size or align the third and fourth buttons. My current XAML is:

<Grid Background="#FF89A8D4">
    <Grid.RowDefinitions>
        <RowDefinition Height="0.25*" />
        <RowDefinition Height="0.25*"/>
        <RowDefinition Height="0.25*"/>
        <RowDefinition Height="0.25*" />
    </Grid.RowDefinitions>
    <Button Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center" Background="#FFF16767" BorderThickness="2.5">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="0.25*"></ColumnDefinition>
                <ColumnDefinition Width="*"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Image Source="/Assets/new.png"  Grid.Column="0" Margin="10"/>
            <TextBlock Text="Create Note"   Grid.Column="1" FontSize="30" Margin="15" FontFamily="Vijaya" Foreground="White"/>
        </Grid>
    </Button>
    <Button Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center" Background="#FF6060EC" BorderThickness="2.5">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="0.25*"></ColumnDefinition>
                <ColumnDefinition Width="*"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Image Source="/Assets/search.png" Grid.Column="0" Margin="10"/>
            <TextBlock Text="Search Note" Grid.Column="1" FontSize="30" Margin="15" FontFamily="Vijaya" Foreground="White"/>
        </Grid>
    </Button>

    <Button Grid.Row="2" HorizontalAlignment="Center" VerticalAlignment="Center" Background="#FFB09F9F" BorderThickness="2.5">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="0.25*"></ColumnDefinition>
                <ColumnDefinition Width="*"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Image Source="/Assets/settings.png"  Grid.Column="0" Margin="10"/>
            <TextBlock Text="Settings"   Grid.Column="1" FontSize="30" Margin="15" FontFamily="Vijaya" Foreground="White"/>
        </Grid>
    </Button>

    <Button Grid.Row="3" HorizontalAlignment="Center" VerticalAlignment="Center" Background="#FF899E3F" BorderThickness="2.5">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="0.25*"></ColumnDefinition>
                <ColumnDefinition Width="*"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Image Source="/Assets/about.png"  Grid.Column="0" Margin="10"/>
            <TextBlock Text="About  "   Grid.Column="1" FontSize="30" Margin="15" FontFamily="Vijaya" Foreground="White"/>
        </Grid>
    </Button>
</Grid>

Change HorizontalAlignment on a Button from Center to Stretch or remove it altogether — dkozl

quetzalcoatl quetzalcoatl · Accepted Answer · 2014-11-16T21:40:10

With your layout*), the easiest way is:

for all <Button>s:
- leave HorizontalAlignment = Center
- set Width to some identical value, like 160

Smarter:

for all <Button>s:
- change HorizontalAlignment to Stretch
- set their Margin's left and right to some identical value, like 10,0,10,0

Or, if you don't like setting that margins per-button (or any other per-button) settings, you may put into Grid.Resources a Style with some Setters that will set all the buttons.

Or if you don't want to set Margins on buttons, you can:

for all <Button>s:
- change HorizontalAlignment to Stretch
for the Grid that holds them:
- set its Margin's left and right to some identical value, like 10,0,10,0

but the last option assumes that there is something around that Grid that obeys Margins. Usually it's true, but who knows what's in your app.

Actually, I encourage you to try and play around with all those options. All of them look similar, but they mean a bit different things. It'd be good for you to understand/feel the difference, as it will make layouting in WPF much easier for you later.

Disclaimer: there are other ways to achieve similar result.. I didn't try to enumerate all of them, just the simplest/mostobvious ones.

*) the contents of the buttons will automatically align to each other, because content definitions of each button contains the grid with the same shape: 0.25*/1.0* columns. Once all buttons have the same outer dimensions, the inner columns will split the space in the same way and it will give same dimensions of the images and texts. Of course assuming that there is enough space to satisfy each element's MinWidth/MinHeight/etc.

Align buttons in a windows Phone 8.1 App

1 Answers