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

imageimage

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

imageimage

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,

image

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.

Photo.cs

clip_image002

 

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

Now add below namespaces on MainPage.Xaml.cs

 

clip_image001

 

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.

 

clip_image003

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

 

image

 

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

 

clip_image001[5]

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.

 

clip_image001[7]

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

 

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.  Smile

imageimg1

 

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.

Advertisements

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:

WordPress.com Logo

You are commenting using your WordPress.com 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