WPF ListView 中的流图标视图答案

【问题标题】：Flow icon view in WPF ListViewWPF ListView 中的流图标视图
【发布时间】：2015-08-21 13:54:34
【问题描述】：

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

<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 资源管理器图标？

【问题讨论】：

您是否尝试过在ListView 中使用面板？
谢谢@AbinMathew，你给了我一个提示，我试了一下。有效。看我的回答。 :)

标签： c# .net wpf xaml listview

【解决方案1】：

@AbinMathew 给了我使用面板的提示。所以，我像这样更改了我的代码并且它起作用了。 :)

<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>

【讨论】：

【解决方案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>

【讨论】：

这不是正确的方法，你写的意思是“在列表视图中有一个对象，其元素是 4 local:FileItem”。您最可能想做的是将“ListView.ItemsPanel”设置为@Aishwarya 所做的。尽管如此，使用“StackPanel”不会让你进入下一行，而是......相反......扩大 ListView（在最佳选择中）或删除一些 FileItem。
@FabioDch 根据 SO 提出的问题，我只是提示代码中出了什么问题，是的，我没有努力使其动态化，但根据 SO 的要求，我回答了它。是的，您也可以选择编辑我的答案以使其更有价值。