Loading local image file on Tap events in Windows Phone

Comments

Cdiscla - Thank you!

Super useful example, solved me a weird problem in dynamically generating live tiles images !

Thanks Nokia, keep up the great work on promoting the great Windows Phones!!

cdiscla 17:36, 15 November 2011 (EET)

Log in or Join to leave comments.

Article Metadata

---

Code Example

Source file: Media:Touch.zip

---

Tested with

SDK: Windows Phone 7.1

---

Compatibility

Platform(s): Windows Phone

---

Article

Created: girishpadia (18 Oct 2011)

Last edited: hamishwillee (10 Apr 2013)

Introduction

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.

Implementation

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.

MainPage.xaml

Following is synopsis of the MainPage.xaml file.

<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <!--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}"/>
        </StackPanel>
        <!--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" />
    </Grid>
</Grid>

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.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()
        {
            InitializeComponent();
        }
        // 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";
                    FileCounter=2;
                    break;
                case 2:
                    fileName = "Images/Image2.JPG";
                    FileCounter=3;
                    break;
                case 3:
                    fileName = "Images/Image3.JPG";
                    FileCounter=4;
                    break;
                case 4:
                    fileName = "Images/Image4.JPG";
                    FileCounter=1;
                    break;
            }
            Uri uri = new Uri(fileName, UriKind.Relative);
            StreamResourceInfo resourceInfo = Application.GetResourceStream(uri);
            BitmapImage bmp = new BitmapImage();
            bmp.SetSource(resourceInfo.Stream);
            img.Source = bmp;
            args.Complete();
            args.Handled = true;
            txtFileName.Text = fileName;
            base.OnManipulationStarted(args);
        }
    }
}

Application Image

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

• 

  First tap - image 1

• 

  Second tap - image 2

• 

  Third tap - image 3

• 

  Fourth tap - image 4