Binding Image With Picture Library Images in Windows Store Application Using FileOpenPicker

In this article we will have a look at binding an image with Picture Library Images in Windows Store. In this article we will use the following procedure:

• User will click on a button
• On button click the user will be select an image from the Picture Library
• The selected image will be bound to the image control on the page

The application will behave as in the following:





In a XAML based Windows Store Application, an object of FileOpenPicker allows us to choose files from a Picture Library and Document Library. Essentially we will create an instance of FileOpenPicker on a click event of a button and then restrict the user from selecting only images. Once the user has selected an image, we will bind that image to an image control on the page.

Let us start with the design of the page. The page design is very simple, with a button, image control and two text blocks.

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="100" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <TextBlock Text="Select Photo from Picture Library" Margin="15,20,0,0" FontSize="40"/>
    <StackPanel Orientation="Horizontal" Grid.Row="1">
        <Button x:Name="btnFilePickerOpen" Click="btnFilePickerOpen_Click_1" Content="Select Image" Width="303" Height="97" Margin="50,50,0,403"/>
        <StackPanel Orientation="Vertical" Margin="50,50,0,0">
            <Image x:Name="imgSelected" />
            <TextBlock x:Name="txtSelectedImagePath" Margin="30,30,0,0" FontSize="30" />
        </StackPanel>
    </StackPanel>
</Grid>

On the click event of a button we will create an object of FileOpenPicker and allow the user to select an image. We need to use the following procedure:

1. Create an instance of FileOpenPicker
2. Select ViewMode. There are two ViewModes available, Thumbnail and List. Let us choose Thumbnail for our demo.
3. Provide a "SuggestedStartLocation". Let us select "PicturerLibrary" since we want to choose an image. Other options are "VideosLibrary", "DocumetsLibrary" etc.
4. Apply a filter. We can apply filters on the type of files we will allow the user to choose. We are adding the file types jpg, jpeg and png.
5. In the last step, asynchronously we are calling the PickSingleFileAsync function and taking the reference of the selected file in StorageFile.

FileOpenPicker openPicker = new FileOpenPicker();
openPicker.ViewMode = PickerViewMode.Thumbnail;
openPicker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
openPicker.FileTypeFilter.Add(".jpg");
openPicker.FileTypeFilter.Add(".jpeg");
openPicker.FileTypeFilter.Add(".png");
StorageFile file = await openPicker.PickSingleFileAsync();
if (file != null)
{ 
}
else
{ 
}

On successful selection of the file we need to convert that in the image stream and bind that to the image control. We are creating an instance of BitmapImage and reading the file stream in that. After successful reading we set the bitmap image as the source of the image control.

if (file != null)
{
    txtSelectedImagePath.Text = file.Name;
    var filestream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read);
    BitmapImage imagetobind = new BitmapImage();
    imagetobind.SetSource(filestream);
    imgSelected.Source = imagetobind;
}  
else
{
   txtSelectedImagePath.Text = "Some problem fetching file ";
}

This is all that we need to do to fetch an image from a picture library and bind it to an image control. The full source code of the button click is given below.

private async void btnFilePickerOpen_Click_1(object sender, RoutedEventArgs e)
{
    FileOpenPicker openPicker = new FileOpenPicker();
    openPicker.ViewMode = PickerViewMode.Thumbnail;
    openPicker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
    openPicker.FileTypeFilter.Add(".jpg");
    openPicker.FileTypeFilter.Add(".jpeg");
    openPicker.FileTypeFilter.Add(".png");
    StorageFile file = await openPicker.PickSingleFileAsync();
    if (file != null)
    {
        txtSelectedImagePath.Text = file.Name;
        var filestream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read);
        BitmapImage imagetobind = new BitmapImage();
        imagetobind.SetSource(filestream);
        imgSelected.Source = imagetobind;
    }
    else
    {
        txtSelectedImagePath.Text = "Some problem fetching file ";
    }
}

Now when you run the application you will able to choose an image from the Picture Library and bind it to an image control.



I hope you find this article useful. Thanks for reading.