Viewing an image from a local folder using the Adaptive Grid view

advertisements

I'm using Microsoft.Toolkit library and I was wondering if there's a way to display images from a local folder using the Adaptive Grid View. Here's my code:

<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>

code behind:

     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;
        }
    }

the Images class

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

I was only able to get images from the web and images from the Assets folder to be shown, only by setting the imageURL string value to the image's value or URL, but is there a way i can get the images to be displayed from a local folder?


According to the documents of Image.Source property:

A typical use of Image elements in an app is to show pictures from the user’s Pictures library. These pictures might be accessed programmatically or through a FileOpenPicker. In either case, the StorageFile object you get can be opened as a stream, but doesn't provide a URI reference to the image file.

Only resources which are described in the documents How to load file resources (XAML) can use uri for loading. The image path in your code cannot be directly set as source to the Image control in XAML.

So we need to read the file stream and set an ImageSource object like BitmapImage or WriteableBitmap to the image control.

I updated your code as follows and it can works now:

   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; }
}