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.
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.
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.