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

Posted 2023-02-15

【中文标题】如何让 ListBox ItemTemplate 水平拉伸 ListBox 的整个宽度？

【英文标题】：How to get a ListBox ItemTemplate to stretch horizontally the full width of the ListBox?

【发布时间】：2010-10-24 17:47:11

【问题描述】：

我想让 ListItems 以其橙色背景扩展整个列表框的宽度。

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

我已将所有元素设置为：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>

【参考方案1】：

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

这是来自迈尔斯的回答：

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

这对我有用。

【讨论】：

@CameronMacFarland Silverlight 的原因，至少在我的情况下，是因为 IT 管理员无法弄清楚如何使用 Active Directory 部署 WPF/Winform 应用程序，我们想要一个干净的部署方案这并不依赖于我们 Sneakernet 的更新。

@RichardB 大声笑我的评论更多是针对silverlight，就​​像为什么silverlight 必须不同，并且与WPF 相比，它的模板损坏了。

@CameronMacFarland 啊...不用担心。在完成了一个 Silverlight 应用程序并在 ServiceReferences.ClientConfig 文件中苦苦挣扎之后，我确定我将避免（就像瘟疫一样）再次开发另一个 Silverlight 应用程序。这是一个很酷的想法，但并不令人印象深刻。

要使其适用于 listView 中的数据模板：

错误：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'（名称='null'）；目标属性是“宽度”（类型“双”）

【参考方案2】：

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

将HorizontalContentAlignment="Stretch" 添加到您的列表框。这应该够了吧。小心自动完成，因为很容易误得到HorizontalAlignment。

【讨论】：

@Agile Jedi，当您有自定义列表框项目时，您知道解决方案吗？我自己也遇到了这个问题。

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

这不适用于 WinRT ListView 控件。我已经试过了。

这适用于自定义列表（Windows，而不是 Silverlight），只是在编写 xaml 时要小心自动完成。如果你写“Horiz..”，你会得到“Horizo​​ntalAlignment”而不是“Horizo​​ntalContentAlignment”。选择第一个建议很容易，因为两者都使用“Stretch”。

如果我将自定义项宽度设置为自动，自定义项对我有用。

【参考方案3】：

如果您的项目比ListBox宽，这里的其他答案将无济于事：ItemTemplate 中的项目仍然比ListBox 宽。

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

因此，获得与列表框一样宽的列表框项目的组合修复方法如下：

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

(credits for the scroll bar idea)

【参考方案4】：

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

【参考方案5】：

对我来说，解决方法是在 ItemsPresenter 内的 ScrollViewer.. 上设置属性 HorizontalAlignment="Stretch"。

希望这对某人有所帮助...

<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>

【参考方案6】：

我也遇到了同样的问题，作为一种快速解决方法，我使用 blend 来确定添加了多少填充。就我而言，它是 12，所以我使用负边距来摆脱它。现在一切都可以正确居中了