您的位置:知识库 » .NET技术

一步一步学Silverlight :图片处理

作者: TerryLee  来源: 博客园  发布时间: 2008-10-09 10:26  阅读: 15977 次  推荐: 0   原文链接   [收藏]  

图片拉伸

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

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

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

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

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

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

TerryLee_Silverlight2_0138

在页面上放置四个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>

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

TerryLee_Silverlight2_0139

0
0
 

.NET技术热门文章

    .NET技术最新文章

      最新新闻

        热门新闻