Windows Phone 8 more Items in column - row as template

Question

I'm new in Windows Phone 8 development and I want to create a page with any number of items sorted in first row-four columns and second row- one column as this great image shows.

Thanks!!

Answer 1

In this code Grid.Row="0" or Grid.Column="0" can be omitted, I wrote them just to understand how it is working.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <GreenItem Grid.Row="0" Grid.Column="0"/>
    <BlueItem Grid.Row="0" Grid.Column="1"/>
    <RedItem Grid.Row="0" Grid.Column="2"/>
    <OrangeItem Grid.Row="0" Grid.Column="3"/>
    <YellowItem Grid.Row="1" Grid.ColumnSpan="4"/>
</Grid>

Answer 2

You can do something as below

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/> //relative Heigts, can change them suitable to requirement
        <RowDefinition Height="7*"/>
    </Grid.RowDefinitions>
    <Grid Grid.Row=0>
        <Grid.ColumnDefnitions>
        //for equal columns
             <ColumnDefnition width="*"/>
             <ColumnDefnition width="*"/>
             <ColumnDefnition width="*"/>
             <ColumnDefnition width="*"/>
        </Grid.ColumnDefnitions>
    </Grid>
    //put all your items based on row and column.
</Grid>

Answer 3

What would you say to read a bit about Layout in Windows Phone? I strongly recommend to read the official reference about WP Layout and after that if something is going wrong, come here and ask.

Reference:

1. Windows Phone Layout
2. Layout and Events
3. and why not this: Beginners Layout