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
此属性是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元素的更多相关文章
- windows phone (23) ScrollViewer元素
原文:windows phone (23) ScrollViewer元素 ScrollViewer类表示可包含其他可见元素的可滚动区域,一般会用在屏幕的宽度和高度不够用时,作为一种延伸使用,参考书上称 ...
- 背水一战 Windows 10 (20) - 绑定: DataContextChanged, UpdateSourceTrigger, 对绑定的数据做自定义转换
[源码下载] 背水一战 Windows 10 (20) - 绑定: DataContextChanged, UpdateSourceTrigger, 对绑定的数据做自定义转换 作者:webabcd 介 ...
- 不可或缺 Windows Native (20) - C++: 友元函数, 友元类
[源码下载] 不可或缺 Windows Native (20) - C++: 友元函数, 友元类 作者:webabcd 介绍不可或缺 Windows Native 之 C++ 友元函数 友元类 示例演 ...
- 与众不同 windows phone (20) - Device(设备)之位置服务(GPS 定位), FM 收音机, 麦克风, 震动器
原文:与众不同 windows phone (20) - Device(设备)之位置服务(GPS 定位), FM 收音机, 麦克风, 震动器 [索引页][源码下载] 与众不同 windows phon ...
- windows phone (25) Canvas元素B
原文:windows phone (25) Canvas元素B ZIndex 这也是一个附加属性,表示canvas的children集合内的子元素的显示顺序,在canvas中的元素默认情况下是后面的 ...
- windows phone (18) Border元素
原文:windows phone (18) Border元素 Border类是对某一个对象的周围边框,背景,或者同时绘制两者,首先看一个简单的例子进行分析[作者:神舟龍] xaml文件: <!- ...
- windows phone (21) Grid元素的Background和Clip
原文:windows phone (21) Grid元素的Background和Clip Grid是唯一可以在内部定制单元格的panel类,我们可以在grid中定制单元格,然后通过grid.row和g ...
- windows phone (22) 隐藏元素
原文:windows phone (22) 隐藏元素 在wp中我们也会用到隐藏某个元素,已达到某种效果,刚刚从文章看到了,分享一下[作者:神舟龙] Visibility 此属性能非常方便的实现隐藏某个 ...
- windows phone (24) Canvas元素A
原文:windows phone (24) Canvas元素A Canvas元素表示定制一个区域,并可以通过相对坐标定义子元素位置,在一下情况下Canvas是不可见的 Height 属性等于 0. W ...
随机推荐
- POJ 2186 Popular Cows (强联通)
id=2186">http://poj.org/problem? id=2186 Popular Cows Time Limit: 2000MS Memory Limit: 655 ...
- 与众不同 windows phone (1) - Hello Windows Phone
原文:与众不同 windows phone (1) - Hello Windows Phone [索引页] [源码下载] 与众不同 windows phone (1) - Hello Windows ...
- 使用Elasticsearch、Logstash、Kibana与Redis(作为缓冲区)对Nginx日志进行收集(转)
摘要 使用Elasticsearch.Logstash.Kibana与Redis(作为缓冲区)对Nginx日志进行收集 版本 elasticsearch版本: elasticsearch-2.2.0 ...
- (Android) Download Images by AsyncTask API
1. Check network status AndroidManifest.xml <uses-sdk> ... </> <uses-permission andro ...
- Swift - 开关按钮(UISwitch)的用法
下面演示如何创建开关,以及监听它值的改变,代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 class ViewController: UIV ...
- linux 终端控制-- 多彩输出 格式排版
linux 终端控制-- 多彩输出 格式排版 在unix/linux的终端下,怎么控制终端输出的颜色和格式呢,当然了有专门的工具,tput,但是能被terminal直接读懂的格式化字符串更通用. 先来 ...
- C#写的客户端连接 php的服务器端的小例子
C#写的客户端连接 php的服务器端的小例子 php的server 端 <?php // server.php set_time_limit( 0 ); ob_implicit_flush(); ...
- Shell编程中Shift的用法(转)
位置参数可以用shift命令左移.比如shift 3表示原来的$4现在变成$1,原来的$5现在变成$2等等,原来的$1.$2.$3丢弃,$0不移动.不带参数的shift命令相当于shift 1. 非常 ...
- net 面向接口框架
Asp.net 面向接口框架之应用程序上下文作用域组件 在团队中推广面向接口开发两年左右,成果总体来说我还是挺满意的,使用面向接口开发的模块使用Unity容器配置的功能非常稳定,便于共享迁移(另一个项 ...
- C# 文件操作(全部) 追加、拷贝、删除、移动文件、创建目录 修改文件名、文件夹名
原文:C# 文件操作(全部) 追加.拷贝.删除.移动文件.创建目录 修改文件名.文件夹名 本文也收集了目前最为常用的C#经典操作文件的方法,具体内容如下:C#追加.拷贝.删除.移动文件.创建目录.递归 ...