logo标签列表

如何使ListBox的ItemTemplate在水平方向上拉伸到整个ListBox的宽度？

xamllistboxitem
378

我希望ListItems可以延伸其橙色背景，填满整个Listbox。

目前它们的宽度仅限于FirstName和LastName的宽度。

我已经将我能设置的每个元素都设置为: HorizontalAlignment="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>
6个回答
674

我在这里找到了另一个解决方案，因为我遇到了两个帖子中所描述的问题...

以下内容是Myles的回答：

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

这对我有用。

@CameronMacFarland 至少在我的情况下，Silverlight 的原因是因为 IT 管理员无法通过 Active Directory 部署 WPF/Winform 应用程序，而我们希望有一个干净的部署方案，不依赖于 Sneakernetting 更新。 - Richard B
@RichardB 哈哈，我的评论更多是针对Silverlight的，为什么Silverlight必须与WPF不同，并且模板比WPF差呢？ - Cameron MacFarland
@CameronMacFarland 啊...没关系。在做完一个Silverlight应用程序并且苦于ServiceReferences.ClientConfig文件的困扰后，我决定避免（像瘟疫一样）再次开发另一个Silverlight应用程序。这是一个很酷的想法，但并不令人印象深刻。 - Richard B
1
为了使数据模板在listView中起作用：<ListView.ItemContainerStyle> <Style TargetType="ListViewItem"> <Setter Property="HorizontalContentAlignment" 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'(Name='null')；目标属性为'Width'(类型为'Double')。 - Black Cid
另外，您也可以尝试简单地重用现有的主题样式，如ItemContainerStyle = "{StaticResource ListItemStretch}"。 - Yury Schkatula
517

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

将HorizontalContentAlignment="Stretch"添加到您的ListBox中。那应该就可以了。只需小心自动完成，因为很容易出错选了HorizontalAlignment。

11
由于某种原因，实际上此解决方案在Silverlight中无法正常工作。另一方面，Gabriel的解决方案可以。 - TimothyP
7
这在WinRT ListView控件上不起作用。我已经尝试过了。 - uSeRnAmEhAhAhAhAhA
3
这在自定义列表（Windows，不是Silverlight）上运作良好，只需在编写XAML时小心自动完成。如果你输入“Horiz..”，你会得到“HorizontalAlignment”，而不是“HorizontalContentAlignment”。由于两者都使用了“Stretch”，因此很容易选择第一个建议。 - Jarle Bjørnbeth
1
如果我将自定义项的宽度设置为自动，那么自定义项对我有效。 - Lensflare
1
@Jarle，非常准确！这就是我的问题所在，我甚至没有注意到。我编辑了答案，因为它太重要了，不能只呆在评论中。 - Sergei Tachenov
显示剩余6条评论
81
如果您的项目比ListBox更宽，则这里的其他答案将无法帮助：ItemTemplate中的项目仍然比ListBox宽。
对我有效的解决方法是禁用水平滚动条，这似乎也告诉所有这些项目的容器保持与列表框一样宽。
因此，结合起来的解决方案是获取ListBox项目与列表框一样宽，无论它们是较小并需要拉伸，还是较宽并需要换行，如下所示：
<ListBox HorizontalContentAlignment="Stretch" 
         ScrollViewer.HorizontalScrollBarVisibility="Disabled">

(滚动条想法的来源)

0
我的解决方法是在ScrollViewer内部的ItemsPresenter上设置属性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>
0

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

0

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接