Another blog ...

Images In Silverlight

Written by Apu on 3:39 PM

In the last Silverlight tutorial, we learned how to create some basic shapes. Today let's explore how we can use images in Silverlight.

Using image is very easy and simple in Silverlight. Lets look at the following example.

<Canvas Width="200" Height="200"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Image Source="image1.png" />
</Canvas>

This would load the image 'image1.png' (provided it exists in the same directory as the xaml), into the Silverlight canvas.

One of the most important Property of Image is 'Stretch'. The Silverlight SDK defines it as 'A value of the Stretch enumeration that specifies how the source image is applied if the Height and Width of the Image are specified and are different than the source image's height and width.' Lets just say it defines how the image will be stretched to match the output area on the canvas. There are four possible values for this property. These are -

None - The image isn't stretched.

Fill - The image will stretch to completely fill the output area. Hence if the image and the output area have different aspect ratio, this would result in distortion of the image.

Uniform - To avoid the distortion caused by Fill, in case the image and the output area are of different aspect ratio, we can use the value 'Uniform' which preserves the aspect ratio of the image.This is the default value.

UniformToFill - The image is stretched to fill the output area completely but also preserves its original aspect ratio. So in some cases the source content gets clipped to fit into the output area aspect ratio.

Examples-
The following code will display the image (which is roughly of the size 240*210), into an output area of 200*100 without stretching it.

<Canvas Width="200" Height="350"
xmlns="http://schemas.microsoft.com/client/2007"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Image Source="Image1.png" Stretch="None" Height="100"
Width="200" Canvas.Left="100"/>
</Canvas>

Here's low it would look.






















Replace Stretch="None" with Stretch="Fill" (i.e, setting the Stretch value to 'Fill'), would give you the following result.
















Now, set the stretch to 'Uniform',you'd see that the image had retained its original aspect ratio although it has become smaller to fit into the output area.

Setting the stretch property to 'UniformToFill' would give you the following result. As you can see, in this case, the aspect ratio of the image has been retained and it hasn't reduced in size to fit into the output area. Hence the complete image isn't visible. It has been clipped.

Opacity
Opacity is another important property of image (it applies to shapes as well). Opacity controls the transparency of any UIElement. The value of opacity can be between 0 and 1.0, where 1.0 means its completely opaque and 0 means its invisible.

How to use the 'Opacity' property.

The following code shows how to use the Opacity property.

<Canvas Width="300" Height="300"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Image Source="Image1.png" Opacity="0.5"/>
</Canvas>