Silverlight 4: Listbox no se contrae cuando sus elementos se contraen

Question

desde this question, taladré el problema en un cuadro de lista, que no cambia de tamaño, cuando se reducen los elementos de Listbox. Cambia el tamaño en consecuencia, cuando el tamaño de los elementos crece, pero no se reduce, cuando el tamaño de los elementos disminuye.

Los elementos pueden aumentar o disminuir debido a que los elementos que contienen cuadros de texto cambian de tamaño con la entrada.

Jeremías sugiere comenzar una nueva pregunta con más código para mostrar, así que aquí vamos:

Nuestro cuadro de lista el mal es parte de un control de usuario, que contiene un StackPanel con una etiqueta (HorizontalAlignment = centro), el cuadro de lista (HA = izquierda) y un botón (HA = derecha). Los elementos del cuadro de lista están enlazados a un ObservableCollection

Reconocerá hermosos BackgroundColors en el ListBox y los ListBoxItems. Los usé para poder decir si los Items o el Listbox en sí mismo no se contraen. Descubrí que los Artículos se encogen, pero el Listbox no.

Ok, aquí está el código de mi control de usuario:

<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> 

no tengo ni idea de por qué el cuadro de lista no se encoge cuando el tamaño de los elementos se reducen, aunque he establecer el tamaño de cuadro de lista' en Auto y HorizontalAlignment a la izquierda

Gracias de antemano, Frank

Answer 1

fin encontré la solución en this post. El problema es que, desde Silverlight 3 en adelante, ListBox usa VirtualizationStackPanel para mostrar ListItems. Además de StackPanel, VirtualizationStackPanel usa todo el espacio que se obtiene y nunca lo devuelve. Por lo tanto, cuando el elemento más grande de la lista se reduce y, por lo tanto, el ListBox en sí podría reducirse porque ahora hay espacio sin usar, el ancho de ListBox (y la altura) seguirá siendo el mismo debido a que VirtualizationStackPanel no se contrae correctamente.

Para solucionar esto, podemos forzar al ListBox a usar StackPanel en lugar de VirtualizationStackPanel. Tenga en cuenta que esto puede ser a costa del rendimiento.

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

    ... // other listbox related stuff 

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

</ListBox> 

Answer 2

Bueno ... no tengo todo el código. Pero simplifiqué lo que tenías arriba para esto y funciona.

Espero que esto te ayude, de alguna manera, a resolver tu problema. Una vez más, podría ser el padre de este control que causa los problemas. También podría ser uno de los estilos que está aplicando. Trate de eliminar TODO de su control que no tiene que estar allí, luego vuelva a agregarlo lentamente para encontrar al culpable.

Creé una nueva aplicación Silverlight, y esto es literalmente lo único que hay en ella. El listbox crece y se contrae según lo esperado.

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> 

código subyacente:

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); 
     } 
    } 
}