Question

I’m having trouble getting my UserControl to expand vertically when my window is expanded.

My UserControl currently sits inside a ItemsControl which is stretching correctly by setting the VerticalAlignment=”Stretch” property on the ItemsControl.

I add the following UserControl to the ItemsControl:

<UserControl MinWidth="930">
     <Grid VerticalAlignment="Stretch" Background="Red">
          <Grid.ColumnDefinitions>
               <ColumnDefinition Width="200" />
               <ColumnDefinition Width="730*" />
          </Grid.ColumnDefinitions>
          <Grid.RowDefinitions>
               <RowDefinition Height="400" />
               <RowDefinition Height="*" />
          </Grid.RowDefinitions>

          <DockPanel Grid.Column="1" Grid.ColumnSpan="1" Grid.RowSpan="2" Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Pink" LastChildFill="True">

              <ItemsControl Name="itemPanelOverview" Grid.Column="1" Background="Black" Margin="0"/>
         </DockPanel>
     </Grid>
</UserControl>

The UserControl is called in an ItemsControl inside of a TabControl like so:

<TabItem>
     <TabItem.Header>
          HEADER EG
     </TabItem.Header>

     <ItemsControl Name="contentItems" Grid.ColumnSpan="2" Grid.Column="1" Grid.Row="1" VerticalAlignment="Stretch" Background="Blue">
          <Grid Height="35" Background="{DynamicResource GrayMenuGradient}" >
               <Image Source="..." Stretch="None" />
               <TextBlock Text="{Binding WelcomeMessage}" />
          </Grid>
    </ItemsControl>
</TabItem>

It appears that the ItemsControl (contentItems) is stretching as expected, as I can see the blue background stretching correctly.

I haven’t set the height for this UserControl anywhere other than the Row Definitions. Is there something I’m missing?

Answer 1

There are at least two aspects at play here:

The first is that when you have items in an ItemsControl, each item is actually inside an ItemContainer, so it is the container that you want to stretch.

You can design the container by declaring an ItemContainerTemplate for your ItemsControl: http://msdn.microsoft.com/en-us/library/system.windows.controls.itemcontainertemplate.aspx

The second consideration is the ItemsPanelTemplate, which determines into what type of panel the items are placed. The ability of the items in the ItemsControl to fill up the available space is going to depend on the type of container as much as on the type of ItemContainer. For example, if you use a StackPanel for the ItemsPanelTemplate, it won’t fill up available space because StackPanel grows and shrinks according to its contents. A DockPanel could potentially work, but only the last child would grow to fill available space. Perhaps a UniformGrid could do the trick.