Silverlight中Image控件Stretch属性的四种值比较

通过设置Image控件Stretch属性的值可以控制图片的显示形式：

  包含的值：None、Fill、Uniform、UniformToFill

  

  <Grid x:Name="LayoutRoot" Background="White" Height="489" Width="603">
        <Image Height="150" HorizontalAlignment="Left" Name="image1" Stretch="None" VerticalAlignment="Top" Width="200" Source="/SilverlightApplication1;component/Images/2009011911345229.jpg" Margin="10,14,0,0" />
        <Image Height="150" HorizontalAlignment="Left" Margin="325,14,0,0" Name="image2" Stretch="Fill" VerticalAlignment="Top" Width="200" Source="/SilverlightApplication1;component/Images/2009011911345229.jpg" Grid.ColumnSpan="3" />
        <Image Height="150" HorizontalAlignment="Left" Margin="10,239,0,0" Name="image3" Stretch="Uniform" VerticalAlignment="Top" Width="200" Source="/SilverlightApplication1;component/Images/2009011911345229.jpg"  />
        <Image Height="150" HorizontalAlignment="Left" Margin="325,239,0,0" Name="image4" Stretch="UniformToFill" VerticalAlignment="Top" Width="200"  Source="/SilverlightApplication1;component/Images/2009011911345229.jpg" Grid.ColumnSpan="3" />
        <TextBlock Height="67" HorizontalAlignment="Left" Margin="12,166,0,0" Name="textBlock1" VerticalAlignment="Top" Width="207" TextWrapping="Wrap">
            <TextBlock.Text>
                None：图片直接加载到Image控件中，不进行拉伸，如果Image控件的大小是100X100 而图片的大小为1000X1000 则只显示顶部的100X100
            </TextBlock.Text>
        </TextBlock>
        <TextBlock Height="67" HorizontalAlignment="Left" Margin="325,166,0,0" Name="textBlock2" VerticalAlignment="Top" Width="200" TextWrapping="Wrap" Grid.ColumnSpan="3">
            <TextBlock.Text>
                Fill：图片会拉伸或缩小以适应Image控件 长宽比可能改变
            </TextBlock.Text>
        </TextBlock>
        <TextBlock Height="67" HorizontalAlignment="Left" Margin="12,395,0,0" Name="textBlock3"  TextWrapping="Wrap" VerticalAlignment="Top" Width="200" >
            <TextBlock.Text>
                Uniform：图片会拉伸到最佳大小（不一定充满整个Image控件）保持长宽比不变
            </TextBlock.Text>
        </TextBlock>
        <TextBlock Height="67" HorizontalAlignment="Left" Margin="325,395,0,0" Name="textBlock4" VerticalAlignment="Top" Width="200"  TextWrapping="Wrap" Grid.ColumnSpan="3">
            UniformToFill：图片会在不改变长宽比的前提下拉伸，它会充满整个Image控件 但可能被裁减
        </TextBlock>
    </Grid>

 

再来看看效果：

使用的图片是220X220 Image控件是200x150 通过上面的显示效果就可以一目了然啦

None：显示200x150 它从图片的顶点看是截取Image控件大小的图片显示；

Fill：显示200x150的图片长宽都在相应的压缩（拉伸）但不一定成比例；

Uniform：显示150X150的图片 相当于按比例拉伸但不一定充满控件；

UniformToFill：显示200X150的图片 按比例充满Image控件