Silverlight 3：ListBox DataTemplate Horizo​​ntalAlignment

Question

我有一个 ListBox，它的 ItemTemplate 绑定到 DataTemplate。我的问题是我无法让模板中的元素拉伸到 ListBox 的整个宽度。

<ListBox x:Name="listPeople" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" 
    Margin="0,0,0,0" Background="{x:Null}" SelectionMode="Extended" Grid.Row="1" 
    ItemTemplate="{StaticResource PersonViewModel.BrowserDataTemplate}" 
    ItemsSource="{Binding Mode=OneWay, Path=SearchResults}" >
</ListBox>

<DataTemplate x:Key="PersonViewModel.BrowserDataTemplate">
   <ListBoxItem HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
     <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="5,5,5,5">
       <Border Opacity=".1" x:Name="itemBorder"  Background="#FF000000"   
         HorizontalAlignment="Stretch" VerticalAlignment="Stretch" 
         CornerRadius="5,5,5,5" MinWidth="100" Height="50"/>
      </Grid>
   </ListBoxItem>
</DataTemplate>

如您所见，我在网格中添加了一个边框来指示模板的宽度。我的目标是看到这个边框扩展到列表框的整个宽度。目前它的宽度由它的内容或 MinWidth 决定，这是目前唯一让它保持可见的东西。

Answer 1

我正在使用带有 VS 2012 的 Silverlight 5。我遇到了同样的问题。我有水平列表框，其中包含我自己的自定义对象作为 ItemsSource。我想要扩展列表框项目。但它们并没有扩大。我不想为每个列表框项目提供任何硬编码宽度。我在这里尝试了所有答案，但没有任何效果。我刚刚给了 ItemsSource ={Binding Persons} DisplayMemberPath="First Name"。就这些

Answer 2

我的 ListBoxItem 包含一个 CheckBox 并且上述解决方案对我不起作用（很可能是由于 CheckBox 的性质，而不是那些解决方案）我能够通过不绑定到“内容”属性来强制执行此功能复选框，但明确定义 XAML 内联：

<CheckBox HorizontalAlignment="Stretch" IsChecked="{Binding Path=IsSelected, Mode=TwoWay}">
    <TextBlock
        MinWidth="130"
        Margin="0,-2,0,0"
        HorizontalAlignment="Stretch"
        Text="{Binding Path=DisplayText}" />
</CheckBox>

需要边距，因为 TextBox 文本未与 CheckBox 的复选标记对齐。 MinWidth 也是必需的。

Answer 3

Here 是使用列表框控件的控件模板和数据模板的示例。请参阅 XAML 标记，该标记使列表框项的边框变宽。

Answer 4

为 ListBox 创建数据模板时，不应包含 <ListBoxItem>。 DataTemplate 的内容将放置在生成的容器内。您可以使用 ItemContainerStyle 控制该容器的构造方式。

ListBoxItem 的默认控件样式默认用于定义ItemContainerStyle。此样式将 ListBoxItem.Horizo​​ntalContentAlignment 属性设置为“左”。请注意 ContentPresenter 如何将其 Horizo​​ntalAlignment 绑定到此属性。

您需要覆盖在绑定到 ListBox 时生成的 ListBoxItem 容器的样式。这可以通过设置 ItemContainerStyle 来完成。将 Horizo​​ntalContentAlignment 属性设置为“Stretch”。

下面是默认的 ListBoxItem 样式。供参考。

<Style x:Key="ListBoxItemStyle1" TargetType="ListBoxItem">
            <Setter Property="Padding" Value="3"/>
            <Setter Property="HorizontalContentAlignment" Value="Left"/>
            <Setter Property="VerticalContentAlignment" Value="Top"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="TabNavigation" Value="Local"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <Grid Background="{TemplateBinding Background}">
                            <!-- VSM excluded for readability -->
                            <Rectangle x:Name="fillColor" Fill="#FFBADDE9" RadiusX="1" RadiusY="1" IsHitTestVisible="False" Opacity="0"/>
                            <Rectangle x:Name="fillColor2" Fill="#FFBADDE9" RadiusX="1" RadiusY="1" IsHitTestVisible="False" Opacity="0"/>
                            <ContentPresenter x:Name="contentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
                            <Rectangle x:Name="FocusVisualElement" Stroke="#FF6DBDD1" StrokeThickness="1" RadiusX="1" RadiusY="1" Visibility="Collapsed"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Answer 5

我花了一个小时试图解决这个问题。非常非常令人沮丧。您不必覆盖 ListBoxItem 的整个默认样式。我无法让它工作。最后，我通过简单地覆盖 ListBox.ItemContainerStyle 部分中的 Horizo​​ntalContentAlignment 属性解决了这个问题，例如：

            <ListBox x:Name="ClassList" ItemsSource="{Binding LineClasses}"
                     ScrollViewer.VerticalScrollBarVisibility="Visible"
                     SelectionMode="Extended"
                     ScrollViewer.HorizontalScrollBarVisibility="Hidden" HorizontalContentAlignment="Stretch"
                     HorizontalAlignment="Stretch" Loaded="ClassList_Loaded"
                     VerticalAlignment="Stretch" Grid.Row="0">
                <ListBox.ItemContainerStyle>
                    <Style TargetType="ListBoxItem">
                        <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
                    </Style>
                </ListBox.ItemContainerStyle>
                    <ListBox.ItemTemplate>

                    <DataTemplate>
                        <Border BorderBrush="Black" CornerRadius="3" Background="#FFE88D34"
                            BorderThickness="1" HorizontalAlignment="Stretch" >
                            <Grid Background="Transparent" HorizontalAlignment="Stretch" >
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <TextBlock 
                                    Grid.Column="0" HorizontalAlignment="Stretch"
                                    Margin="2"                                   
                                    FontSize="10"
                                    Text="{Binding DisplayClassNm}"/>
                            </Grid>

                        </Border>
                    </DataTemplate>
                </ListBox.ItemTemplate>

这对我来说是一种享受。

迈尔斯

Answer 6

我在这里注意到了两件事，因为我遇到了同样的问题，但无法按照您尝试的方式解决。

首先，您不需要在 DataTemplate 中显式放置 ListBoxItem。这是自动为您创建的，因此您实际上将 ListBoxItem 包含在为您创建的项目中。我在Snoop 中查看了这一点以确认。

其次，我不知道具体原因，但我也无法从对齐属性中获得拉伸行为。我将其更改为使用 Width 属性上的 RelativeSource 绑定到包含 ListBoxItem 的 ActualWidth 属性。这对我有用。

Width="{Binding RelativeSource={RelativeSource 
   AncestorType={x:Type ListBoxItem}}, Path=ActualWidth}"

如果您需要在为您隐式创建的 ListBoxItem 上设置样式属性，请在 ListBox.ItemContainerStyle 元素中使用 Style 元素。

希望这会有所帮助...