Stretch height of nested ItemsControl

Question

On MainWindow, I have an ItemsControl that I'm adding UserControls to, and said UserControl also contains an ItemsControl containing other UserControls.

The problem is that a lot of items in the second ItemsControl aren't showing because they go past the height of the UserControl as it appears on MainWindow.

How can I make sure the UserControls in the first ItemsControl always stretch enough to show all UserControls in their ItemsControl? For trial and error I tried stretching via a ItemTemplate but that didn't change a thing.

<Window x:Class="X.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <DataTemplate x:Key="DataTemplate1">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>    
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <ItemsPresenter Grid.Row="0" Grid.Column="0" DataContext="{Binding}"/>
            </Grid>
        </DataTemplate>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <ItemsControl Grid.Row="0" x:Name="ic" ItemTemplate="{DynamicResource DataTemplate1}"/>
    </Grid>
</Window>

--

<UserControl x:Class="X.UserControl1"
             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" 
             mc:Ignorable="d" Height="113" Width="209">
    <UserControl.Resources>
        <DataTemplate x:Key="DataTemplate1">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <ItemsPresenter DataContext="{Binding}"/>
            </Grid>
        </DataTemplate>
    </UserControl.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Label Grid.Row="0" Content="Label" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top"/>
        <ItemsControl Grid.Row="1" x:Name="ic" Margin="0,36,0,0" ItemTemplate="{DynamicResource DataTemplate1}"/>
    </Grid>
</UserControl>

--

<UserControl x:Class="X.UserControl2"
             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" 
             mc:Ignorable="d" Height="40" Width="64">
    <Grid>
        <Label Content="Label2" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top"/>

    </Grid>
</UserControl>

Your problem isn't just that both UserControls have Height/Width specified is it (the first one won't stretch)? — Chris, Aug 18 '13 at 21:17
@Chris That actually did the trick.. I thought a usercontrol's width and height only affected design time, could you add this as an answer please? — natli, Aug 20 '13 at 09:44
As a slight followup, you may be able to set your design time height and width using `d:DesignHeight="500" d:DesignWidth="500"`, using the namespace `xmlns:d="http://schemas.microsoft.com/expression/blend/2008" `. Visual Studio 2012 seems to do this by default when creating a new `UserControl` — Chris, Aug 30 '13 at 09:45
@Chris Yeah, that's what it did by default for me as well, but when I resized the window in the GUI editor it apparently changed it from DesignHeight to normal Height which is why it didn't occur to me this was causing it. Thanks for the tip though ;D — natli, Aug 31 '13 at 11:28
Ah, didn't realise that, I'll keep an eye out next time I resize a window =D Good luck. — Chris, Aug 31 '13 at 11:57

score 0 · Accepted Answer · answered Aug 20 '13 at 12:20

Added from my above comment, which turned out to be the problem.

Your UserControls have Height and Width explicitly set, which means they won't automatically resize/stretch to accommodate the child controls as you desire.

Removing the Height (and ideally Width), should do the trick:

<UserControl x:Class="X.UserControl1"
         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" 
         mc:Ignorable="d" />
    <!-- Your Code -->         
</UserControl>

Stretch height of nested ItemsControl

1 Answers1