Silverlight 4: Listbox doesn't shrink when its

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> 

Answer 2

Well... I don't have all of your code. But, I simplified what you had above to this and it works.

I hope this will help you, in some way, figure out your problem. Once again, it could be the parent of this control causing the problems. It could also be one of your styles you are applying. Try stripping out EVERYTHING from your control that doesn't have to be there, then add it back slowly to find the culprit.

I created a new silverlight application, and this is literally the only thing in it. The listbox grows and shrinks as expected.

XAML:

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d"
    x:Class="Test.MainPage">

    <Grid x:Name="LayoutRoot">
        <StackPanel VerticalAlignment="Top" HorizontalAlignment="Left"> 
          <StackPanel.Background> 
            <SolidColorBrush Color="Black"/> 
          </StackPanel.Background> 

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

            <!-- DataTemplate to display the content --> 
            <ListBox.ItemTemplate> 
              <DataTemplate> 
                <StackPanelOrientation="Horizontal" HorizontalAlignment="Left"> 
                  <TextBox FontSize="30" Text="{Binding}" />      
                </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> 

            <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Height="30">
                <Button Content="Add" Click="Add_Click" Width="100"/>
                <Button Content="Remove" Click="Remove_Click"  Width="100"/> 
            </StackPanel>  
        </StackPanel>       
    </Grid>
</UserControl>

Code Behind:

using System;
using System.Windows;
using System.Windows.Controls;

namespace Test
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            // Required to initialize variables
            InitializeComponent();

            Count = 8;
        }

        private int Count;

        private void Add_Click(object sender, System.Windows.RoutedEventArgs e)
        {
            Count = Count * 8;

            ListBox.Items.Add("Hi Mom (" + Count.ToString() + ")");
        }

        private void Remove_Click(object sender, System.Windows.RoutedEventArgs e)
        {
            ListBox.Items.RemoveAt(ListBox.Items.Count-1);
        }
    }
}