Silverlight:将ItemsControl中的项目宽度设置为Stretch

时间:2010-03-22 11:25:59

标签: silverlight itemscontrol html

我有一个从上到下填充的ItemsControl,但我不能让它的子项占据ItemsControl的整个宽度:

alt text

我基本上需要拉伸绿色位来填充控件的宽度(如蓝色位所示)。

我尝试过将模板项的HorizontalAlignment属性设置为Stretch,我甚至尝试将它的Width属性绑定到ItemsControl Width,但都没有效果。

应该是一个直截了当的,但这是我无法弄清楚的......

编辑:这是ItemTemplate(整个事情是ItemTemplate,它本身包含一个ItemsControl,它绑定到一个子对象列表):

<DataTemplate>
    <Border CornerRadius="5" Background="#ddd">
        <StackPanel>
            <TextBlock Text="{Binding Name}" FontSize="18" Foreground="#bbb"/>
            <ItemsControl ItemsSource="{Binding PlugIns}">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <toolkit:WrapPanel HorizontalAlignment="Stretch" />
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Margin="10,0,10,10" Tag="{Binding}" 
                                MouseEnter="StackPanel_MouseEnter">
                            <Border Child="{Binding Icon}" />
                            <TextBlock Text="{Binding Name}" />
                        </StackPanel>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </StackPanel>
    </Border>
</DataTemplate>

2 个答案:

答案 0 :(得分:3)

您需要配置ListBoxItem HorizontalContentAlignment,使用Style ListBox中的ItemContainerStyle对象执行此操作,如下所示: -

 <ListBox ....>
  <ListBox.ItemContainerStyle>
    <Style TargetType="ListBoxItem">
      <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    </Style>
  </ListBox.ItemContainerStyle>

答案 1 :(得分:1)

好的,所以当我继续构建应用程序时,我想出了如何解决这个问题。基本上,当我更改ItemsControl的模板以支持滚动时,项目跨越以水平填充:)

<ItemsControl>
    <ItemsControl.Template>
        <ControlTemplate>
            <ScrollViewer Padding="{TemplateBinding Padding}">
                <ItemsPresenter />
            </ScrollViewer>
        </ControlTemplate>
    </ItemsControl.Template>
    ...
</ItemsControl>