Getting Images from albums in Windows Phone

One of the most used thing while working with images in Windows phone is to get images from the albums. Of course you need to have images to work with images. This is therefore a simple post describing how to get images out from the albums, and use them. In this post however, we will only look at getting the images from the albums. Later while working with Nokia Imaging, we will look forward to use them.

To begin with, we need to create a windows phone 8 project. Once done, we will create an object of MediaLibrary. Through medialibrary, we have the access of all the images of all the albums in the phone.

private void GetImages()

{

    var ml = new MediaLibrary();            

    var Pictures = ml.Pictures;            

}

In the above code, in the variable Pictures we will have all the picture from the media library from all the albums.
Let’s not just have my words, let see it visually. I have created a ListBox in xaml, created it’s itemtemplate in which an Image element is placed.

<ListBox ItemsSource="{Binding ListOfImages, ElementName=ShowAllImages}">

<ListBox.ItemTemplate>

    <DataTemplate>

        <StackPanel>

            <Image Width="150" Height="150" 

                            Source="{Binding}"/>                        

        </StackPanel>

    </DataTemplate>

</ListBox.ItemTemplate>

</ListBox>

The ItemsSource of the Listbox is bind with a list of Writable bitmaps created in the code behind, that is on MainPage.xaml.cs. ElementName is set to ShowAllImages which is the name of the mainpage’s usercontrol.
This is it with UI. Let’s see how it all boils down in code. Here is the code of my mainpage.xaml.cs

public partial class MainPage : PhoneApplicationPage, INotifyPropertyChanged

{

    private List<WriteableBitmap> _listOfImages = new List<WriteableBitmap>();

    public List<WriteableBitmap> ListOfImages

    {

        get 

        { return _listOfImages; }

        set 

        { _listOfImages = value;

        }

    }

    // Constructor

    public MainPage()

    {

        InitializeComponent();

        GetImages();

    }

    private void GetImages()

    {

        var ml = new MediaLibrary();            

        var Pictures = ml.Pictures;

        foreach (var item in Pictures)

        {

            ListOfImages.Add(PictureDecoder.DecodeJpeg(item.GetImage()));

        }           

    }

    public event PropertyChangedEventHandler PropertyChanged;

       private void OnPropertyChanged(string propertyName)

       {

           if (this.PropertyChanged != null)

           {

               PropertyChanged(this, new PropertyChangedEventArgs(propertyName));

           }

       }

}

Well, the code is very simple. The main thing that is to discuss about is this loop.

foreach (var item in Pictures)

{

    ListOfImages.Add(PictureDecoder.DecodeJpeg(item.GetImage()));

}  

As we’ve discussed already, the variable Pictures contains all the images of all the albums in the library. We loop through each and every images, convert the Stream that we get from item.GetImage() function into a writablebitmap, finally add that writablebitmap object to the collection. The collection which is further binds with the ListBox on UI generates the image from it.

Before hitting F5, the one last thing we need to set is allowing our application to have the permission to access the photos. To do so, under properties of the project in solution explorer, open WMAppManifest.xml file. This is the application manifest file of out application where we are going to set the permission for our application.
Under the Capability tab, check the IB_CAP_MEDIALIB_PHOTO in the list of capabilities.

Save the project, rebuilt it, and you are ready to go.

On running the application, we will see the list of all images in the medialibrary onto the screen.

Happy Reading!!!