zoukankan      html  css  js  c++  java
  • 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控件

    Stretch 状态类似于许多电视机上的图片大小设置。

    • None 显示原始大小的内容的原始分辨率。
    • Uniform 在保持纵横比和图像内容的同时填充尽可能多的空间。这可能会导致在视频的边缘出现水平和垂直黑色条。这类似于宽屏模式。
    • UniformToFill 在保持纵横比的同时填充整个空间。这可能会导致某些图像被裁剪。这类似于全屏模式。
    • Fill 填充整个空间,但不保持纵横比。 图像不会被裁剪,但可能会发生拉伸。这类似于拉伸模式。
  • 相关阅读:
    【西北师大-18软工】第七次作业成绩汇总
    【西北师大-18软工】第六次作业成绩汇总
    【西北师大-18软工】第五次作业成绩汇总
    【西北师大-18软工】第四次作业成绩汇总
    使用jQuery刷新页面
    jquery怎么判断浏览器是否是ie
    JavaScript如何生成随机字母数字字符串
    js如何引入css文件
    提高网站加载速度的提示和小技巧
    JavaScript 9 个功能强大的技巧
  • 原文地址:https://www.cnblogs.com/hushzhang/p/5911627.html
Copyright © 2011-2022 走看看