Why doesn't the grid layout work without specifying RowDefinitions and Column Definitions?

Question

<Page
    x:Class="AllControls.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:AllControls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">



        <Rectangle Width="100" Height="100" Fill="Red" Grid.Column="0" Grid.Row="0"/>
        <Rectangle Width="100" Height="100" Fill="Orange"  Grid.Column="1"  Grid.Row="0"/>
        <Rectangle Width="100" Height="100" Fill="Yellow"  Grid.Column="0" Grid.Row="1"/>
        <Rectangle Width="100" Height="100" Fill="Green" Grid.Column="1"  Grid.Row="1"/>
        <Rectangle Width="100" Height="100" Fill="Blue" Grid.Column="0" Grid.Row="2"/>
        <Rectangle Width="100" Height="100" Fill="Indigo" Grid.Column="1" Grid.Row="2"/>
        <Rectangle Width="100" Height="100" Fill="Violet" Grid.Column="0" Grid.Row="3"/>
        <Rectangle Width="100" Height="100" Fill="Purple" Grid.Column="1" Grid.Row="3"/>
    </Grid>
</Page>

I am providing, Row Number and Column number for each element in this case Rectangles. I have also provided height and width for each of them.

I come from an HTML background.

Can someone explain to me how the tags RowDefinitions and ColumnDefinitions work here ?

score 2 · Accepted Answer · edited May 23 '17 at 12:18

2

You have to specify RowDefinitions and ColumnDefinitions so that it knows how to size the rows and columns. Otherwise it doesn't know whether you want auto-sizing or star-sizing. And it also needs to know how many rows and columns you need up front; it doesn't add them on the fly based on your values of Grid.Row and Grid.Column.

I think the code you wrote looks reasonable, and it would be nice if it used a default when you don't specify, but unfortunately it doesn't. Instead, it builds a single-column, single-row grid and stacks all the children on top of each other.

I can think of a couple ways to write some XAML that will do what you want.

One way:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Rectangle Width="100" Height="100" Fill="Red" Grid.Column="0" Grid.Row="0"/>
    <Rectangle Width="100" Height="100" Fill="Orange"  Grid.Column="1"  Grid.Row="0"/>
    ...
</Grid>

Another way:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="100" />
        <ColumnDefinition Width="100" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="100" />
        <RowDefinition Height="100" />
        <RowDefinition Height="100" />
        <RowDefinition Height="100" />
    </Grid.RowDefinitions>
    <Rectangle Fill="Red" Grid.Column="0" Grid.Row="0"/>
    <Rectangle Fill="Orange"  Grid.Column="1"  Grid.Row="0"/>
    ...
</Grid>

edited May 23 '17 at 12:18

Community

1
1

answered Jun 03 '13 at 13:55

Andrew

895
5
17

so if i want to create a 4x2 grid, I need to provide 4 RowDefinitions and two column definitions ? Why have you only given three RowDefinitions ? 4th one is automatically arranged or what ? Is it possible for me to have table like structure where all the rows need not have same number of columns. – Amogh Talpallikar Jun 03 '13 at 14:43
Oops, my mistake. You do need four RowDefinitions, so I have edited my answer. Each row always has the same number of columns, but you can use Grid.ColumnSpan="2" on a rectangle to make it two columns wide (assuming you don't specify an explicit width on the rectangle). Similarly for Grid.RowSpan. – Andrew Jun 03 '13 at 18:02
Thank you. Thanks a lot. I am fed up with every new GUI framework coming up with their own markup language and new layout rules. – Amogh Talpallikar Jun 03 '13 at 18:40
I can sympathize. Lately I've been trying to go the opposite direction as you (I have a XAML background and am learning HTML/CSS), and I'm finding there are some things I need to "unlearn." – Andrew Jun 03 '13 at 21:12
Hey, just wanted to know. How do HTML-CSS-JS based metro apps perform on devices compared to XAML based apps ? – Amogh Talpallikar Jun 04 '13 at 05:36
BTW if you are learning CSS layouts. apart from cross browser problems. You will probably have a hard time understanding layouts. Here the layouts dont mean as their name suggests. Go thru this website If you ever get confused with layouts and positioning in CSS. http://learnlayout.com/ – Amogh Talpallikar Jun 04 '13 at 05:39
I'm afraid I don't have the experience to be able to answer your question about performance. Thank you very much for the CSS layout link though! That looks like exactly what I need. – Andrew Jun 04 '13 at 14:03

Chris W. · Answer 2 · 2013-06-03T15:34:39.020

Like Mr. Andrew pointed out, you'll have to define your layout more to accomplish it using specified RowDefinition / ColumnDefinition to basically manually lay your stuff out. If you're looking for something a bit more fluid with less requirement for defining your layout structure you should look into GridView / VariableSizeWrapGrid (I think is more of what you're looking for.)

Both of which have multiple examples available around the web and are pretty simple to get used to. Hope this helps on your transition from HTML to XAML (ps, in my opinion XAML > HTML)

:)

Why doesn't the grid layout work without specifying RowDefinitions and Column Definitions?

2 Answers2