Image Viewer for Windows Phone 7

Objective 

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. 

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

<phoneNavigation:PhoneApplicationPage

    x:Class="PhotoApplication.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:phoneNavigation="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Navigation"

    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="800"

    FontFamily="{StaticResource PhoneFontFamilyNormal}"

    FontSize="{StaticResource PhoneFontSizeNormal}"

    Foreground="{StaticResource PhoneForegroundBrush}">

    <Grid x:Name="LayoutRoot" Background="{StaticResource PhoneBackgroundBrush}">

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="*"/>

        </Grid.RowDefinitions>      

        <Grid x:Name="TitleGrid" Grid.Row="0">

            <TextBlock Text="Windows 7 phone" x:Name="textBlockPageTitle" Style="{StaticResource PhoneTextPageTitle1Style}"/>

            <TextBlock Text="Media" x:Name="textBlockListTitle" Style="{StaticResource PhoneTextPageTitle2Style}"/>

        </Grid>     

        <Grid x:Name="ContentGrid" Grid.Row="1">       

            <ListBox x:Name="lstImage" Width="450" Height="520">

                    <ListBox.ItemTemplate>

                        <DataTemplate>

                            <StackPanel Orientation="Horizontal">

                                <Image  Source="{Binding Image}" Width="150" Stretch="Uniform" HorizontalAlignment="Center" />

                                <TextBlock Text="{Binding FileName}" TextWrapping="Wrap" />

                            </StackPanel>

                        </DataTemplate>

                    </ListBox.ItemTemplate>

                </ListBox>       

        </Grid>

    </Grid>   

</phoneNavigation:PhoneApplicationPage>

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.

private ImageSource GetImage(string fileName)

{

    return new BitmapImage(new Uri(fileName, UriKind.Relative));

}   

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

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;

}

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.