Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to split a Grid row into two columns?

I have the Grid layout with 3 rows.How do i split the 3rd row into 2 columns.

<Grid.RowDefinitions>
    <RowDefinition Height="0.75*"/>
    <RowDefinition Height="0.25*"/>
    <RowDefinition Height="36"/>
</Grid.RowDefinitions>
like image 374
GANI Avatar asked Jan 27 '12 21:01

GANI


1 Answers

Two ways you can do it:

  • Use nested layouts. Put another Grid in the third row, and have two columns in that sub-grid.

    <Grid>
        <Grid.RowDefinitions> ... </Grid.RowDefinitions>
        <ThingInFirstRow Grid.Row="0" />
        <ThingInSecondRow Grid.Row="1" />
        <Grid Grid.Row="2">
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <ThingInLowerLeft Grid.Column="0" />
            <ThingInLowerRight Grid.Column="0" />
        </Grid>
    </Grid>
    
  • Stick with one Grid, give it two columns, and make the things in the first two rows span across both columns using ColumnSpan.

    <Grid>
        <Grid.RowDefinitions> ... </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <ThingInFirstRow Grid.Row="0" Grid.ColumnSpan="2" />
        <ThingInSecondRow Grid.Row="1" Grid.ColumnSpan="2" />
        <ThingInLowerLeft Grid.Row="2" Grid.Column="0" />
        <ThingInLowerRight Grid.Row="2" Grid.Column="1" />
    </Grid>
    
like image 184
Joe White Avatar answered Oct 26 '22 09:10

Joe White