.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
Sign In
Win Surprise Gifts!!!

Top 5 Contributors of the Month
Gaurav Pal

Home >> Articles >> Windows 7 >> Post New Resource Bookmark and Share   

 Subscribe to Articles

Image Viewer in Windows 7 Mobile application

Posted By:Dhananjay Kumar       Posted Date: April 06, 2010    Points: 25    Category: Windows 7    URL: http://www.dotnetspark.com  

Image Viewer in Windows 7 Mobile application. This article will give step to step illustration of creating a simple Image Viewer for Windows 7 mobile.

Image Viewer  for Windows 7 Mobile


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

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.


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.



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.


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

  SupportedOrientations = SupportedPageOrientation.Portrait | SupportedPageOrientation.Landscape;

  lstImage.ItemsSource = GetPhotos();

  public ObservableCollection GetPhotos()
  ObservableCollection photos = new ObservableCollection()
  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.

 Subscribe to Articles


Further Readings:

Author: Syed Shakeer Hussain         Company URL: http://www.dotnetspark.com
Posted Date: August 05, 2010

Hi Dhananjay Kumar,

Good Information shared

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend