Question

我是WPF的新手，但我必须这样做，这需要花费我很多时间。我已经寻找了一个解决方案，但有很多替代解决方案，老实说，我并不了解大部分内容。我有这个XAML代码：

<ListView Name="Thumbnails">
    <ListView.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding}" Height="30" Width="30" Margin="5"/>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

以及此代码隐藏：

private void Window_Loaded(object sender, RoutedEventArgs e)
{
    DirectoryInfo folder = new DirectoryInfo(Path.GetDirectoryName(Process.GetCurrentProcess().MainModule.FileName) + @"\SlikeSportista\");
    FileInfo[] images = folder.GetFiles("*.jpg");
    foreach (FileInfo img in images)
    {
        Thumbnails.Items.Add(img);
    }
}

我也在foreach循环中尝试过这行代码：

Thumbnails.Items.Add(System.Drawing.Image.FromFile(img.FullName));

在这两种情况下都会添加项目，但图像无法正确显示，或者更确切地说显示。您可以选择它们，并且文件夹中的元素数量相同，但没有显示。

另一个问题（不太重要的一个）是如何以正方形而不是行显示图像。基本上我想每行大约有4个左右的图像，但现在我每行只有1个元素，一直拉伸（虽然我看不到显示的内容）。

Answer 1

在第一次尝试中，您将FileInfo个对象添加到ListView的项目集合中。这些不会自动转换为ImageSource项，这是DataTemplate中绑定所要求的。改为添加FileInfo的FullName：

foreach (FileInfo img in images)
{
    Thumbnails.Items.Add(img.FullName);
}

在您的第二次尝试中，问题是您添加System.Drawing.Image的实例，它不是WPF的一部分，而是WinForms，也不会自动转换。您可以改为使用BitmapImage：

foreach (FileInfo img in images)
{
    Thumbnails.Items.Add(new BitmapImage(new Uri(img.FullName)));
}

两种解决方案之间的区别在于，在第二种解决方案中，您手动创建图像对象，而第一种解决方案依赖于从string到ImageSource的自动转换，它作为TypeConverter内置到WPF中。

第二个问题的解决方案是替换ListView的ItemsPanel，可能是UniformGrid：

<ListView Name="Thumbnails">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Columns="4"/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
    ...
</ListView>

Answer 2

作为一般规则，您应该记住，在代码隐藏文件（.xaml.cs文件）中添加图像是不好的做法。在WPF中，有一个非常广泛使用的常见设计模式，称为MVVM（Model-View-ViewModel），您应该熟悉并使用它。在您的情况下，您应该拥有一个包含IEnumerable<BitmapImage>属性的ViewModel类，该属性包含您希望在ListView中显示的图像。

例如，假设您的ViewModel类名为ImagesViewModel，您的视图是ImagesView：

ImagesViewModel 将有一个名为：

的属性

ObservableCollection<BitmapImage> Images

ImagesView 将包含：

<ListView Name="Thumbnails" ItemsSource="{Binding Images}">
<ListView.ItemsPanel>
    <ItemsPanelTemplate>
        <UniformGrid Columns="4"/>
    </ItemsPanelTemplate>
</ListView.ItemsPanel>
...

现在，如果您向图像添加/删除图像，它们将自动从列表视图中添加/删除（您必须在视图模型中实现INotifyPropertyChanged界面，并且您已完成）。

WPF：ListView与文件夹中的图像

2 个答案: