如何获得一个ListBox ItemTemplate来水平拉伸ListBox的整个宽度?


356

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

目前,它们的大小仅与名字+姓氏一样。

我已经设置了所有可以设置的元素:Horizo​​ntalAlignment =“ Stretch”。

我希望ListboxItems的背景在用户拉伸Listbox时扩展,所以我不想输入绝对值。

我该怎么做才能使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>

Answers:


468

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

添加HorizontalContentAlignment="Stretch"到您的列表框。这应该够了吧。请注意自动完成功能,因为它很容易HorizontalAlignment出错。


1
@ Agile Jedi,当您拥有自定义ListBox项目时,您知道解决方案吗?我自己遇到了这个问题。
eoldre 2011年

11
实际上,由于某种原因,该解决方案在Silverlight中不起作用。加布里埃尔的,另一方面解决方案确实
TimothyP

6
这不适用于WinRT ListView控件。我已经尝试过了。
uSeRnAmEhAhAhAhAhAh 2014年

3
这在自定义列表(Windows,而不是Silverlight)上可以正常工作,在编写xaml时要小心自动完成。如果您写“ Horiz ..”,则会得到“ Horizo​​ntalAlignment”而不是“ Horizo​​ntalContentAlignment”。选择第一个建议非常容易,因为两者都使用“ Stretch”。
2014年

1
如果将自定义项目宽度设置为自动,则自定义项目对我有用。
Lensflare 2015年

646

自从我遇到这两个职位以来,我在这里找到了另一个解决方案 ...

这是从迈尔斯的答案:

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

这对我有用。


@CameronMacFarland之所以成为Silverlight的原因,至少在我看来,是因为IT管理员人员无法弄清楚如何使用Active Directory部署WPF / Winform应用程序,并且我们想要一个不依赖于我们的干净部署方案更新。
理查德·B

@RichardB大声笑我的评论更多地针对silverlight,因为为什么Silverlight必须与众不同,并且与WPF相比,其模板已损坏。
卡梅伦·麦克法兰

@CameronMacFarland啊...不用担心。在完成Silverlight应用程序并处理ServiceReferences.ClientConfig文件之后,我将设置为避免(像瘟疫一样)避免再次开发另一个Silverlight应用程序。这是一个很酷的主意,但并不令人印象深刻。
理查德B

1
为了使它适用于listView中的数据模板:<ListView.ItemContainerStyle> <Style TargetType =“ ListViewItem”> <Setter Property =“ Horizo​​ntalContentAlignment” Value =“ Stretch”> </ Setter> </ Style> </ ListView .ItemContainerStyle>
Christopher Cook

错误:BindingExpression路径错误:在Project.CustomElement,Project.WindowsPhone,Version = 1.0.0.0,Culture = neutral,PublicKeyToken = null上找不到'Width'属性。BindingExpression:Path ='Width'DataItem = Project.CustomElement,Project.WindowsPhone,Version = 1.0.0.0,Culture = neutral,PublicKeyToken = null'; 目标元素是“ Windows.UI.Xaml.Controls.Grid”(名称=“空”);目标属性为“宽度”(类型为“双
精度

72

如果您的商品比ListBox,则此处的其他答案将无济于事:其余商品ItemTemplate仍比宽ListBox

对我有用的解决方法是禁用水平滚动条,显然,这也告诉容器所有这些项目的宽度仅与列表框一样宽。

因此,获得与列表框一样宽的ListBox项的组合修补程序如下:它们较小且需要拉伸,还是较宽且需要包装,如下所示:

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

感谢滚动条的想法


0

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


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>

0

我也遇到了同样的问题,作为一种快速的解决方法,我使用blend来确定要添加多少填充。在我的情况下为12,因此我使用负余量来消除它。现在一切都可以正确居中了

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.