Create Image Viewer for Windows Phone 7

Objective

This article will give step to step illustration of creating a simple Image Viewer for Windows Phone 7 .

Step 1

Create a new Windows Phone Application.  From Silverlight for Windows Phone tab select Windows Phone Application project type.
 

Step 2

In this step I will create an entity class for images to be displayed.  This class will contain two properties. Filename property for the name of the image and image property for the image source.  To create just right click on the project and add a class.

Photo.cs

namespace PhotoApplication
{
    public class Photo
    {
        public string FileName { get; set; }
        public ImageSource Image { get; set; }

    }
}

Step 3

Design the page as below. Add below controls in content grid.
1.    Add a list box.  Set the height as 520 and width as 450.
2.    Add Item Template for List box.
3.    Add Data template inside item template
4.    Inside Data template add a stack panel with horizontal orientation.
5.    Inside Stack panel put an Image control and bind source of this control to image property of Photo class.
6.    Inside Stack panel put a text block and bind text property of this control to Filename property of Photo class.

MainPage.Xaml
 

Step 4

Right click on project and add few images in project. I am adding 5 jpeg images.  To add images  right click on project and click add existing item  then select images from local computer.  See below the images added in project 

Step 5

Right a function to convert filename into Bitmap image. The below function GetImage() will take filename as input and return an image source.

Right a function to initialize the collection of images.  Function GetPhotos() will return   an    observableCollection  of Photo class .  This collection can directly be bind to the itemsource of list box control. 

On the Main Page load bind the itmesource to collection.

MainPage.Xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
using System.Collections.ObjectModel;
using System.Windows.Media.Imaging; 

namespace PhotoApplication
{
    public partial class MainPage : PhoneApplicationPage
    {
        public MainPage()
        {
            InitializeComponent();

            SupportedOrientations = SupportedPageOrientation.Portrait | SupportedPageOrientation.Landscape;

            lstImage.ItemsSource = GetPhotos();
           
        }


        public ObservableCollection<Photo> GetPhotos()
        {
            ObservableCollection<Photo> photos = new ObservableCollection<Photo>()
                                                 {
                                                     new Photo(){FileName="A.jpg",Image=GetImage("A.jpg")},
                                                     new Photo(){FileName="B.jpg", Image = GetImage("B.jpg")},
                                                     new Photo(){FileName="C.jpg",Image = GetImage("C.jpg")},
                                                     new Photo(){FileName="D.jpg",Image = GetImage("D.jpg")},
                                                     new Photo(){FileName ="E.jpg",Image =GetImage("E.jpg")}
                                                 };
            return photos; 

        }

        private ImageSource GetImage(string fileName)
        {
            return new BitmapImage(new Uri(fileName, UriKind.Relative));
        }    


    }
}

Press F5 to get the output

Thanks for reading. I hope it was useful. Happy Coding.