Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Loading local image file on Tap events in Windows Phone

From Wiki
Jump to: navigation, search
WP Metro Icon File.png
WP Metro Icon UI.png
SignpostIcon XAML 40.png
SignpostIcon WP7 70px.png
Article Metadata
Code Example
Source file:
Tested withCompatibility
Windows Phone 7.5
Created: girishpadia (18 Oct 2011)
Last edited: pavan.pareta (03 Aug 2013)



This code example displays a sequence of images (Image1.jpg,Image2.jpg,Image3.jpg and Image4.jpg), loading a new image when the screen is touched. It demonstrates how to detect the Windows Phone "tap" event, how to load a local image file, and how to use a structure in Silverlight C# project.


In order to implement this idea we will follow the steps mentioned below.

  1. Create a Silverlight C# project and name it "Touch".
  2. Place an Image control and a TextBlock(Name it txtFileName) control within the phone screen. The code of MainPage.xaml should look something like the MainPage.xaml shown here.
  3. Right click on the project and select Add->New Folder to add a blank folder within the project. Rename the folder to "Images".
  4. Right Click on "Images" folder and add four image files with it. Name this image files as Image1.jpg,Image2.jpg,Image3.jpg and Image4.jpg. Set following properties of each of the image file as below.
    • Build Action -> Content
    • Copy to output directory -> Copy always
  5. Now open the MainPage.xaml.cs file and import following two libraries in additional to existing imported libraries.
    • using System.Windows.Resources;
    • using System.Windows.Media.Imaging;
  6. Now you can replace the code of your MainPage.xaml.cs file to the code shown in the sample MainPage.xaml.cs file. I have added necessary comment lines to understand the code.


Following is synopsis of the MainPage.xaml file.

<Grid x:Name="LayoutRoot" Background="Transparent">
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="Touch Test" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Image Height="366" HorizontalAlignment="Left" Margin="12,25,0,0" Name="img" Stretch="Fill" VerticalAlignment="Top" Width="425" />
<TextBlock Height="30" HorizontalAlignment="Center" Margin="12,411,0,0" Name="txtFileName" Text="" VerticalAlignment="Top" Width="425" />


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.Windows.Resources;
using System.Windows.Media.Imaging;
namespace Touch
public partial class MainPage : PhoneApplicationPage
// Constructor
// declaring public variables.
public int FileCounter = 1;
public string fileName;
public MainPage()
// The following function will be invoked whenever user Taps on the screen.
protected override void OnManipulationStarted(ManipulationStartedEventArgs args)
// Following is the routing structure...
switch (FileCounter)
case 1:
fileName = "Images/Image1.JPG";
case 2:
fileName = "Images/Image2.JPG";
case 3:
fileName = "Images/Image3.JPG";
case 4:
fileName = "Images/Image4.JPG";
Uri uri = new Uri(fileName, UriKind.Relative);
StreamResourceInfo resourceInfo = Application.GetResourceStream(uri);
BitmapImage bmp = new BitmapImage();
img.Source = bmp;
args.Handled = true;
txtFileName.Text = fileName;

Application Image

Following is sequence of images which will be shown after each screen tap.

This page was last modified on 3 August 2013, at 16:18.
510 page views in the last 30 days.