图像

Image 元素

Image 元素提供了一个便利的方法在 Silverlight 中显示 JPG 和 PNG 图像。 要显示一个图像，设置 Image 对象的 Source 属性来标识你的图像文件源的路径。 下面的示例使用了一个 Image 元素用以显示 141*131 像素的位图。 由于 Image 的 Width 和 Height 属性没有被标识， 位图显示的是它的原始大小。

[隐藏 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>

[隐藏] [重新开始]

Stretch 属性

当 Image 元素的尺寸被设置并且尺寸与位图的尺寸不同时， Stretch 属性决定了如何拉伸位图以适应 Image 元素。 Stretch 属性有以下的值：None、Fill、Uniform、UniformToFill。 下面的示例演示了 None、Uniform 和 Fill 设置。

[隐藏 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>

[隐藏] [重新开始]

关于拉伸设置的更多位置，请参见 Silverlight SDK 的 Stretch 属性。

其它使用位图的方法

要使用位图作为背景， 使用 ImageBrush 对象。 请参见 绘图和喷涂 获取更多信息。

下一步是什么

下一个主题，文字， 描绘了如何使用 TextBlock 元素来添加文字到你的 Silverlight 内容中。