使用自适应网格视图显示本地文件夹中的图像

Question

我正在使用 Microsoft.Toolkit 库，我想知道是否有一种方法可以使用自适应网格视图显示本地文件夹中的图像。 这是我的代码：

<Page.Resources>
        <DataTemplate x:Key="Photos">
            <Grid>
                <Image Source="{Binding ImageURL}"
                           Stretch="UniformToFill"
                           HorizontalAlignment="Center"
                           VerticalAlignment="Center">
                </Image>
                <TextBlock Foreground="Black" FontWeight="Thin" Text="{Binding ImageText}"
                           FontSize="20">
                </TextBlock>
            </Grid>
        </DataTemplate>
    </Page.Resources>

<Grid>
            <UWPToolkit:AdaptiveGridView x:Name="AdaptiveGV" ItemHeight="200"  DesiredWidth="200" ItemTemplate="{StaticResource Photos}"/>
            <Button Content="pick folder" Click="Button_Click" Margin="20,4,0,604"/>
        </Grid> 

后面的代码：

     List<Images> ImageCollection;
   private async void Button_Click(object sender, RoutedEventArgs e)
        {
            ImageCollection = new List<Images>();

            // pick a folder
            var folderPicker = new Windows.Storage.Pickers.FolderPicker();
            folderPicker.FileTypeFilter.Add(".jpg");
            var folder = await folderPicker.PickSingleFolderAsync();
            var filesList = await folder.CreateFileQueryWithOptions(new QueryOptions(CommonFileQuery.DefaultQuery, new string[] { ".jpg", ".png", ".jpeg" })).GetFilesAsync();
            for (int i = 0; i < filesList.Count; i++)
            {

                ImageCollection.Add(new Images()
                {
                    ImageURL = filesList[i].Path,
                    ImageText = filesList[i].Name,

                });
            }
            AdaptiveGV.ItemsSource = ImageCollection;
        }
    }

图像类

public class Images
    {
        public string ImageURL { get; set; }
        public string ImageText { get; set; }
    }

我只能通过将 imageURL 字符串值设置为图像的值或 URL 来获取来自网络的图像和要显示的 Assets 文件夹中的图像，但是有没有一种方法可以让我显示图像从本地文件夹？

Answer 1

根据Image.Source属性的文档：

应用中图像元素的典型用途是显示用户图片库中的图片。可以通过编程方式或通过 FileOpenPicker 访问这些图片。无论哪种情况，您获得的 StorageFile 对象都可以作为流打开，但不提供对图像文件的 URI 引用。

只有文档How to load file resources (XAML) 中描述的资源才能使用uri 进行加载。代码中的图像路径不能直接设置为 XAML 中 Image 控件的源。

因此我们需要读取文件流并将ImageSource 对象设置为BitmapImage 或WriteableBitmap 到图像控件。

我将您的代码更新如下，现在可以使用：

   List<Images> ImageCollection;
    private async void Button_Click(object sender, RoutedEventArgs e)
    {
        ImageCollection = new List<Images>();
        // pick a folder
        var folderPicker = new Windows.Storage.Pickers.FolderPicker();
        folderPicker.FileTypeFilter.Add(".jpg");
        var folder = await folderPicker.PickSingleFolderAsync();
        var filesList = await folder.CreateFileQueryWithOptions(new QueryOptions(CommonFileQuery.DefaultQuery, new string[] { ".jpg", ".png", ".jpeg" })).GetFilesAsync();
        for (int i = 0; i < filesList.Count; i++)
        {
            StorageFile imagefile = filesList[i];
            BitmapImage bitmapimage = new BitmapImage();
            using (IRandomAccessStream stream = await imagefile.OpenAsync(FileAccessMode.Read))
            {
                bitmapimage.SetSource(stream);
            }

            ImageCollection.Add(new Images()
            {
                ImageURL = bitmapimage,
                ImageText = filesList[i].Name

            });
        }
        AdaptiveGV.ItemsSource = ImageCollection;
    }
}
public class Images
{
    public ImageSource ImageURL { get; set; }
    public string ImageText { get; set; }
}

Answer 2

如果您想从本地目录获取文件，您需要使用 DirectoryInfo 并执行类似的操作。

var di = new DirectoryInfo("c:\\temp");
var listOfFileExtention = new List<string>();
foreach (var f in di.GetFiles("*.*", SearchOption.AllDirectories))
{

    if (listOfFileExtention.Any(x => x == f.Extension))
    {
        // your code here
    }
}

这将遍历文件，并查找与您正在查找的文件扩展名列表匹配的任何文件，并对它们执行任何您需要的操作。

这只是示例代码，但会从本地目录为您提供所需的内容。