从图片库到Windows 10应用中的ListView填充图像

Question

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

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

没有自动转换从存储文件到图像。

您需要两件事，首先是listView中带有图像控件的DataTemplate：

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

第二，从存储文件创建的位示意图，这些bitmapimages被添加到项目集合而不是文件名：

：

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）的方法对您有效，但我想向您展示另一种方法。使用ViewModels。

这是一个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);
            }
        }
    }
}

通常，如果它是同步活动，则可以在构造函数中写下逻辑。由于这是异步的，因此我在视图模型中使用另一种方法来加载BitmapImage S

的List

现在在您的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>