title: Stretching the items of an ItemsControl
body: <p>I'm bulding a small WPF app over here. It's all built strictly with MVVM, using nothing but DataTemplates linked to view model types.</p>
  
  <p>I've seen alot of questions about how to stretch and clip the contents of <code>ListBox</code>es so that the items fill its parent. After alot of experimenting I managed to get my head around that but now I find myself in the same scenario with the <code>ItemsControl</code> but the same tricks doesn't seem to work.</p>
  
  <p>Here's one of the <code>DataTemplate</code>s in use (a simple <code>TextBox</code>). Note how I tried setting the <code>HorizontalAlignment</code> ...</p>
  
  <pre><code>&lt;DataTemplate DataType="{x:Type vm:OneOfMyViewModelTypes}"&gt;
      &lt;TextBox 
          Text="{Binding Path=Value}"
          HorizontalAlignment="Stretch"
          /&gt;
  &lt;/DataTemplate&gt;
  </code></pre>
  
  <p>Here's the <code>ItemsControl</code> inside a <code>Grid</code> ...</p>
  
  <pre><code>&lt;Grid Background="Gray"&gt;
              &lt;Grid.Margin&gt;
                  &lt;Thickness 
                      Left="{StaticResource ConfigurationDefaultMargin}" 
                      Right="{StaticResource ConfigurationDefaultMargin}" 
                      Bottom="{StaticResource ConfigurationDefaultMargin}" 
                      Top="{StaticResource ConfigurationDefaultMargin}" 
                      /&gt;
              &lt;/Grid.Margin&gt;
              &lt;Grid.ColumnDefinitions&gt;
                  &lt;ColumnDefinition SharedSizeGroup="_key" Width="Auto"/&gt;
                  &lt;ColumnDefinition SharedSizeGroup="_value" Width="*"/&gt;
              &lt;/Grid.ColumnDefinitions&gt;
  
              &lt;ItemsControl 
                  Background="DimGray" 
                  Grid.IsSharedSizeScope="True"
                  ItemsSource="{Binding Path=Configuration, Mode=OneWay}" 
                  HorizontalAlignment="Stretch" 
                  HorizontalContentAlignment="Stretch"
                  &gt;
                  &lt;ItemsControl.ItemTemplate&gt;
                      &lt;DataTemplate&gt;
                          &lt;Grid&gt;
                              &lt;Grid.ColumnDefinitions&gt;
                                  &lt;ColumnDefinition SharedSizeGroup="_key"/&gt;
                                  &lt;ColumnDefinition SharedSizeGroup="_value"/&gt;
                              &lt;/Grid.ColumnDefinitions&gt;
                              &lt;TextBlock
                                  Style="{StaticResource ExtensionConfigurationLabel}"
                                  Grid.Column="0"
                                  Margin="5,5,5,0"
                                  Text="{Binding Path=Caption}" 
                                  /&gt;
                              &lt;ContentPresenter 
                                  Grid.Column="1"
                                  HorizontalAlignment="Stretch"
                                  Margin="5,5,5,0"
                                  Content="{Binding}" 
                                  /&gt;
                          &lt;/Grid&gt;
                      &lt;/DataTemplate&gt;
                  &lt;/ItemsControl.ItemTemplate&gt;
              &lt;/ItemsControl&gt;
          &lt;/Grid&gt;
  </code></pre>
  
  <p>I've used colors to see how the controls sizes. The <code>Grid</code> is gray and the <code>ItemsControl</code> is dark gray.</p>
  
  <p>This is the result ...</p>
  
  <p><img src="https://i.stack.imgur.com/0RvU4.png" alt="This is the result"></p>
  
  <p>As you can see from the colors the containing <code>Grid</code> stretches while the <code>ItemsControl</code> does not. I did set its <code>HorizontalAlignment</code> property to <code>Stretch</code> but it seems it has no effect. Is there anything else I need do?</p>
  
  <p>Thanks</p>