Silverlight 4: Listbox doesn't shrink when its items shrink

Question

from this question, I drilled down the problem to a listbox, that doesn't resize, when the Listbox-Items shrink. It resizes accordingly, when the size of the items grow, but it doesn't shrink, when the size of the items decrease.

The items can grow/shrink because the items containing textboxes, that resize with the input.

Jeremiah suggested to start a new question with more code to show, so here we go:

Our evil listbox is part of a UserControl, that contains a StackPanel with a Label (HorizontalAlignment=Center), the listbox (HA=Left) and a Button (HA=Right). The listbox-items are datalinked to an ObservableCollection

You will recognize beautiful BackgroundColors on the ListBox and the ListBoxItems. I used them to be able to tell wheter the Items or the Listbox itself doesn't shrink. I found out, that the Items shrink, but the Listbox doesn't.

Ok, here is the code of my UserControl:

<StackPanel VerticalAlignment="Top" HorizontalAlignment="Left">
  <StackPanel.Background>
    <SolidColorBrush Color="{StaticResource ColorBasicDark}"/>
  </StackPanel.Background>

  <sdk:Label x:Name="LabelServiceName" FontSize="{StaticResource FontSizeMedium}" Margin="2" HorizontalAlignment="Center" Content="LabelServiceName">
    <sdk:Label.Foreground>
      <SolidColorBrush Color="{StaticResource ColorBasicLight}"/>
    </sdk:Label.Foreground>
  </sdk:Label>

  <ListBox x:Name="ListBoxCharacteristics" BorderBrush="{x:Null}" Margin="0" HorizontalContentAlignment="Left" FontSize="9.333" HorizontalAlignment="Left">
    <ListBox.Foreground>
      <SolidColorBrush Color="{StaticResource ColorBasicLight}"/>
    </ListBox.Foreground>

    <!-- DataTemplate to display the content -->
    <ListBox.ItemTemplate>
      <DataTemplate>
        <StackPanel x:Name="StackPanelBorder" Orientation="Horizontal" HorizontalAlignment="Left">
          <TextBox x:Name="TextBoxCharacteristicName" Style="{StaticResource InputTextBox}" Text="{Binding Name}" />
          <TextBox x:Name="TextBoxSep" Style="{StaticResource ReadOnlyTextBox}" Text="=" />
          <TextBox x:Name="TextBoxFuncOrValue" Style="{StaticResource InputTextBox}" Text="{Binding Value.Text}" />
          <TextBox x:Name="TextBoxValue" Style="{StaticResource ReadOnlyTextBox}" />
          <Button x:Name="ButtonRemove" Style="{StaticResource BasicButtonStyle}" Content="-" Click="ButtonRemove_Click" />
        </StackPanel>
      </DataTemplate>
    </ListBox.ItemTemplate>

    <ListBox.ItemContainerStyle>
      <Style TargetType="ListBoxItem">
        <Setter Property="HorizontalAlignment" Value="Left" />
        <Setter Property="Background" Value="Yellow" />
      </Style>
    </ListBox.ItemContainerStyle>

    <ListBox.Background>
      <SolidColorBrush Color="Red" />
    </ListBox.Background>
  </ListBox>

  <Button x:Name="ButtonAddCharaDisplayObject" Style="{StaticResource BasicButtonStyle}" Content="+" HorizontalAlignment="Right" Click="ButtonAddCharaDisplayObject_Click" />
</StackPanel>

I have no idea why the listbox doesn't shrink when the size of the items shrink, although I have set the listbox' size to Auto and HorizontalAlignment to Left

Thanks in advance, Frank

Answer 1

I finally found the solution in this post. The problem is, that from Silverlight 3 on, the ListBox uses VirtualizationStackPanel to display the ListItems. Other than StackPanel, VirtualizationStackPanel uses all the space it gets and never gives it back. So, when the biggest item in your list shrinks and therefor the ListBox itself could shrink because now there is unused space, the ListBox' width (and height for that matter) will still stay the same because of VirtualizationStackPanel doesn't shrink properly.

To fix this, we can force the ListBox to use StackPanel instead of VirtualizationStackPanel. Note, that this may come at the cost of performance!

<ListBox HorizontalContentAlignment="Left" FontSize="9.333" HorizontalAlignment="Left"> 

    ... // other listbox related stuff

    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel />
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>

</ListBox>