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

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 ?

Answer 1

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>

Answer 2

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)
:)