ListBox 不会在多列 WPF 中水平显示数据答案

【问题标题】：ListBox won't show data horizontally in multiple columns WPFListBox 不会在多列 WPF 中水平显示数据
【发布时间】：2016-11-29 14:02:56
【问题描述】：

我在这里阅读了一些关于该问题的帖子，但仍然没有找到解决我的问题的方法，我也使用了这个guide。

我的 ListBox 仍然显示为带有 ScrollViewer 的长列表，而不是我所指的水平显示。

XAML：已编辑！

<DockPanel LastChildFill="False" IsEnabled="{Binding IsWindowEnabled}" MinWidth="724" Background="Red">
    <!-- save notifictaion popup -->
    <Label DockPanel.Dock="Top" Margin="10" FontSize="15" Foreground="Green" Content="{x:Static ml:MultiLang._123}" x:Name="ML_0003" />
    <StackPanel DockPanel.Dock="Top" Orientation="Horizontal" Margin="10 0">
        <Label Content="Select Constant Type" Margin="0 0 10 0" />
        <ComboBox Width="150" ItemsSource="{Binding ComboNames}" DisplayMemberPath="Value" SelectedValuePath="Key" SelectedValue="{Binding SelectedComboType}" />
    </StackPanel>
    <ListBox DockPanel.Dock="Top" BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Stretch"  Margin="10" ItemsSource="{Binding Combos}" SelectedItem="{Binding SelecetedCombo}" ScrollViewer.CanContentScroll="False" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal"/>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal" Margin="0 0 0 5">
                    <Label Content="{Binding Index}" Margin="10 0" Width="20" />
                    <TextBox Width="150" Margin="0" IsEnabled="{Binding IsEditable}" Text="{Binding Path=Value, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True}" />
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</DockPanel>

但我的列表仍然是这样的：

图片：EDITED No.2

我做错了什么？

非常感谢！

【问题讨论】：

首先尝试将HorizontalAlignment="Stretch" 放在ListBox 上。然后它应该水平拉伸以适合其父级。在DockPanel 中以您想要的方式对齐也可能很棘手。
我试过了，没有成功。
DockPanel 是否在网格内？要不然是啥？在 WPF 中，所有内容都是相对于其父级布局的。这整件事都在 TabItem 内吗？还是什么？
不，DockPanel 在 UserControl 内部，周围没有任何东西。
@Tuco 明白了。唯一错误的是 ListBox 上的 Width 属性。您设置了 220 的固定宽度，所以它当然有多大。只需删除该属性，忽略他设置不同错误值的建议。

标签： c# wpf xaml listbox

【解决方案1】：

请尝试更改 ItemPanel 来自

<ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>

到

<ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>

忽略上述建议。

编辑

您能否尝试为您在 DataTemplate 中使用的内部堆栈面板提供背景颜色？喜欢

<DataTemplate>
                <StackPanel Background="Blue" Orientation="Horizontal" Margin="0 0 0 5">
                    <Label Content="{Binding Index}" Margin="10 0" Width="20" />
                    <TextBox Width="150" Margin="0" IsEnabled="{Binding IsEditable}" Text="{Binding Path=Value, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True}" />
                </StackPanel>
            </DataTemplate>

它将让您了解 stackpanel 如何占用 ListBox 项中的空间。然后我们可以尝试调整每个ListBoxItem的宽度

编辑 2

这就是我在我身边看到的

XAML 是

<Window x:Class="WPF_StackOverFlow_Lab.Test1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WPF_StackOverFlow_Lab"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
<DockPanel LastChildFill="False" IsEnabled="{Binding IsWindowEnabled}" MinWidth="724" Background="Red">
    <!-- save notifictaion popup -->
    <Label DockPanel.Dock="Top" Margin="10" FontSize="15" Foreground="Green" Content="Constants Configuration" x:Name="ML_0003" />
    <StackPanel DockPanel.Dock="Top" Orientation="Horizontal" Margin="10 0">
        <Label Content="Select Constant Type" Margin="0 0 10 0" />
        <ComboBox Width="150" ItemsSource="{Binding ComboNames}" DisplayMemberPath="Value" SelectedValuePath="Key" SelectedValue="{Binding SelectedComboType}" />
    </StackPanel>
    <ListBox DockPanel.Dock="Top" BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Stretch"  Margin="10" ItemsSource="{Binding Combos}" SelectedItem="{Binding SelecetedCombo}" ScrollViewer.CanContentScroll="False" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel Orientation="Horizontal"/>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal" Margin="0 0 0 5">
                    <Label Content="{Binding Index}" Margin="10 0" Width="20" />
                    <TextBox Width="150" Margin="0" IsEnabled="{Binding IsEditable}" Text="{Binding Path=Value, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True}" />
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</DockPanel>

【讨论】：

把它改成 StackPanel 还是没有成功，宽度也改成更大的值，也试过“自动”，也删除了这个属性，还是一列:(
@Orionlk 这是错误的。在与问题相关的各个方面，WrapPanel 的行为与 StackPanel 相同。
尝试了 Background="LightBlue" 的东西，在我的帖子中编辑了我的图片，仍然不起作用。
@Orionlk，我认为内部堆栈面板正在将其扩展到所有空间。做一件事。将此堆栈面板的宽度设置为Width=190，让我们看看会发生什么
@MuhammadUmmar，正如预期的那样，它只是为项目周围的 StackPanel 着色，并且如果或多或少也取决于 ListBox 父 Width。 ListBox 一切正常，它拒绝在多列中显示。

【解决方案2】：

问题是你在列表框中设置了 220 的宽度，并且由于项目在 wrap 面板中，它们会垂直显示，请尝试增加宽度

<ListBox Width="220" [OTHER PROPERTIES]>

增加宽度

<ListBox Width="520" [OTHER PROPERTIES]>

或者，如果您的设计允许，删除 width 属性并让列表框填充它的父项

【讨论】：

他根本不应该使用固定宽度。他应该只删除 Width 属性，以便它填充父级。
好主意，这样做，但列表仍然只是一个大列。
@Orionlk 只是为了测试，尝试将 DockPanel 的背景设置为红色，看看它是否填充了它的父级。如果它没有填充自己的父级，请将 DockPanel 的 HorizontalAlignment 设置为 Stretch
好主意！但是在将 DockPanel 的背景更改为红色后，它确实填充了它的父级。试图将 DockPanel 的 HorizontalAlignment 设置为 Stretch，但仍然没有。仅供参考 - 这个 UserControl 有一个父级调用它
@EdPlunkett 将我的 XAML 和图片编辑为当前状态。

【解决方案3】：

默认情况下，ListBox 使用一个名为 VirtualizingStackPanel 的面板来排列其项目垂直。

<ListBox>
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
</ListBox>

【讨论】：