ItemsControl 项目布局就像在 ListBox 中一样？答案

【问题标题】：ItemsControl items layout like in a ListBox?ItemsControl 项目布局就像在 ListBox 中一样？
【发布时间】：2014-08-28 09:40:11
【问题描述】：

当我使用 ItemsControl 时，项目布局如下所示：

_{（来源：hostingpics.net）}

因为我想选择项目，所以我考虑过使用 ListBox，但它给了我：

ListBox http://img4.hostingpics.net/pics/372874useOfListBox.png

ItemsControl 的代码：

<ItemsControl ItemsSource="{Binding AllFiles, Mode=OneWay}">
    <ItemsControl.Resources>
        <DataTemplate DataType="{x:Type viewModel:FolderVM}">
            <DockPanel Margin="5" Height="70" Width="300">
                <DockPanel.Resources>
                    <Style TargetType="{x:Type TextBlock}">
                        <Setter Property="TextWrapping" Value="WrapWithOverflow"/>
                    </Style>
                </DockPanel.Resources>
                <Image Height="70" Width="70" DockPanel.Dock="Left" Source="{Binding Icon}"/>
                <Grid Background="LightBlue" DockPanel.Dock="Left">
                    <WrapPanel Margin="10,0,0,0" Orientation="Vertical">
                        <TextBlock Text="{Binding Name}"/>
                        <TextBlock Text="File Folder"/>
                    </WrapPanel>
                </Grid>
            </DockPanel>

        </DataTemplate>
        <DataTemplate DataType="{x:Type viewModel:FileVM}">
            <DockPanel Margin="5" Height="70" Width="300">
                <DockPanel.Resources>
                    <Style TargetType="{x:Type TextBlock}">
                        <Setter Property="TextWrapping" Value="WrapWithOverflow"/>
                    </Style>
                </DockPanel.Resources>
                <Image Height="70" Width="70" DockPanel.Dock="Left" Source="{Binding Icon}"/>
                <Grid Background="LightBlue" DockPanel.Dock="Left">
                    <WrapPanel Margin="10,0,0,0" Orientation="Vertical">
                        <TextBlock Text="{Binding Name}"/>
                        <TextBlock Text="{Binding SizeFormatted}"/>
                    </WrapPanel>
                </Grid>
            </DockPanel>
        </DataTemplate>
    </ItemsControl.Resources>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel Orientation="Vertical"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

对于列表框：

<ListBox ItemsSource="{Binding AllFiles, Mode=OneWay}">
    <ListBox.Resources>
        <DataTemplate DataType="{x:Type viewModel:FolderVM}">
            <DockPanel Margin="5" Height="70" Width="300">
                <DockPanel.Resources>
                    <Style TargetType="{x:Type TextBlock}">
                        <Setter Property="TextWrapping" Value="WrapWithOverflow"/>
                    </Style>
                </DockPanel.Resources>
                
                <Image Height="70" Width="70" DockPanel.Dock="Left" Source="{Binding Icon}"/>
                <Grid Background="LightBlue" DockPanel.Dock="Left">
                    <WrapPanel Margin="10,0,0,0" Orientation="Vertical">
                        <TextBlock Text="{Binding Name}"/>
                        <TextBlock Text="File Folder"/>
                    </WrapPanel>
                </Grid>
            </DockPanel>

        </DataTemplate>
        <DataTemplate DataType="{x:Type viewModel:FileVM}">
            <DockPanel Margin="5" Height="70" Width="300">
                <DockPanel.Resources>
                    <Style TargetType="{x:Type TextBlock}">
                        <Setter Property="TextWrapping" Value="WrapWithOverflow"/>
                    </Style>
                </DockPanel.Resources>
                <Image Height="70" Width="70" DockPanel.Dock="Left" Source="{Binding Icon}"/>
                <Grid Background="LightBlue" DockPanel.Dock="Left">
                    <WrapPanel Margin="10,0,0,0" Orientation="Vertical">
                        <TextBlock Text="{Binding Name}"/>
                        <TextBlock Text="{Binding SizeFormatted}"/>
                    </WrapPanel>
                </Grid>
            </DockPanel>
        </DataTemplate>
    </ListBox.Resources>
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel  Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
</ListBox>

如何使用 ListBox 制作第一张图片中的布局？尝试了很多东西，但它不起作用。

我可以让 WrapPanel 有一个 MaxWidth，这样它就会停止水平堆叠，但我觉得这不是一件好事。

在您看来，我该怎么做？

编辑：在第一张图片中，我们没有看到 ItemsControl 中的所有项目

【问题讨论】：

标签： wpf listbox itemscontrol

【解决方案1】：

ListBox 会根据需要自动预订尽可能多的空间以容纳所有元素。在 ListBox 中设置

 <ListBox ItemsSource="{Binding Lista}" Height="155" ScrollViewer.VerticalScrollBarVisibility="Disabled">

【讨论】：

可能不清楚，我没有在我的原始帖子中指定它，但在第一张图片中，ItemsControl 正在水平滚动（我们看不到图片中的所有项目）。项目将垂直堆叠，但垂直滚动被禁用，因此它将水平滚动。
好的，我想通了：ListBox 属性中的 HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled" 然后将 ItemsPanelTemplate 中的 WrapPanel MaxHeight 与 ListBox 父级 ActualHeight 绑定。
感谢您的帮助！

【解决方案2】：

好的，我想通了：

ListBox 属性中的HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled"
在 ItemsPanelTemplate 中：将 WrapPanel 的 MaxHeight 绑定到 ListBox 的父级 ActualHeight 和 Orientation="Vertical"（因此它垂直堆叠并水平滚动）。

【讨论】：