学Silverlight 2系列（28）：图片处理

核心提示： 图片拉伸当我们创建了一个图片的时候，如果不指定它的宽度和高度，学Silverlight 2系列（28）：图片处理(2)，它将会使用默认的规格来显示；如果指定了高和宽，图片将显示在指定高和宽的矩形区域内，图片的大小也定义为220*220，设置四个Image的Stretch属性分别为None、

图片拉伸

当我们创建了一个图片的时候，如果不指定它的宽度和高度，它将会使用默认的规格来显示；如果指定了高和宽，图片将显示在指定高和宽的矩形区域内。可以通过苏醒Stretch来指定图片如何填充在该区域内，即图片拉伸。Stretch属性具有四个可选值：

None：不对图片进行拉伸以便填充规定的尺寸。

Uniform：按比例进行拉伸，直到有一边满足规定的尺寸区域为止，其余部分不会被填充，按最小尺寸填充。

UniformToFill：按比例进行拉伸，直到完全填充规定的尺寸区域为止，超出该区域的将会被裁剪，按最大尺寸填充。

Fill：不按比例拉伸，完全填充规定的尺寸区域，将会破坏图像的比例。

Stretch默认的属性是Uniform，为了更直观的看到这个四个值的区别，下面看一个例子，我们使用一个规格尺寸为160*90图片，中间带一个小的正方形：

在页面上放置四个Border控件，大小为220*220，并在其中各放置一个Image，图片的大小也定义为220*220，设置四个Image的Stretch属性分别为None、Uniform、UniformToFill、Fill，如下所示：

<Canvas Background="#CDFCAE">
　　<Border BorderBrush="Black" BorderThickness="3"
　　　　　　Width="220" Height="220" Canvas.Left="40" Canvas.Top="50">
　　　　<Image Source="a2.png" Stretch="None" Width="220" Height="220"></Image>
　　</Border>
　　
　　<Border BorderBrush="Black" BorderThickness="3"
　　　　　　Width="220" Height="220" Canvas.Left="330" Canvas.Top="50">
　　　　<Image Source="a2.png" Stretch="Uniform" Width="220" Height="220"></Image>
　　</Border>
　　<Border BorderBrush="Black" BorderThickness="3"
　　　　　　Width="220" Height="220" Canvas.Left="330" Canvas.Top="330">
　　　　<Image Source="a2.png" Stretch="UniformToFill" Width="220" Height="220"></Image>
　　</Border>
　　
　　<Border BorderBrush="Black" BorderThickness="3"
　　　　　　Width="220" Height="220" Canvas.Left="40" Canvas.Top="330">
　　　　<Image Source="a2.png" Stretch="Fill" Width="220" Height="220"></Image>
　　</Border>
</Canvas>

运行后可以很明显的看到这个四个值的区别，如下图所示：