WPF , Getting verticalstretch working as expected!

Question

I am trying to make the vertical stretch to work as expected i WPF, but for some reason it only takes the space it needs, and not the space available.

First, I am using WPF with C#, and Prism.

In the Shell.xaml (main xaml for the application) I have a grid with 2 columns and one row. The idea is to have a side panel and a main app area. The main app area grid is set to Auto Width and Auto Height. This is working as expected, and it does scale to fit the whole application in Height and Width.

Then I am using prism to insert the view (as a UserControl component) into the main app area. The UserControl is also set to Auto Width and Height, and by looking at the default settings in Expression Blend, the HorizontalAlignment and the VerticalAlignment are set to stretch!

However, the prism loaded UserControl only stretches in Width and not in height! By giving this a background color for visual feedback, I can see that it only takes the vertical space as needed, and not the whole area available!

What could be the solution for this? I have tried going trough all settings an manually overriding them to Width and Height Auto, Horizontal and Vertical Alignment to Stretch, but nothing seems to work as expected!

Some code: (Shell.xaml)

<Window Height="1140" Width="1450">
    <Grid Margin="0" Background="White">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="250" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Grid Background="#FFEEEEEE" Grid.Column="0" Grid.Row="0">   
            </Grid>          
            <ItemsControl Width="Auto" Height="Auto" Grid.Row="0" Grid.Column="1" Name="MainRegion" cal:RegionManager.RegionName="MainRegion" Padding="10" Margin="10, 0, 0, 0" Background="#FFFFFFD5" />
        </Grid>
    </Grid>
</Window>

(view that should inherit the parent height):

<UserControl Width="Auto" Height="Auto" Background="Red" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
     <!-- I want this to take the full width and height of the parent -->
</UserControl>

So is this a limitaion in the way the views are loaded into the main xaml, or is this a UserControl limitation, or something else that I do not understand?

Just to clarify; I do see the background color of ItemsControl defined in Shell.xaml stretching both Horizontal and Vertical, but not the background of the view loaded into ItemsControl.

Note that I have removed some of the xaml to make the point easier to understand!

Thanks!

Answer 1

Have you tried setting HorizontalContentAlignment and VerticalContentAlignment to Stretch in the ItemsControl?

Answer 2

I found a solution. I have to override the ItemsPanel Template to use a grid (or similar container):

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

I have also in this case removed some of the xaml to make it more readble!

Thanks

Answer 3

The default for ItemsControl.ItemsPanelTemplate is StackPanel, which compresses all of its children vertically giving the symptoms you describe.

The solution code-zoop gave changes this to <Grid>. This will work well as long as there is can only be one view in the region. But if the region has more than one view they will all be laid on top of each other instead of beside each other.

If you want a region that can handle multiple views but allow views to stretch to the full size of the region, use a DockPanel instead:

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

This will put the first view in a panel on the left side, the next one beside it, and so on until the last view which will fill all the remaining space.

If you prefer to have the multiple views stack vertically like they did with StackPanel, you'll have to set that up in ItemContainerStyle:

<ItemsControl>
  <ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
      <DockPanel />
    </ItemsPanelTemplate>
  </ItemsControl.ItemsPanel>
  <ItemsControl.ItemContainerStyle>
    <Style>
      <Setter Property="DockPanel.Dock" Value="Top" />
    </Style>
  </ItemsControl.ItemContainerStyle>
</ItemsControl>