Silverlight 4:当项目缩小时,列表框不会缩小

时间:2010-06-24 13:05:22

标签: silverlight listbox

来自this question,我将问题深入到列表框,当Listbox-Items缩小时,该列表框不会调整大小。当项目的大小增加时,它会相应地调整大小,但是当项目的大小减小时,它不会缩小。

项目可以增长/缩小,因为包含文本框的项目会随输入调整大小。

Jeremiah建议用更多代码展开一个新问题,所以我们走了:

我们的邪恶列表框是UserControl的一部分,它包含一个带有Label(Horizo​​ntalAlignment = Center)的StackPanel,列表框(HA = Left)和一个Button(HA = Right)。 listbox-items被数据链接到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>

我不知道为什么当项目大小缩小时列表框不会缩小,尽管我已将列表框的大小设置为Auto并将Horizo​​ntalAlignment设置为Left

提前致谢, 弗兰克

2 个答案:

答案 0 :(得分:5)

我终于在this post找到了解决方案。问题是,从Silverlight 3开始,ListBox使用VirtualizationStackPanel来显示ListItems。除了StackPanel之外,VirtualizationStackPanel使用它获得的所有空间,从不将其返回。因此,当列表中的最大项目缩小时,因此ListBox本身可能会缩小,因为现在存在未使用的空间,ListBox的宽度(以及相关的高度)仍然保持不变,因为VirtualizationStackPanel没有正确收缩。 / p>

要解决此问题,我们可以强制ListBox使用StackPanel而不是VirtualizationStackPanel。请注意,这可能会以性能为代价!

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

    ... // other listbox related stuff

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

</ListBox> 

答案 1 :(得分:0)

嗯......我没有你所有的代码。但是,我将上面的内容简化为此并且有效。

我希望这会以某种方式帮助你解决问题。再一次,它可能是导致问题的控件的父级。它也可能是您正在应用的样式之一。尝试从你的控件中剥离出一切不必存在的东西,然后慢慢加回来找到罪魁祸首。

我创建了一个新的silverlight应用程序,这实际上是它唯一的东西。列表框按预期增长和缩小。

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>

代码背后:

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