WPF UserControl fill mainwindow

Question

I am having trouble getting my UserControl to properly fill/resize with the parent window. I'm writing a WPF application using MVVM. I've searched for other answers, and I haven't been able to figure this out.

MainWindow.xaml

<Window x:Class="QiXR.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:vm="clr-namespace:QiXR.ViewModel"
    xmlns:vw="clr-namespace:QiXR.View"
    Title="MainWindow">
<Window.Resources>
    <DataTemplate DataType="{x:Type vm:XRTestCaseListViewModel}">
        <vw:XRTestCaseListView/>
    </DataTemplate>

</Window.Resources>
<Grid>
    <ItemsControl ItemsSource="{Binding ViewModels}" />
</Grid>

UserControl

<UserControl x:Class="QiXR.View.XRTestCaseListView"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         VerticalAlignment="Stretch" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
<UserControl.Resources>
    <Style x:Key="DataGridCheckBoxStyle" TargetType="CheckBox" BasedOn="{StaticResource {x:Type CheckBox}}">
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Setter Property="HorizontalAlignment" Value="Center"/>
    </Style>
</UserControl.Resources>

<Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="160"/>
        <ColumnDefinition Width="160"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="30"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="45"/>
    </Grid.RowDefinitions>

Here's what the display looks like when I launch it UserControl in MainWindow

Is it possible to do this in the xaml of either the UserControl or MainWindow? Thanks

Looks like how it should be. Items in an ItemsControl are sized to their own height. Why have it in an ItemsControl? Are you expected to have multiple different views in there? — , Mar 16 '16 at 16:38
When you say you expect the space below the buttons to be collapsed, do you mean the window height should be the size of the items control and buttons? Or that the buttons should be at the bottom of the window and the window stays a fixed size? — Jay T, Mar 16 '16 at 17:13
@Will Yeah I intend to have more than one view (3 specifically). I changed the ItemsPanelTemplate per Rachel's suggestion below and achieved the behavior I was looking for. However, I'm not married to using ItemsControl generally, it's just the thing that I found doing google searches. (total noob here btw). I'd be open to suggestions for other ways to display views :) — Brad Johnson, Mar 17 '16 at 20:34
@JayT I was looking for the former as opposed to the latter. — Brad Johnson, Mar 17 '16 at 20:35

score 0 · Accepted Answer · answered Mar 16 '16 at 17:27

An ItemsControl defaults to using a StackPanel to display data, and StackPanel limits its size to the size of its children.

Try switching the ItemsPanelTemplate to something like a DockPanel instead if you only have one item in your ViewModels collection :

<ItemsControl ItemsSource="{Binding ViewModels}">
    <!-- ItemsPanelTemplate -->
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <DockPanel />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

You'll also have to set the ItemContainerStyle property for DockPanel.Dock="Top" if you plan on having more than one item, perhaps with a converter so the last item is DockPanel.Dock="Fill". Or switch to use a different panel type that also stretches to fill all available space, and allows it's children to stretch as well.

That said, I'd recommend switching to using a ContentControl instead of an ItemsControl if you are only displaying one item.

<ContentControl Content="{Binding MyViewModel}" />

Changing the ItemsPanelTemplate did the trick! Thanks Raghel! — Brad Johnson, Mar 17 '16 at 20:30

score -1 · Answer 2 · answered Mar 17 '16 at 21:00

If you're looking to have the window be the size of the content (including the menu and buttons below the ItemsControl) with the option to have the window grow bigger if more content is available, you can set the SizeToContent property:

<Window x:Class="Project.Window"
    x:Name="userControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="400" MaxHeight="700"
    SizeToContent="Height" WindowStartupLocation="CenterScreen">

</Window>

The window will grow in height to fit its contents. In there, you could also set the MaxHeight property so that the window doesn't get too large if the ItemsControl has quite a few items in it.

WPF UserControl fill mainwindow

2 Answers2

Linked