Although the simple vector drawing stack is
invaluable to the design of your Windows Phone 7 application, you will
always need to use images in your application. The simple Image element is used to display images in your application:
<Image Source="http://wildermuth.com/images/headshot.jpg" />
The Image element supports JPEG and PNG files. It does not support GIF files. By specifying the Source attribute, the Image element shows the picture you specify in the URI of the source. Specifying an Internet URI, the Image element will attempt to download the image from the Internet location. The Source attribute supports a relative URI as well:
<Image Source="headshot.jpg" />
By using a relative URI, the Image element attempts to
download the image from the application itself. You can add an existing
image to the Windows Phone project by simply selecting Add | Existing
Item from the Project menu. Once you have the image as part of the
project, it will be packaged with your application. Therefore, you can
simply use the relative URI to specify the Source
attribute. The relative URI is relative to the root of the project. So
if you were to put an image in a project folder, the URI would navigate
to the path:
<Image Source="Images/headshot.jpg" />
Storing your images as part of the application is typical for static images (e.g., button icons, backgrounds, etc.).
By default, the Image element is set to stretch the image to fit the size of the element. You can stretch images by specifying the Stretch attribute. The valid types of stretch include
• None: No stretching is performed.
• Uniform: Stretches the image, preserving the original aspect ratio, to fit within the frame of the Image element. This is the default.
• UniformToFill: Stretches the image, preserving the original aspect ratio, to fill the Image element. If the aspect ratio of the Image element is different from that image, the image will be clipped to accommodate the difference.
• Fill: Stretches the image to fill the Image element without preserving the aspect ratio.
Figure 1 illustrates examples of the different stretch types.
Figure 1. Image stretching
When creating Image elements you can simply specify the Stretch attribute, like so:
<Image Source="Images/headshot.jpg" Stretch="UniformToFill" />
Because the Image element is
just part of the design grammar, you can specify size either by using
height and width or by using container properties like any other element
(e.g., Grid.Row/Column, Margin, VerticalAlignment, etc.).
