Silverlight 4:列表框的项目收缩时不会收缩 [英] Silverlight 4: Listbox doesn't shrink when its items shrink

问题描述

来自此问题，当Listbox-Items缩小时，我将问题深入到一个不会调整大小的列表框.当项目的大小增加时，它会相应地调整大小，但是当项目的大小减小时，它不会缩小.

这些项目可以增加/缩小，因为包含文本框的项目会随输入而调整大小.

耶利米建议开始一个新问题，并显示更多代码，所以我们开始:

我们的邪恶列表框是UserControl的一部分，其中包含一个带有标签(Horizo​​ntalAlignment = Center)，该列​​表框(HA = Left)和一个按钮(HA = Right)的StackPanel.列表框项目与ObservableCollection数据链接

您将在ListBox和ListBoxItems上识别出漂亮的BackgroundColors.我用它们来告诉项目或列表框本身不会缩小.我发现，项目"缩小了，但列表框"却没有.

好的，这是我的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>

我不知道为什么缩小项目的大小时列表框不会缩小，尽管我已将列表框的大小设置为自动"，并将Horizo​​ntalAlignment设置为左"

预先感谢， 弗兰克

解决方案

我终于在此帖子.问题是，从Silverlight 3开始，ListBox使用VirtualizationStackPanel来显示ListItems.除了StackPanel之外，VirtualizationStackPanel会使用它获得的所有空间，并且从不会将其退还给您.因此，当列表中最大的项目缩小并且由于现在有未使用的空间而导致ListBox本身可能缩小时，由于VirtualizationStackPanel不能正确收缩，因此ListBox的宽度(和高度)仍将保持不变. /p>

要解决此问题，我们可以强制ListBox使用StackPanel而不是VirtualizationStackPanel.请注意，这可能会牺牲性能！

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

    ... // other listbox related stuff

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

</ListBox> 

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

解决方案

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> 

这篇关于Silverlight 4:列表框的项目收缩时不会收缩的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！