Revision as of 19:18, 3 August 2013 by pavan.pareta (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Loading local image file on Tap events in Windows Phone

From Nokia Developer 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: Media:Touch.zip
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 switch...case 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 switch...case 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 19:18.
648 page views in the last 30 days.