如何在UWP中使用C#获取文件夹内的图片缩略图？

我之前也在UWP里折腾过获取图片缩略图的需求，结合XAML绑定确实有几个容易踩坑的点，一步步给你讲清楚怎么实现从库文件夹里获取并展示缩略图：

UWP对文件访问权限管控很严，要访问图片库这类系统库文件夹，必须先在Package.appxmanifest里声明权限：

• 打开你的项目的Package.appxmanifest文件，切换到“功能”标签页，勾选“图片库”
• 或者直接编辑XML代码，在<Capabilities>节点里添加：

<uap:Capability Name="picturesLibrary" />

如果是访问其他库（比如文档库），对应勾选或添加对应的权限声明即可。

UWP提供了KnownFolders类来直接访问系统库，比如图片库可以直接用KnownFolders.PicturesLibrary，不用让用户手动选择文件夹（前提是权限已经配置好）。

接下来要异步获取文件夹里的图片文件，然后为每个文件生成缩略图。这里建议封装一个ViewModel类来存储文件名和缩略图，方便后续XAML绑定：

using Windows.Storage;
using Windows.Storage.FileProperties;
using Windows.UI.Xaml.Media.Imaging;

// 用于绑定的实体类
public class ImageThumbnailItem
{
    public string FileName { get; set; }
    public BitmapImage Thumbnail { get; set; }
}

// 获取缩略图的核心方法
public async Task<List<ImageThumbnailItem>> GetLibraryThumbnailsAsync()
{
    var thumbnailList = new List<ImageThumbnailItem>();
    
    // 获取目标库文件夹（这里以图片库为例）
    var targetFolder = KnownFolders.PicturesLibrary;
    
    // 设置查询规则，只筛选指定格式的图片文件
    var queryOptions = new QueryOptions(CommonFileQuery.DefaultQuery, 
        new[] { ".jpg", ".jpeg", ".png", ".gif", ".bmp" });
    var imageFileQuery = targetFolder.CreateFileQueryWithOptions(queryOptions);
    
    // 异步获取所有符合条件的文件
    var imageFiles = await imageFileQuery.GetFilesAsync();
    
    foreach (var file in imageFiles)
    {
        // 获取缩略图：指定模式为图片视图，大小设为100px（可根据需求调整）
        using (var thumbnailStream = await file.GetThumbnailAsync(
            ThumbnailMode.PicturesView, 
            100, 
            ThumbnailOptions.ResizeThumbnail))
        {
            if (thumbnailStream != null && thumbnailStream.Size > 0)
            {
                var bitmap = new BitmapImage();
                await bitmap.SetSourceAsync(thumbnailStream);
                
                thumbnailList.Add(new ImageThumbnailItem
                {
                    FileName = file.Name,
                    Thumbnail = bitmap
                });
            }
        }
    }
    
    return thumbnailList;
}

为了让UI能实时响应数据变化，我们用ObservableCollection来存储数据，然后在页面的代码后台初始化数据：

using Windows.UI.Xaml.Controls;
using System.Collections.ObjectModel;

public sealed partial class MainPage : Page
{
    public ObservableCollection<ImageThumbnailItem> ThumbnailItems { get; set; } 
        = new ObservableCollection<ImageThumbnailItem>();

    public MainPage()
    {
        this.InitializeComponent();
    }

    protected override async void OnNavigatedTo(Windows.UI.Xaml.Navigation.NavigationEventArgs e)
    {
        base.OnNavigatedTo(e);
        // 异步获取缩略图并添加到集合中
        var items = await GetLibraryThumbnailsAsync();
        foreach (var item in items)
        {
            ThumbnailItems.Add(item);
        }
    }
}

然后在XAML里用GridView或者ListView来展示：

<GridView ItemsSource="{x:Bind ThumbnailItems, Mode=OneWay}" Margin="20">
    <GridView.ItemTemplate>
        <DataTemplate x:DataType="local:ImageThumbnailItem">
            <StackPanel Margin="10" HorizontalAlignment="Center">
                <!-- 展示缩略图 -->
                <Image Source="{x:Bind Thumbnail, Mode=OneWay}" 
                       Width="100" Height="100" 
                       Stretch="UniformToFill"
                       CornerRadius="4"/>
                <!-- 展示文件名 -->
                <TextBlock Text="{x:Bind FileName, Mode=OneWay}" 
                           Margin="0,8,0,0" 
                           TextWrapping="Wrap" 
                           HorizontalAlignment="Center"
                           MaxWidth="100"/>
            </StackPanel>
        </DataTemplate>
    </GridView.ItemTemplate>
    <!-- 设置网格布局 -->
    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsWrapGrid Orientation="Horizontal" ItemWidth="120" ItemHeight="140"/>
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>
</GridView>

• 异步操作一定要到位：所有文件和缩略图的获取都是异步方法，别在UI线程同步调用，否则会导致界面卡死
• 缩略图模式选择：ThumbnailMode.PicturesView是专门为图片优化的模式，如果是视频文件可以用ThumbnailMode.VideosView，选对模式能得到更清晰合适的缩略图
• 释放资源：用using包裹缩略图的IRandomAccessStream，避免内存泄漏
• 用ObservableCollection：如果直接用List，添加数据后UI不会自动刷新，必须用ObservableCollection来实现数据绑定的自动更新

内容的提问来源于stack exchange，提问作者Kay