Windows Phone 7.1 Imaging

This article demonstrates how to load .jpg images in Silverlight Windows Phone 7.1. Windows Phone 7 supports only jpg and png images.

In this article I will explain how to load jpg images on button click and how to change an image dynamically once you tap the screen.

Getting Started

Create a Windows Phone Application using the following:

• Open Visual Studio 2010.
• "File" -> "New" -> "Project..."
• Select "Silverlight for Windows Phone" from the Installed templates and choose "Windows Phone Application"
• Enter the name and choose the location.

Click "OK".

First of all create a new folder in the application named "images" and add a few jpg files to that folder. Now drag and drop an image control from the tool box and some buttons and fire the button events, as in the following:

<!--ContentPanel - place additional content here-->

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

    <Image  HorizontalAlignment="Left" Margin="10,10,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Top" />

    <Button Content="Image 1" Height="72" HorizontalAlignment="Left" Margin="0,420,0,0" Name="btnImage1" VerticalAlignment="Top" Width="160"

        Click="btnImage1_Click" />

    <Button Content="Image 2" Height="72" HorizontalAlignment="Left" Margin="211,420,0,0" Name="btnImage2" VerticalAlignment="Top" Width="160"

        Click="btnImage2_Click" />

    <Button Content="Image 3" Height="72" HorizontalAlignment="Left" Margin="0,475,0,0" Name="btnImage3" VerticalAlignment="Top" Width="160"

        Click="btnImage3_Click" />

    <Button Content="Image 4" Height="72" HorizontalAlignment="Left" Margin="211,475,0,0" Name="btnImage4" VerticalAlignment="Top" Width="160"

        Click="btnImage4_Click" />

    <TextBlock Height="30" HorizontalAlignment="Left" Margin="12,553,0,0" Name="textBlock1" Text="TextBlock" VerticalAlignment="Top" Width="297" />

</Grid>

private void btnImage1_Click(object sender, RoutedEventArgs e)

{

    Uri uri = new Uri("/ImagingPhoneApp;component/images/image2.jpg", UriKind.Relative);

    BitmapImage bmp = new BitmapImage(uri);

    image1.Source = bmp;
}
void wc_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e)

{

    BitmapImage bmp = new BitmapImage();

    bmp.SetSource(e.Result);

    image1.Source = bmp;

}

 

private void btnImage2_Click(object sender, RoutedEventArgs e)

{

    Uri uri = new Uri("/ImagingPhoneApp;component/images/image3.jpg", UriKind.Relative);

    BitmapImage bmp = new BitmapImage(uri);

    image1.Source = bmp;

}

 

private void btnImage3_Click(object sender, RoutedEventArgs e)

{

    Uri uri = new Uri("/ImagingPhoneApp;component/images/image4.jpg", UriKind.Relative);

    BitmapImage bmp = new BitmapImage(uri);

    image1.Source = bmp;

}

 

private void btnImage4_Click(object sender, RoutedEventArgs e)

{

    Uri uri1 = new Uri("/ImagingPhoneApp;component/images/image5.jpg", UriKind.Relative);

    BitmapImage bitmapImage = new BitmapImage(uri1);

    image1.Source = bitmapImage;

}

Run the application in the Windows Phone emulator to see the result. Click on the image 1 button.



Image 1.



Image 2.

Now let's start manipulating the image when the user taps the screen. First of all select all images and click properties and change the BuildAction property Resource to "Content" and copy to the output directory; do not use "Copy Always".



Image 3.

Now write the code to start the manipulation:

        // The following function will be invoked whenever user Taps on the screen.

        protected override void OnManipulationStarted(ManipulationStartedEventArgs args)

        {

     btnImage1.Visibility = Visibility.Collapsed;

            btnImage2.Visibility = Visibility.Collapsed;

            btnImage3.Visibility = Visibility.Collapsed;

            btnImage4.Visibility = Visibility.Collapsed;

 

            switch (FileCounter)

            {

                case 1:

                    fileName = "images/Image2.JPG";

                    FileCounter = 2;

                    break;

                case 2:

                    fileName = "images/Image3.JPG";

                    FileCounter = 3;

                    break;

                case 3:

                    fileName = "images/Image4.JPG";

                    FileCounter = 4;

                    break;

                case 4:

                    fileName = "images/Image5.JPG";

                    FileCounter = 1;

                    break;

            }

            Uri uri = new Uri(fileName, UriKind.Relative);

            StreamResourceInfo resourceInfo = Application.GetResourceStream(uri);

            BitmapImage bmp = new BitmapImage();

            bmp.SetSource(resourceInfo.Stream);

            image1.Source = bmp;

            args.Complete();

            args.Handled = true;

            textBlock1.Text = fileName;

            base.OnManipulationStarted(args);

        }

Run the application.



Image 4.

Now tap the screen to change the image.



Image 5.

To learn more, please download the attached sample.