如何让ListBox ItemTemplate水平拉伸ListBox的整个宽度?

时间:2009-05-08 08:37:57

标签: xaml listboxitem

我想让ListItems以橙色背景扩展为Listbox的整个宽度。

目前它们只与FirstName + LastName一样宽。

我已将每个元素设置为:Horizo​​ntalAlignment =“Stretch”。

我希望ListboxItems的背景随着用户拉伸列表框而展开,因此我不想输入绝对值。

我需要做什么才能使ListBoxItems的背景颜色填充ListBox的宽度?

<Window x:Class="TestListBoxSelectedItemStyle.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:TestListBoxSelectedItemStyle"
    Title="Window1" Height="300" Width="300">

    <Window.Resources>
        <local:CustomerViewModel x:Key="TheDataProvider"/>

        <DataTemplate x:Key="CustomerItemTemplate">
            <Border CornerRadius="5" Background="Orange" HorizontalAlignment="Stretch" Padding="5" Margin="3">
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" Width="Auto">
                    <TextBlock HorizontalAlignment="Stretch">
                    <TextBlock.Text>
                        <MultiBinding StringFormat="{}{0} {1}">
                            <Binding Path="FirstName"/>
                            <Binding Path="LastName"/>
                        </MultiBinding>
                    </TextBlock.Text>
                    </TextBlock>
                </StackPanel>
            </Border>
        </DataTemplate>

    </Window.Resources>

    <Grid>
        <ListBox ItemsSource="{Binding Path=GetAllCustomers, Source={StaticResource TheDataProvider}}"
                 ItemTemplate="{StaticResource CustomerItemTemplate}"/>
    </Grid>
</Window>

6 个答案:

答案 0 :(得分:627)

我找到了another solution here,因为我遇到了两个帖子......

这是来自Myles的回答:

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

这对我有用。

答案 1 :(得分:415)

我确定这是重复的,但我找不到同样答案的问题。

HorizontalContentAlignment="Stretch"添加到ListBox。这应该够了吧。请注意自动完成,因为错误地获取HorizontalAlignment非常容易。

答案 2 :(得分:66)

如果您的商品更宽而不是ListBox,则此处的其他答案将无济于事:ItemTemplate中的商品仍然比ListBox更宽

对我有用的修复是禁用水平滚动条,显然,它还告诉容器所有这些项目只能保持与列表框一样宽。

因此,获得与列表框一样宽的ListBox项目的组合修复,无论它们是否更小,需要拉伸,还是更宽,需要包装,如下所示:

<ListBox HorizontalContentAlignment="Stretch" 
         ScrollViewer.HorizontalScrollBarVisibility="Disabled">

credits for the scroll bar idea

答案 3 :(得分:0)

由于边框仅用于视觉外观,因此您可以将其放入ListBoxItem的ControlTemplate中并修改其中的属性。在ItemTemplate中,您只能放置StackPanel和TextBlock。通过这种方式,代码也保持干净,因为控件的外观将通过ControlTemplate进行控制,并且要显示的数据将通过DataTemplate进行控制。

答案 4 :(得分:0)

我的修复是在HorizontalAlignment="Stretch"内的ItemsPresenter设置ScrollViewe的属性。

希望这有助于某人...

<Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBox">
                    <ScrollViewer x:Name="ScrollViewer" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}" Padding="{TemplateBinding Padding}" HorizontalAlignment="Stretch">
                        <ItemsPresenter  Height="252" HorizontalAlignment="Stretch"/>
                    </ScrollViewer>
                </ControlTemplate>
            </Setter.Value>
        </Setter>

答案 5 :(得分:0)

我也有同样的问题,作为一个快速的解决方法,我使用混合来确定添加了多少填充。在我的情况下它是12,所以我使用负边距来摆脱它。现在一切都可以正确居中