In this post I will show you how to create a simple Photo Viewer? Before I start, I would like to inform you about a gray part of this post that all the Images are attached as a resource in the phone application and this is not recommended. We should have either image in Isolated Storage or should be downloading from remote Server.

Expected Output


Idea here is very simple,

  1. Create Observable collection of Images
  2. Bind it to List Box.

Create Windows Phone 7.1 Application

Create Windows 7 Phone Application  and select platform as Windows Phone 7.1


Right click and add a folder called Images. We are going to upload all the images in this folder. So after uploading all the existing images solution explorer would look like below,


I know sometime these screen shorts may be annoying but I do it purposefully  for the beginners Smile


Create Photo class

To bind images to the ListBox , let us create Photo class. Right click and add a class called Photo in the project.




We have added the photos and created a Photo class to represent the Photos.

Now add below namespaces on MainPage.Xaml.cs




To bind a photo (image) to Image control, we need to provide ImageSource. So let us write a function taking as input parameter filename and retuning BitmapImage of that file name. Here we will pass filename of images we uploaded in Images folder.



Next we need to create collection of Images. I am creating observable collection.




You need to set ItemSource of ListBOX as output of above function.



Here lstImage is name of the ListBox.

Design the Page

We are going to put a ListBox in content grid and inside ItemTemplate of ListBox , we will put Image control.



As source of the Image you need to bind PhotoSource property of Photo class.

For Reference full source codes are given below. Feel free to use for your purpose  Smile




    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    <Grid x:Name="LayoutRoot" Background="Transparent">
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>

        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text=" IClicked MVP OpenDays Photo on Mango" Style="{StaticResource PhoneTextNormalStyle}"/>

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <ListBox x:Name="lstImage" Width="450" Margin="3,6">
                        <StackPanel Orientation="Horizontal">
                            <Image Source="{Binding PhotoSource}"
                                   HorizontalAlignment="Center" />



using System;
using System.Windows.Media;
using Microsoft.Phone.Controls;
using System.Collections.ObjectModel ;
using System.Windows.Media.Imaging ;

namespace ImageinMango
    public partial class MainPage : PhoneApplicationPage

        public MainPage()
            lstImage.ItemsSource = GetAllPhotos();

        private ImageSource GetImageSource(string fileName)
            return new BitmapImage(new Uri(fileName, UriKind.Relative));

        private ObservableCollection<Photo> GetAllPhotos()
            ObservableCollection<Photo> photos = new ObservableCollection<Photo>

                                                       new Photo{PhotoSource = GetImageSource("Images/AbhiM.jpg")},
                                                       new Photo{PhotoSource = GetImageSource("Images/AnandKH.jpg")},
                                                       new Photo{PhotoSource = GetImageSource("Images/Harish.jpg")},
                                                       new Photo{PhotoSource = GetImageSource("Images/HarishV.jpg")},
                                                       new Photo{PhotoSource = GetImageSource("Images/Abhi.jpg")},
                                                       new Photo{PhotoSource = GetImageSource("Images/Suprotim.jpg")},
                                                       new Photo{PhotoSource = GetImageSource("Images/HarishVAlone.png")},
                                                       new Photo{PhotoSource = GetImageSource("Images/Pinal.jpg")},
                                                       new Photo{PhotoSource = GetImageSource("Images/Shaivi.jpg")},                                                       new Photo{PhotoSource = GetImageSource("Images/Shobhan.jpg")},
                                                       new Photo{PhotoSource = GetImageSource("Images/Vikram.jpg")},
                                                       new Photo{PhotoSource = GetImageSource("Images/Host.jpg")}

            return photos;



Run the Application

Press F5 to run Photo viewer.  Smile



I hope this post was useful. Thanks for reading  Smile In further post , I will show you how to fetch Images from server instead of attaching them as resource.


4 thoughts on “Photo Viewer in Windows Phone 7.1 or Mango Phone

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s