Working with the Image Control: Windows Phone Apps Development Tutorial – Part 18

Now that we leant about XAML Event And Input Controls, in this art of the Windows Phone 7.5 Mango App development series, we shall have a look at the Image Control that enables you to display images in your Silverlight Windows Phone 7 Application.

So let’s get started!

Create a new Windows Phone 7 project with a unique name like “ImageControlDemo”. Now drag and drop the Image Control from the toolbox to the design surface. Now in order to display an image in the image control we use the ‘Source’ property of the Image Control. This property can be found in the Properties Window just before the ‘Stretch’ property. The Source property defines where the image will come from to be displayed in the Image Control. Upon clicking the ellipsis next to the Source property a new window pops open asking us to choose the image. Click the Add image button to add an image to the project.

Upon selecting an image a couple of interesting things happen. First of all Visual Studio automatically creates a folder by the name Images and adds the image file that you selected. Secondly it creates a URI (Uniform Resource Identifier)/path for accessing the image, something like ‘/Images;component/Images/Picture1.jpg’. The /Image refers to the deployment package and what comes after the semicolon will reference that file within the deployment package once it is deployed on the phone, i.e., the xap file. Once you click the OK button of the Choose Image window the image is loaded into the image control.

ImageControl

Another notable property of the image control is the ‘Stretch’ property. Setting the Stretch property to Fill; fills the entire area of the image control with the image regardless of the picture’s dimensions. Changing the size of the image control changes the size of the image. No regards to the proportion of the image are given thereby distorting the picture. Setting the Stretch property to Uniform keeps the perspective correct by honoring the height or the width of the image but it will not crop the picture. Setting the Stretch property to ‘UniformToFill’ honors the picture’s vertical and horizontal proportions. The image is clipped if necessary to maintain proportion. The clipping can be addressed by allowing the user to scroll the image up or down, left or right. In order to do this all you have to do is surround the image with a ScrollViewer control and set its horizontal and vertical scrollbar visibility to visible.

ImageControl_Uniform_prop

Image Control Uniform Property

One last thing before we wind up this lesson. In case you wish to set the image through C# code all you have to do is create an object of BitmapImage object and specify the URI in the overloaded constructor. Once the BitmapImage object is created all you have to do is equate it to the source property of the Image Control.

BitmapImage myImage = new BitmapImage(new Uri("/Images;component/Images/Penguins.jpg", UriKind.Relative));
image1.Source = myImage;

It is pretty simple control and has its usefulness served at many places.

That’s it for now, in next tutorial we will learn more about Styles and Resources.

Posted by on , in Category Phone with Tags
Gadget freak, Apple lover, Windows Phone lover; well that’s me! I have been in this wonderful field of freelance writing for quite some time and looking forward to developing more illuminating content related to gadgets and technology, as I go along.

2 Comments

  1. Sagar Rai

    There are official Flickr apps for your iPhone, iPod touch, Android, or Windows Phone 7 device.

  2. Rumesh Parera

    Thank you Very much for this article it helped me lot in understanding image control in windows phone 7 development, this has become my Best material in Image control in Windows Phone Development topic. You made this very simple and understandable. There are some goods articles too helped me lot in completing my task here I’m sharing that posts link…
    http://mobile.dzone.com/articles/image-control-silverlight

    http://www.mindstick.com/Articles/fbe92f81-ab4b-4b25-8fc8-8a12223cb8b0/?Image%20Control%20in%20Windows%207%20Phone%20Development

    Thanks again for your wonderful post!

Leave a Reply

Your email address will not be published. Required fields are marked *


3 + 3 =