WPF列表视图中的流图标视图

Question

我是WPF的新手，作为一个学习项目，我选择了像文件管理器这样的Windows资源管理器。在这个项目中，我想显示列表视图作为一个图标列表，遵循流程布局模式。我尝试了这里给出的解决方案:WPF:带有图标视图的列表视图?但他们让我的图标重叠在一起。我的图标基本上是动态加载的用户控件。这是代表列表视图图标的用户控件的代码:

<UserControl x:Class="MVCP.FileItem"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" Height="156.767" Width="161.279">
    <Grid HorizontalAlignment="Center">
        <Image HorizontalAlignment="Center" Height="100" Margin="10,10,10,0" VerticalAlignment="Top" Width="141" Source="fileflat.png"/>
        <TextBlock HorizontalAlignment="Center" Margin="10,120,10,5" TextWrapping="Wrap" Text="&lt;Filename&gt;" VerticalAlignment="Center" Height="32" Width="141" FontSize="18" Foreground="White" TextAlignment="Center"/>
    </Grid>
</UserControl>

这是我的ListView代码:

<ListView x:Name="files" Background="#FF19174B" AllowDrop="True" ScrollViewer.HorizontalScrollBarVisibility="Disabled" PreviewMouseLeftButtonDown="files_PreviewMouseLeftButtonDown" MouseMove="files_MouseMove">
    <local:FileItem/>
    <local:FileItem/>
    <local:FileItem/>
    <local:FileItem/>
</ListView>

我如何安排这些用户控件，使它们看起来像Windows资源管理器图标?

Answer 1

@AbinMathew给了我一个使用panel的提示。所以，我像这样改变了我的代码，它工作了。:)

<ListView x:Name="files" Background="#FF19174B" AllowDrop="True" ScrollViewer.HorizontalScrollBarVisibility="Disabled" PreviewMouseLeftButtonDown="files_PreviewMouseLeftButtonDown" MouseMove="files_MouseMove">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
    <ListView.ItemTemplate>
        <DataTemplate>
            <DockPanel>
                <local:FileItem/>
            </DockPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
    <local:FileItem/>
    <local:FileItem/>
    <local:FileItem/>
    <local:FileItem/>
</ListView>

Answer 2

尝试在您的ListView中添加任何panel

<ListView x:Name="files" Background="#FF19174B" AllowDrop="True" ScrollViewer.HorizontalScrollBarVisibility="Disabled" PreviewMouseLeftButtonDown="files_PreviewMouseLeftButtonDown" MouseMove="files_MouseMove">
 <StackPanel>
   <local:FileItem/>
   <local:FileItem/>
   <local:FileItem/>
   <local:FileItem/>
 </StackPanel>
</ListView>