Bind PictureLibrary to GridView Control in Windows Store Apps

In this article we are going to learn how to bind data to a control from the system file and folders in Windows Store Apps.

We can use the APIs in the Windows.Storage namespace to retrieve folder and file data. This APIs helps us to access files and folders from the local computer. It has various methods such as GetFilesAsync, GetFoldersAsync, and GetItemsAsync for accessing the files and items from the folders.

This article shows you an example of accessing the files and folders from the local system and bind the items in the GridView control.

Procedure to be used.

Step 1

First of all add the namespace to use the API's methods, as in:

using Windows.Storage;

using Windows.Storage.Search;

Step 2

Get the PictureLibrary folder from the local system, as in:

StorageFolder library = Windows.Storage.KnownFolders.PicturesLibrary;

Step 3

Set the search option on this folder. Here I use the FolderDepth.Deep property that indicates that when the folder is searched it also recurses (reterives from) its subfolders.

QueryOptions queryOptions = new Windows.Storage.Search.QueryOptions();

queryOptions.FolderDepth = Windows.Storage.Search.FolderDepth.Deep;

queryOptions.IndexerOption = Windows.Storage.Search.IndexerOption.UseIndexerWhenAvailable;

var fileQuery = library.CreateFileQueryWithOptions(queryOptions);

Step 4

Reterive the files from that folder, as in:
 

var fif = new Windows.Storage.BulkAccess.FileInformationFactory
          (

             fileQuery,

             Windows.Storage.FileProperties.ThumbnailMode.PicturesView,

             190,

             Windows.Storage.FileProperties.ThumbnailOptions.UseCurrentScale,

             false

          );

Step 5

The items that are retrieved from the folder is not in the format that can be used as a GridView or Listview datatsource. Therefore we need to use the GetVirtualizedItemsVector() method that provides a collection of objects and we can give to the Gridview as an Itemsource.

var dataSource = fif.GetVirtualizedItemsVector();

PictureGrid.ItemsSource = dataSource;

Here is the full code for the XAML.cs file:

protected override void OnNavigatedTo(NavigationEventArgs e)

{

    StorageFolder library = Windows.Storage.KnownFolders.PicturesLibrary;

    QueryOptions queryOptions = new Windows.Storage.Search.QueryOptions();

    queryOptions.FolderDepth = Windows.Storage.Search.FolderDepth.Deep;

    queryOptions.IndexerOption = Windows.Storage.Search.IndexerOption.UseIndexerWhenAvailable;

    var fileQuery = library.CreateFileQueryWithOptions(queryOptions);

    var fif = new Windows.Storage.BulkAccess.FileInformationFactory
                (

                fileQuery,

                Windows.Storage.FileProperties.ThumbnailMode.PicturesView,

                190,

                Windows.Storage.FileProperties.ThumbnailOptions.UseCurrentScale,

                false

                );

   var dataSource = fif.GetVirtualizedItemsVector();

   PictureGrid.ItemsSource = dataSource;

}

Step 6

When binding the image to the Image Control, we need to convert the value returned by the previous method. So here I use a custom converter class to convert the incoming values to the matching values.

namespace bindingwithlistandfolder

{

    internal class ThumbnailConverter : IValueConverter

    {

        public object Convert(object value, Type targetType, object parameter, string culture)

        {

            if (value != null)

            {

                var thumbnailStream = (IRandomAccessStream)value;

                var image = new BitmapImage();

                image.SetSource(thumbnailStream);

 

                return image;

            }

            return DependencyProperty.UnsetValue;

        }

        public object ConvertBack(object value, Type targetType, object parameter, string culture)

        {

            throw new NotImplementedException();

        }

    }

}
 

Step 7

Create a Static Resource in the MainPage.XAML file, as in:

<Page.Resources>

        <local:ThumbnailConverter x:Key="thum"></local:ThumbnailConverter>

</Page.Resources>

Step 8

In the XAML file create a template for showing the results in the GridView:

<Grid Background="Red">

       <GridView x:Name="PictureGrid" ItemsSource="{Binding}">     

           <GridView.ItemTemplate>

                <DataTemplate>

                    <Image Height="200" Width="300" Source="{Binding Path=Thumbnail, Converter={StaticResource thum}}" Stretch="Fill"></Image>

                </DataTemplate>

          </GridView.ItemTemplate>

      </GridView>

</Grid>

Output

Now, build the app and run it.

You will see that all the pictures that resides in your computer system are in the PictureFolder and displayed in the Windows Store application.