The Image Control allows me to display images in my Silverlight Windows Phone 7 application. To have a first closer look at this control I just created a new project and dragged an Image Control to my main form. In my properties window I have a little helper, an ellipsis button next to the Source property. The source property is going to define where the image should come from that will be displayed:
I am going to click the ellipsis button to add a new image to my project:
When I click the Add button I can choose the image I want to display. So, let me go ahead and do that:
What happened is that Visual Studio created an Images folder in my Solution Explorer that contains my image:
The next thing is that that path has kind of a strange look:
“/Images;” is going to refer to the deployment package. What comes after the semicolon will reference that file within the deployment package once it is loaded onto the phone.
This altogether, this path, is actually referred to as an URI, Uniform Resource Identifier. It’s kind of like an URL, except an URI can reference any location, not just a web based location. In this case it is referencing the location internally within a file.Anyway, when I am going to click the OK button, I see my image loaded in the Image Control in my main form:
There’s only one tiny, little problem. When I start moving the dimensions of the Image Control around, it stretches my image out of proportion:
How can I resolve that? In my properties window right under the Source property is the Stretch property. By default it is set to Fill, that means it fills the whole area of the Image Control. If I resize that control, it still fills that area completely regardless of the dimensions.
Let’s set it to Uniform. That will keep the perspective correct. But it only will honor either the horizontal or the vertical proportion of the image within the Image Control, but it will not crop it:
When I set it to UniformToFill, it will honor both the horizontal and the vertical proportion of the image:
Depending on how I adjust the size or the dimensions of the Image Control, there’s going to be a lot of clipping involved. So, it just depends on how I am planning on using that Image Control.
For now I am going to set it back to Uniform. For my purposes I can determine exactly how much space I want to give this image.
The next step is that I am programmatically going to change from this to another picture.
First of all I am going to need a button, because I want this to fire off when somebody clicks the button. So I am double clicking that button to get to my C# code.
Now I first have to add another image to my Images folder. For that I that little drop down arrow next to the “Add New Item” Button right under “Edit” in my menu and select “Add Existing Item”:
That will let pop up the “Add Existing Item” dialog and I am already in the images directory I navigated to earlier. I select the image I want, click the Add button and my image is added to the Images folder:
Now I want to create a new instance of an object that will essentially represent the new image I am going to load in. And then I am going to set the Source property to that instance of my Image object. The object that I am going to use is called a BitmapImage. In the constructor I am going to use this uriSource:
In other words, I am going to tell the location as I am creating a new instance of the BitmapImage where it can find the picture that I want to use.This is where I am going to create a new URI, and I am going to pass in the string that represents the location within the deployment package where Silverlight is going to be able to find that second image. Plus I am going to tell it what type of Url it is looking at. It’s a relative Url, it’s relative to the deployment package.
The second step of this process is to set the Source equal to myImage:
Let’s run the application:
Let’s go a step further and see how to allow the image to be zoomed in and how to allow the user to scroll around inside the image.
For that I go to my XAML page, and there I can surround my Image Control with a ScrollViewer. Then I remove the Margin of my image completely and change the Width to 800, and also the Height:
When I run the application I can use my mouse cursor to simulate a finger to scroll around in the image:
To be continued…