Question

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

ItemsControl http://img4.hostingpics.net/pics/861295useOfItemsControls.png

由于我想选择项目，我想过使用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：

<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中的所有项目

Answer 1

ListBox会根据需要自动预订多个空间，以容纳所有元素。在ListBox集中

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

Answer 2

好的我明白了：

HorizontalBox中的HorizontalScrollBarVisibility =“Auto”VerticalScrollBarVisibility =“已禁用”
在ItemsPanelTemplate中：将WrapPanel的MaxHeight绑定到ListBox的父ParentHeight和Orientation =“Vertical”（因此它垂直堆叠并水平滚动）。

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

2 个答案: