WrapPanel ItemsPanelTemplate

Question

I have the following xaml:

<Border BorderBrush="Black"
                BorderThickness="1.5"
                CornerRadius="5">
    <Grid ShowGridLines="True">
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition/>
      </Grid.ColumnDefinitions>
      <ItemsControl composite:RegionManager.RegionName="MainRegion">
        <ItemsControl.ItemsPanel>
          <ItemsPanelTemplate>
            <WrapPanel/>
          </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
      </ItemsControl>
      <Button Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Top" Style="{StaticResource WindowCloseButton}"/>
    </Grid>
</Border>

When I resize my window, the items in the wrap panel do not wrap.

It works when the ItemsControl is not in a grid:

<Border BorderBrush="Black"
                BorderThickness="1.5"
                CornerRadius="5">
    <ItemsControl composite:RegionManager.RegionName="MainRegion">
      <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
          <WrapPanel/>
        </ItemsPanelTemplate>
      </ItemsControl.ItemsPanel>
    </ItemsControl>
</Border>

Is there a way to get the items to wrap correctly if the ItemsControl is in a Grid?

Answer 1

Problem in this line:

<ColumnDefinition Width="Auto"/>

The word 'Auto' means 'I will resize as much as it is necessary'. Use fixed number or asterix:

  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="0.5*"/>
    <ColumnDefinition/>
  </Grid.ColumnDefinitions>

Answer 2

Change your Grid Column width to * instead of auto

This:

<ColumnDefinition Width="Auto"/>

Becomes:

<ColumnDefinition Width="*"/>