Photo Viewer in Windows Phone 7.1 or Mango Phone

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

 

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.

Photo.cs

 

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 

 

MainPage.xaml

 

<phone:PhoneApplicationPage
    x:Class="ImageinMango.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <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}"/>
          </StackPanel>

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <ListBox x:Name="lstImage" Width="450" Margin="3,6">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <Image Source="{Binding PhotoSource}"
                                   Width="425"
                                   Height="auto"
                                   Stretch="Uniform"
                                   HorizontalAlignment="Center" />
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </Grid>
    </Grid>
</phone:PhoneApplicationPage>

 

MainPage.xaml.cs

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()
        {
            InitializeComponent();
            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. 

 

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