Silverlight入门学习（20）

原文地址：http://www.dingos.cn/index.php?topic=2000.0

第二十章 如何在Silverlight控件中显示图像？

在Silverlight中，image控件可以用来显示图像。用法和前面的相似。使用Image控件的语法如下：

<Grid x:Name="Layout" Width="250" Height="250" Background="GREEN" >

   <Image x:Name="MyImage" Source="/AppleTree.png" Stretch="Uniform"></Image>

</Grid>

Image.Source属性

Source属性用于指定图片的位置。

<Image x:Name="blue" Source="/images/AppleTree.png" Stretch="None"/>

<Image x:Name="green" Source="images/AppleTree.png" Stretch="None" />

以反斜杠开头的图片需要放在ClientBin目录下的相应文件夹里；不以反斜杠开头的图片应该放在Silverlight项目的目录下的相应文件夹里。

反斜杠开头的相对路径，代表的相对位置是应用程序运行的根目录，即.xap压缩包内，若在这其中寻找不到要引用的文件，则相对路径的回退机制（fallback mechanism ）自动在在.xap所在的目录，即为ClientBin目录中寻找加以引用。两个位置都没有，才会发生错误。不以"/"开头，则代表的相对位置是引用该图片的XAML文件所在的目录，即page.xaml文件所在的目录。

Image.stretch属性

Stretch属性可能有以下值：

1. None

这样不会改变image的大小。如果图像大小大于容器的大小，图像在容器中会被裁减以适应容器的大小。

2. Fill

在这种情况下，图像会扩大以填充容器区域。在宽高比方面（宽度和高度比）将不能保持。

3. Uniform

这是默认值。在这种情况下，图像将根据容器的大小调整，但保持宽高比不变。因此，可能在容器和图片周围可能有空白。

4. UniformToFill

在这种情况下，图像将改变大小并填充容器，如果需要的话宽高比将做一些微调。

Width和Height属性

图片的宽、高属性将覆盖Stretch属性。如果指定宽、高属性，则Stretch属性被忽略。

Image.Clip属性

Image控件的Clip属性在Silverlight中被用来确定图片部分显示和其他部分隐藏。

看下面的例子如何以椭圆的形式显示图像：

<Grid x:Name="Layout" Width="200" Height="220" Background="YELLOW" >

   <Image x:Name="MyImage" Source="Images/AppleTree.png" Stretch="Fill">

       <Image.Clip>

           <EllipseGeometry x:Name="Ellipse" RadiusX="100" RadiusY="100"

                   Center="100,110"/>

       </Image.Clip>

   </Image>

</Grid>

上面代码运行后呈现图像如下：