Having trouble getting contents of ListBox to resize with it

Question

I tried the suggestion here regarding Stretching, but it didn't work for me.

I have a TabItem that hosts a UserControl that is essentially just a ListBox with an ItemsPanel. The ItemsPanel forces the ListBox to display its contents horizontally. The contents of the ListBox are databound to an ObservableCollection<StackPanelContents>, which is another UserControl. StackPanelContents itself basically just contains a List of objects with some visual representation (they contain a UIElement for visualization).

In general the code works properly in that it renders all of the data that I have contained in the ObservableCollection, but the problem is that the items don't resize as the window is enlarged or shrunk.

Here's an overview of what the class hierarchy looks like:

And here are the results:

The XAML for the main window just has the TabControl and TabItem:

<Window x:Class="ResizeStackPanelInListBox.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">

    <TabControl>
        <TabItem Header="Test" x:Name="MyTabItem">
            <!-- contents are set in code behind -->
        </TabItem>
    </TabControl>
</Window>

The ListBoxContainer XAML that displays the StackPanelContents looks like this:

<UserControl x:Class="ResizeStackPanelInListBox.ListBoxContainer"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Height="Auto" Width="Auto">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
        </Grid.RowDefinitions>
        <TextBlock>ListBox with StackPanels as its ListBoxItems:</TextBlock>
        <ListBox Grid.Row="1" ItemsSource="{Binding StackPanels}" HorizontalContentAlignment="Stretch">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal" Width="Auto" Height="Auto" />
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
        </ListBox>
    </Grid>
</UserControl>

And the StackPanelContents UserControl looks like this:

<UserControl x:Class="ResizeStackPanelInListBox.StackPanelContents"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Height="Auto" Width="Auto">

    <StackPanel>
        <TextBlock Text="StackPanel"></TextBlock>
        <StackPanel x:Name="MyStackPanel">
        </StackPanel>
    </StackPanel>
</UserControl>

Can anyone explain why this isn't resizing automatically, and how I can go about resolving this? Am I going to have to write my own custom panel to deal with this, and use MeasureOverride and Arrange?

Answer 1

The problem is that you're using StackPanels to arrange items in both directions so you're losing any sort of stretching. StackPanel allows its children to stretch only in the direction opposite the Orientation. The other direction will only be given as much space as it needs in order to allow the rest of the items as much space as possible. So for a default Vertical StackPanel anything you put inside will stretch horizontally but squeeze toward the top vertically. Since you have Vertical StackPanels inside a Horizontal StackPanel you're items are getting squeezed both ways.

There are a few options depending on what you want your items to do. Changing to a DockPanel will allow the last item to stretch and fill the space (the vertical one would need to set DockPanel.Dock=Top in the ItemContainerStyle). A Grid with * sized Rows and Columns works well for normal layouts but not in the case of ItemsControls since the Row and Column need to be set for each item (it can be done using ItemsControl.AlternationIndex but it's a pain and fragile). Using a 1 row/column UniformGrid (as in the answer you referenced) will evenly divide the available space and doesn't require any additional settings on the items.

If you need some more complex layout strategy with different items getting different amounts of space or stretching behavior you'll need a custom Panel.

Answer 2

try set in window

    SizeToContent="WidthAndHeight"