Why does WrapPanel breaks Grid's ColumDefinitions? - wpf

Question

This is a design I use often, a grid with columns of relative sizes (using the asterisk for width) so to mimic relative margins or other similar task.
An example of something similar to what I'm working on right now:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApplication1"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="1" Text="1234567890123456789012345678901234567890123456789012345678901234567890" VerticalAlignment="Center" HorizontalAlignment="Center" TextWrapping="Wrap"/>
<TextBlock Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" Text="AAA" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="16" FontWeight="DemiBold"/>
</Grid>
</Grid>
</Window>
And this is its output
which is exactly what I expected.
But, if I just change the root Grid with a WrapPanel, like this:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApplication1"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<WrapPanel>
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="1" Text="1234567890123456789012345678901234567890123456789012345678901234567890" VerticalAlignment="Center" HorizontalAlignment="Center" TextWrapping="Wrap"/>
<TextBlock Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" Text="AAA" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="16" FontWeight="DemiBold"/>
</Grid>
</WrapPanel>
</Window>
then I get this:
Ok, there is obviously some difference in placement due to the WrapPanel layout system, and this is ok to me and even expected, but...what the heck it's happening to the columns?

Answer 1

The relative size of the columns cannot be calculated unless the Grid actually has a Width. I am not sure why you want to use a WrapPanel here but you could specify a fixed Width or MinWidth of the Grid:
<WrapPanel>
<Grid x:Name="grid" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ShowGridLines="True"
Width="300">