原文:windows phone (20) Image元素

之前有说道wp目前支持的图片格式为png和jpeg ,我们可以通过设置Source属性设置图片源,下面要说的是Iamge元素的部分属性,这就是Stretch,Opacity【作者:神舟龙

Stretch属性

image的拉伸行为有此属性决定,此属性是一个枚举成员,有uniform,fill,uniformtofill,none;从网上找了一张图片进行测试 ,是jpg格式的,看看有什么不同吧;

xaml代码:

 <!--ContentPanel - 在此处放置其他内容-->        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">            <Image x:Name="img" Source="psuCACFGYVT.jpg" ></Image>        </Grid>

实现的效果:

此时属性:Stretch=“uniform”

说明:此时图片处于默认状态,图片会按照恰当的宽高比,同时拉伸到容器的大小,图片一般会水平或者垂直居中(这个取决于图片宽和高哪个长),uniform表示拉伸的程度上在横纵都相同,所以看不到图片有扭曲

xaml代码:

 <!--ContentPanel - 在此处放置其他内容-->        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">            <Image x:Name="img" Source="psuCACFGYVT.jpg" Stretch="Fill"  ></Image>        </Grid>

实现的效果:

此时属性:Stretch=“Fill”

说明:设置此属性值表示图片填充整个容器,纵横防线方向的拉伸不同

xaml代码:

 <!--ContentPanel - 在此处放置其他内容-->        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">            <Image x:Name="img" Source="psuCACFGYVT.jpg" Stretch="UniformToFill"  ></Image>        </Grid>

此时效果:

此时属性:Stretch="UniformToFill"

说明:设置此值表示在填充满容器的基础上,在纵横方向上保持了相同的拉伸程度,从而保证了宽高比;

xaml代码:

 <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">            <Image x:Name="img" Source="psuCACFGYVT.jpg" Stretch="None"  ></Image>        </Grid>

效果:

此时属性: Stretch="None"

说明:表示纵横都不拉伸


Opacity属性

此属性可以设置图片的透明度,可以设置0~1的值对透明度进行控制,0为最暗,1为图片原来亮度

xaml代码:

<!--ContentPanel - 在此处放置其他内容-->        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">            <Image x:Name="img" Source="psuCACFGYVT.jpg" VerticalAlignment="Top" Opacity="0.1" Height="260">                           </Image>            <Image x:Name="img1" Source="psuCACFGYVT.jpg" VerticalAlignment="Bottom" Opacity="0.9" />        </Grid>

效果:

可以看到这两个图片的对比,就是简单的透明度问题,此外你会发现,上面的图片设置了高度,其相应的宽度也按照高宽比进行了缩小;这个属性就是这个,比较有意思的是这个属性OpacityMask

OpacityMask属性

此属性是Brush类型对象, 可以设置元素的某一部分逐渐消失

xaml代码:

 <!--ContentPanel - 在此处放置其他内容-->        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">            <Image x:Name="img" Source="psuCACFGYVT.jpg"  VerticalAlignment="Top" Opacity="0.8" >                <Image.OpacityMask>                    <LinearGradientBrush>                        <GradientStop Color="Wheat" Offset="0"></GradientStop>                        <GradientStop Color="Wheat" Offset="0.5"></GradientStop>                        <GradientStop Color="Transparent" Offset="1"></GradientStop>                    </LinearGradientBrush>                </Image.OpacityMask>            </Image>                   </Grid>

效果:

非常炫,话说这种效果处理照片的时候会用到

倒影效果实现

xaml代码:

<!--ContentPanel - 在此处放置其他内容-->        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">            <Image x:Name="img1" VerticalAlignment="Top" Source="psuCACFGYVT.jpg"></Image>            <Image x:Name="img2" Source="psuCACFGYVT.jpg"  VerticalAlignment="Top" RenderTransformOrigin="0.5 1"   >                <Image.RenderTransform>                    <ScaleTransform ScaleY="-1"></ScaleTransform>                </Image.RenderTransform>                <Image.OpacityMask>                    <LinearGradientBrush StartPoint="0 0" EndPoint="0 1">                        <GradientStop Offset="0" Color="#00000000"></GradientStop>                        <GradientStop Offset="1" Color="#40000000"></GradientStop>                    </LinearGradientBrush>                </Image.OpacityMask>            </Image>        </Grid> 

实现的效果:

从上面代码中可以看到,我们设置了两个图片,其位置完全相同,然后我们在第二张图片中重新定义了旋转中心RenderTransformOrigin="0.5 1",此点位置在第一张图片的底部位置,然后使用缩放属性ScaleY="-1" 这样就使图片发生了旋转,然后再在Y轴上从0到1设置逐渐消失的效果;虽然使用OpacityMask很炫,但是也不能随意使用,因为它会造成性能上的问题

windows phone (20) Image元素的更多相关文章

  1. windows phone (23) ScrollViewer元素

    原文:windows phone (23) ScrollViewer元素 ScrollViewer类表示可包含其他可见元素的可滚动区域,一般会用在屏幕的宽度和高度不够用时,作为一种延伸使用,参考书上称 ...

  2. 背水一战 Windows 10 (20) - 绑定: DataContextChanged, UpdateSourceTrigger, 对绑定的数据做自定义转换

    [源码下载] 背水一战 Windows 10 (20) - 绑定: DataContextChanged, UpdateSourceTrigger, 对绑定的数据做自定义转换 作者:webabcd 介 ...

  3. 不可或缺 Windows Native (20) - C++: 友元函数, 友元类

    [源码下载] 不可或缺 Windows Native (20) - C++: 友元函数, 友元类 作者:webabcd 介绍不可或缺 Windows Native 之 C++ 友元函数 友元类 示例演 ...

  4. 与众不同 windows phone (20) - Device(设备)之位置服务(GPS 定位), FM 收音机, 麦克风, 震动器

    原文:与众不同 windows phone (20) - Device(设备)之位置服务(GPS 定位), FM 收音机, 麦克风, 震动器 [索引页][源码下载] 与众不同 windows phon ...

  5. windows phone (25) Canvas元素B

    原文:windows phone (25) Canvas元素B  ZIndex 这也是一个附加属性,表示canvas的children集合内的子元素的显示顺序,在canvas中的元素默认情况下是后面的 ...

  6. windows phone (18) Border元素

    原文:windows phone (18) Border元素 Border类是对某一个对象的周围边框,背景,或者同时绘制两者,首先看一个简单的例子进行分析[作者:神舟龍] xaml文件: <!- ...

  7. windows phone (21) Grid元素的Background和Clip

    原文:windows phone (21) Grid元素的Background和Clip Grid是唯一可以在内部定制单元格的panel类,我们可以在grid中定制单元格,然后通过grid.row和g ...

  8. windows phone (22) 隐藏元素

    原文:windows phone (22) 隐藏元素 在wp中我们也会用到隐藏某个元素,已达到某种效果,刚刚从文章看到了,分享一下[作者:神舟龙] Visibility 此属性能非常方便的实现隐藏某个 ...

  9. windows phone (24) Canvas元素A

    原文:windows phone (24) Canvas元素A Canvas元素表示定制一个区域,并可以通过相对坐标定义子元素位置,在一下情况下Canvas是不可见的 Height 属性等于 0. W ...

随机推荐

  1. Swift - 浮点数转换成整数(四舍五入与直接截断)

    1,直接截去小数部分转换成整数 使用强制转换会将浮点部分去除,把整数部分转换为整数. 1 var i = Int(23.50) //23 2,四舍五入转换成整数 lroundf是一个全局函数,作用是将 ...

  2. ios添加pre和post build action

    再vs中,我们可以很方便的再build前.后执行一些脚本为我们做点什么事情.再ios中怎么搞呢,哪必然是对xcode进行操作了.再google搜索了一把,有说操作Scheme的也有说再直接再targe ...

  3. HADOOP之MAPREDUCE程序应用二

    摘要:MapReduce程序进行单词计数. 关键词:MapReduce程序  单词计数 数据源:人工构造英文文档file1.txt,file2.txt. file1.txt 内容 Hello   Ha ...

  4. arch Failed to load module "intel"

    arch启动x的时候出现问题困扰我一天了,终于解决掉了. 错误如下: [ 61.086] (II) LoadModule: "intel" [ 61.087] (WW) Warni ...

  5. 旧发票要保留SIRET等信息,或者整个PDF

    查看旧发票时,每次都实时生成发票是不行的,因为公司的SIRET居然会是变的!!

  6. 理解Spring的Bean工厂

    一提到工厂,我们先来回顾前面学习过的工厂方法和抽象工厂模式: 工厂方法:针对产品维度,能够产生新的产品,也能够产生新的产品工厂,既能够扩展产品维度.可是假设我们想在普通工厂上生产产品系列,就会特别麻烦 ...

  7. 专注UI——有用技术:模糊搜索

    在如今的项目中.须要做模糊搜索,在曾经技术的基础上非常快得完毕了第一版.大家先看看第一版的效果,我们一会做评论: 0基础: 我们可能部分源代码(附件中会有所有源代码) <span style=& ...

  8. JAVA - 优雅的记录日志(log4j实战篇) (转)

    写在前面 项目开发中,记录错误日志有以下好处: 方便调试 便于发现系统运行过程中的错误 存储业务数据,便于后期分析 在java中,记录日志有很多种方式: 自己实现 自己写类,将日志数据,以io操作方式 ...

  9. OCP读书笔记(16) - 管理资源

    使用者组 创建资源用户组OLTP_GRP,将用户HR,OE加入此组: BEGIN dbms_resource_manager.clear_pending_area(); dbms_resource_m ...

  10. 在Windows如何解决下Cocos2d-x示例代码TestCpp我找不到lib问题库文件

    遇到此问题,首先确定失踪的库文件,然后找到文件夹,库文件. 在编制Cocos2d-x在TestCpp工程,提示缺少lib文件,共同拥有下面2种可靠解决方式: 1.在Cocos2d-x的根文件夹Debu ...