images

the Image element

The Image element provides a convenient way to display JPG and PNG images in Silverlight.  To display an image, set the Image object's Source property with the path of your image file. The following example uses an Image element to display a 141 by 131 bitmap image. Because the Image element's Width and Height properties are not specified, the bitmap is displayed at its native size.

[hide XAML]

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

[hide] [restart]

the Stretch property

When the size of the Image element and the size of its bitmap are different, the Stretch property determines how the bitmap is stretched to fit the Image element. The Stretch property takes the following values: None, Fill, Uniform, UniformToFill. The following example demonstrates the None, Uniform, and Fill settings.

[hide XAML]

<Canvas Width="300" Height="300"
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Background="White">
  <Image Source="star.png" Stretch="None"
     Height="100" Width="200" Canvas.Left="100" />
  
  <Image Source="star.png" Stretch="Fill"
     Height="100" Width="200" Canvas.Top="100" Canvas.Left="100" />   
  
  <Image Source="star.png" Stretch="Uniform"
     Height="100" Width="200" Canvas.Top="200" Canvas.Left="100" /> 
     
  <TextBlock Canvas.Left="5" Canvas.Top="0">None</TextBlock>
  <TextBlock Canvas.Left="5" Canvas.Top="100">Fill</TextBlock>
  <TextBlock Canvas.Left="5" Canvas.Top="200">Uniform</TextBlock> 
</Canvas>

[hide] [restart]

For more information about the different stretch settings, see the Stretch property in the Silverlight SDK.

other ways to use bitmaps

To use a bitmap as a background, use the ImageBrush object. See drawing and painting for more information.

what's next

The next topic, text, describes how to use the TextBlock element to add text to your Silverlight content.