How do I make an ItemsControl stretch to fill all availible space?

Question

I have an ItemsControl, with its ItemsSource bound to a list of items. The size of each of the items is as small as they can be, what I need is for the control and the items

Answer 1

I think this ought to work, depending on what contains the outermost Grid.

By default, a Grid will stretch to fill its container, and it'll cause its contents to stretch to fill itself. If you're putting the ItemsControl in a DockPanel and setting DockPanel.Dock="Bottom" on the ItemsControl, it'll fill the bottom of the DockPanel, so if I understand correctly, that's not what you want.

<Grid>
    <ItemsControl 
        ItemsSource="{Binding Owner.LoadPointCharts}"
        x:Name="ItemsControl"
        >
        <ItemsControl.ItemContainerStyle>
            <Style TargetType="ContentPresenter">
                <Setter Property="VerticalAlignment" Value="Stretch" />
                <Setter Property="HorizontalAlignment" Value="Stretch" />

                <Setter Property="Visibility">
                    <Setter.Value>
                        <MultiBinding Converter="{StaticResource CompareIndexToVisibilityConverter}">
                            <Binding Path="Index" />
                            <Binding Path="SelectedIndex" />
                        </MultiBinding>
                    </Setter.Value>
                </Setter>
            </Style >
        </ItemsControl.ItemContainerStyle>
    </ItemsControl>
</Grid>

Grid is kind of the Swiss Army boat anchor of XAML layout. Throw 'em around everywhere.

If you want to dock other stuff in a DockPanel, here's a simple DockPanel layout:

<Window xmnls:blah="blah blah etc.">
    <Window.DataContext>
        <local:MyViewModel />
    </Window.DataContext>
    <Grid>
        <DockPanel>
            <Menu DockPanel.Dock="Top">
                <!-- Menu Items-->
            </Menu>
            <Grid>
                <!-- 
                This assumes we've got a DataTemplate in a resource dictionary  
                somewhere with DataType="{x:Type local:MyViewModel}" 
                -->
                <ContentControl
                    Content="{Binding}"
                    />
            </Grid>
        </DockPanel>
    </Grid>
</Window>

Answer 2

I had the same problem and found out that ItemsControl by default uses a StackPanel for his children. Replacing this with a Grid solved the problem:

 <ItemsControl>
      <ItemsControl.ItemsPanel>
           <ItemsPanelTemplate>
                <Grid />
           </ItemsPanelTemplate>
      </ItemsControl.ItemsPanel>
 </ItemsControl>

Edit: This only works for one child element!

Answer 3

The Grid as Template won't work since items are put over under. Using a DockPanel works fine:

  <ItemsControl>
  <ItemsControl.ItemsPanel>
       <ItemsPanelTemplate>
            <DockPanel/>
       </ItemsPanelTemplate>
  </ItemsControl.ItemsPanel>

Answer 4

The accepted answer is a little too complex in my opinion. Also setting the positions of your items in a Grid can be annoying. UniformGrid is what you need.

<ItemsControl>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Rows="1"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>