1. 程式人生 > >Image控件Stretch屬性

Image控件Stretch屬性

white num alignment 內容 ace HTAP 拉伸 分辨 圖片大小

通過設置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控件

Stretch 狀態類似於許多電視機上的圖片大小設置。

  • None 顯示原始大小的內容的原始分辨率。
  • Uniform 在保持縱橫比和圖像內容的同時填充盡可能多的空間。這可能會導致在視頻的邊緣出現水平和垂直黑色條。這類似於寬屏模式。
  • UniformToFill 在保持縱橫比的同時填充整個空間。這可能會導致某些圖像被裁剪。這類似於全屏模式。
  • Fill 填充整個空間,但不保持縱橫比。 圖像不會被裁剪,但可能會發生拉伸。這類似於拉伸模式。

技術分享圖片

Image控件Stretch屬性