在 Windows 10 App 中将图片从图片库填充到 ListView

Question

我正在尝试在 Windows 应用程序中将默认图片库中的所有图像显示到 ListView，但我只能显示图像的名称而不是文件夹中的所有图像，这是我的代码。

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
using Windows.UI.Xaml.Media.Imaging;
using Windows.Storage.Streams;
using Windows.Storage;

// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238

namespace ListView
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
        showall();
    }

    public async void showall()
    {
        IReadOnlyList<StorageFile> file = await KnownFolders.PicturesLibrary.GetFilesAsync();

        foreach (StorageFile file1 in file)
        {
            list.Items.Add(file1.Name);
        }

    }

这里是 xaml 代码...

<Page
x:Class="ListView.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ListView"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <StackPanel>
        <StackPanel HorizontalAlignment="Left" Width="350" Height="350">
            <ListView Width="300" Height="300" Name="list" SelectionChanged="list_SelectionChanged">
                <Image Width="200" Height="200" Name="img"></Image>
            </ListView>
        </StackPanel>
        <StackPanel VerticalAlignment="Top">

            <Image Width="300" Height="300" Name="img1" />
            <TextBlock Width="300" Height="30" Name="txt1" />

        </StackPanel>
    </StackPanel>


</Grid>

Answer 1

没有从 StorageFile 名称到图像的自动转换。

您需要两件事，首先是在 ListView 中带有 Image 控件的 DataTemplate：

<ListView x:Name="list">
    <ListView.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding}"/>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

第二，从StorageFiles创建的BitmapImages，添加到Items集合而不是文件名：

public MainPage()
{
    InitializeComponent();

    Loaded += OnLoaded;
}

private async void OnLoaded(object sender, RoutedEventArgs e)
{
    list.Items.Clear();

    var files = await KnownFolders.PicturesLibrary.GetFilesAsync();

    foreach (var file in files)
    {
        var bitmap = new BitmapImage();

        using (var stream = await file.OpenReadAsync())
        {
            await bitmap.SetSourceAsync(stream);
        }

        list.Items.Add(bitmap);
    }
}

还要注意，加载是在Loaded 事件处理程序中完成的，而不是直接调用异步方法而不等待它。事件处理程序是唯一可以安全地成为 async void 且无需等待的方法。

Answer 2

虽然 Clemens 的方法适合您，但我想向您展示一种不同的方法。使用 ViewModel。

这是一个 PicturesViewModel：

public class PicturesViewModel
{
    public ObservableCollection<ImageSource> MyImages { get; }
        = new ObservableCollection<ImageSource>();

    public async Task GetImages()
    {
        var files = await KnownFolders.PicturesLibrary.GetFilesAsync();
        foreach (var file in files)
        {
            using (var stream = await file.OpenReadAsync())
            {
                BitmapImage image = new BitmapImage();
                await image.SetSourceAsync(stream);
                MyImages.Add(image);
            }
        }
    }
}

通常如果它是一个同步活动，你可以在构造函数中编写你的逻辑。由于这是异步的，我在我的视图模型中使用另一种方法来加载 List 的 BitmapImages

现在在您的MainPage_Loaded（MainPage 的Loaded 事件的处理方法，如另一个答案所示）中，您需要这样做：

private async void MainPage_Loaded(object sender, RoutedEventArgs e)
{
    var viewModel = new PicturesViewModel();
    DataContext = viewModel;

    await viewModel.GetImages();
}

而您的 ListView 只是 Binding

<ListView ItemsSource="{Binding MyImages}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding}"/>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>