What are the differences between these two containers? I read manuals but I can not see when to use each other ...
taking a simple google image of software graphic environment, are the Grids supposed to be marked in yellow and the stack panels used to place containers one below the other?
Stack organizes the items in one stack, one under the other:
<StakPanel>
<TextBlock>Elemento 1</TextBlock>
<TextBlock>Elemento 2</TextBlock>
</StackPanel>
This will result, for example:
Elemento 1
Elemento 2
While the Grid organizes the elements by crews:
<Grid>
<Grid.ColumnsDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="50" />
<Grid.ColumnsDefinitions>
<TextBlock Grid.Column="1" Text="Elemento 1" />
<TextBlock Grid.Column="2" Text="Elemento 2" />
</Grid>
This what it does is that it creates 2 columns with a width of 100 pixels the first and second of 50 and a single row with the size that the elements occupy. Notice that the elements must be specified the column in which it will be placed using Grid.Column . Grids can also be assigned the height size using Grid.RowDefinition:
<Grid>
<Grid.ColumnsDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="50" />
<Grid.ColumnsDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="100" />
<RowDefinition Height="100" />
</Grid.RowDefinitions>
<TextBlock Grid.Column="1" Grid.Row="1" Text="Elemento 1" />
<TextBlock Grid.Column="2" Grid.Row="2" Text="Elemento 2" />
</Grid>
Now in this example rows were added, both with a height of 100 pixels.
Columns can also be assigned size by percentage using the asterisk * . For example let's say we want the width for the first element to be 70% of the container and the second to be 30% that together they would make 100%. This would be like this:
<Grid>
<Grid.ColumnsDefinitions>
<ColumnDefinition Width="*70" />
<ColumnDefinition Width="*10" />
<Grid.ColumnsDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="100" />
<RowDefinition Height="100" />
</Grid.RowDefinitions>
<TextBlock Grid.Column="1" Grid.Row="1" Text="Elemento 1" />
<TextBlock Grid.Column="2" Grid.Row="2" Text="Elemento 2" />
</Grid>
* 70 means that it takes 70% and * 30 that it takes 30 porcierto.
In summary, Grid is much more flexible than StackPanel, only it takes a little more configuration.