WPF - Usercontrol height does not size properly

Question

I have an issue I cannot figure out. I hope I can explain things enough.

Basically, I have a usercontrol that I'm looking to use as a sort of in window modal dialog.

<Grid>
    <Rectangle Opacity=".75" Fill="White"/>
    <Border Width="425" BorderBrush="LightGray" BorderThickness="2" CornerRadius="20,0,20,0" Padding="3">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="auto"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="auto"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="15"/>
                <RowDefinition Height="auto"/>
            </Grid.RowDefinitions>
            <!-- First Name -->
            <Label Grid.Row="0" Grid.Column="0" Content="First Name:"/>
            <TextBox Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2" Text="{Binding FirstName}" Margin="3"/>
            <!-- Last Name -->
            <Label Grid.Row="0" Grid.Column="3" Content="Last Name:"/>
            <TextBox Grid.Row="0" Grid.Column="4" Grid.ColumnSpan="2" Text="{Binding LastName}" Margin="3"/>
            <!-- Address -->
            <Label Grid.Row="1" Grid.Column="0" Content="Address:"/>
            <TextBox Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="5" Text="{Binding Address}" HorizontalAlignment="Stretch" Margin="3"/>
            <!-- City -->
            <Label Grid.Row="2" Grid.Column="0" Content="City:"/>
            <TextBox Grid.Row="2" Grid.Column="1"  Text="{Binding City}" Margin="3"/>
            <!-- State -->
            <Label Grid.Row="2" Grid.Column="2" Content="State:"/>
            <ComboBox Grid.Row="2" Grid.Column="3" ItemsSource="{Binding States}" SelectedValue="{Binding State}" Margin="3"/>
            <!-- Zip Code -->
            <Label Grid.Row="2" Grid.Column="4" Content="Zip Code:"/>
            <TextBox Grid.Row="2" Grid.Column="5" Text="{Binding ZipCode}" Margin="3"/>
            <Button Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="6" Width="100" HorizontalAlignment="Center" Content="Save" Command="{Binding SaveCustomerCommand}"/>
        </Grid>
    </Border>
</Grid>

I also have a resourcedictionary containing a datatemplate to connect this usercontrol to it's viewmodel.

<DataTemplate DataType="{x:Type vm:CreateCustomerViewModel}">
    <view:CreateCustomerView/>
</DataTemplate>

Finally, in the main window viewmodel, I create an instance of the control's viewmodel, and in the main window view, I am using an itemscontrol and binding it's itemssource property to the instance of the control's viewmodel.

        <ItemsControl Height="600" Grid.Row="0" ItemsSource="{Binding CreateCustomerViewModel}" Grid.RowSpan="2" />

Now, my issue is using the itemscontrol in the main window, I've tried a few different ways, but I cannot get the control to be the height of the window. I'm not sure if I shouldn't be using an itemscontrol, or what I'm doing wrong. Any help is very much appreciated.

John Bowen John Bowen · Accepted Answer · 2011-03-04T04:00:49

ItemsControl is for collections. By default it uses a StackPanel to contain its child elements, which disallows stretching in the stack direction (Vertical by default). For a single item use ContentControl (the base of things like Button and Label) instead:

<ContentControl Height="600" Grid.Row="0" Content="{Binding CreateCustomerViewModel}" Grid.RowSpan="2" />

WPF - Usercontrol height does not size properly

2 Answers