Windows phone 之Image控件
wp目前支持的图片格式为png和jpeg ,我们可以通过设置Source属性设置图片源.
还有两个属性是:Stretch,Opacity
Stretch属性
image的拉伸行为有此属性决定,此属性是一个枚举成员,有uniform,fill,uniformtofill,none;
(1)
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <Image x:Name="img" Source="psuCACFGYVT.jpg" ></Image> </Grid>
此时属性:Stretch=“uniform”
说明:此时图片处于默认状态,图片会按照恰当的宽高比,同时拉伸到容器的大小,图片一般会水平或者垂直居中(这个取决于图片宽和高哪个长,同比例拉伸),uniform表示拉伸的程度上在横纵都相同,所以看不到图片有扭曲。
(2)
<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”
说明:设置此属性值表示图片填充整个容器(拉伸比例不同),纵横防线方向的拉伸不同。
(3)
<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"
说明:设置此值表示在填充满容器的基础上,在纵横方向上保持了相同的拉伸程度,从而保证了宽高比;
(4)
<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为图片原来亮度。
<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类型对象, 可以设置元素的某一部分逐渐消失。
<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>
非常炫,话说这种效果处理照片的时候会用到。
倒影效果实现。
<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 之Image控件的更多相关文章
- [深入浅出Windows 10]分屏控件(SplitView)
4.18 分屏控件(SplitView) 分屏控件(SplitView)是Windows 10新增的控件类型,也是Windows 10通用应用程序主推的交互控件,通常和一个汉堡按钮搭配作为一种抽屉式菜 ...
- 深入Windows窗体原理及控件重绘技巧
之前有学MFC的同学告诉我觉得Windows的控件重绘难以理解,就算重绘成功了还是有些地方不明白,我觉得可能很多人都有这样的问题,在这里我从Windows窗体的最基本原理来讲解,如果你有类似的疑惑希望 ...
- Windows phone 自定义用户控件(UserControl)——ColorPicker
编码前 学习Windows phone自定义用户控件,在<WPF编程宝典>学习的小例子.并根据windows phone稍微的不同,做了点修改.ColorPicker(颜色拾取器):拥有三 ...
- Windows Phone - 按钮/button 控件
System.Windows.Controls.Button button控件一.button控件的各种样式的展示可以通过 …… 来给控件定义公共的样式调用样式的方法:在Button控件上添加样式 ...
- windows下注册ocx控件
OCX 是对象类别扩充组件(Object Linking and Embedding (OLE) Control Extension):是可执行的文件的一种,但不可直接被执行: 是 ocx 控件的扩展 ...
- Windows高DPI系列控件(二) - 柱状图
目录 一.QCP 二.效果展示 三.高DPI适配 1.自定义柱状图 2.新的柱状图 3.测试代码 四.相关文章 原文链接:Windows高DPI系列控件(二) - 柱状图 一.QCP QCP全称QCu ...
- 【Windows编程】系列第二篇:Windows SDK创建基本控件
在Win32 SDK环境下,怎么来创建常用的那些基本控件呢?我们知道如果用MFC,简单的拖放即可完成大多数控件的创建,但是我们既然是用Windows SDK API编程,当然是从根上解决这个问题,实际 ...
- Windows Phone 四、控件模版
控件模版的概念 Windows Phone中每一个控件都有一个默认的模版,用于描述控件的内部组成结构和外观样式 相对于原本的样式外观操作,自定义模版的可自定义性更强 最基本的重写控件模版 <Gr ...
- Windows 8.1 新增控件之 Hyperlink
Hyperlink 控件应该不用过多介绍大家肯定十分清楚其作用,它的功能就像HTML中的<a href="">标签一样,只不过是在XAML中实现. 使用Hyperlin ...
- Windows 8.1 新增控件之 TimePicker
之前已经为大家介绍过DatePicker 控件的相关内容,有日期控件当然就得有时间控件,本篇将和各位一起了解TimePicker 的使用方法. 先来介绍一下ClockIdentifier 属性,默认情 ...
随机推荐
- 3 视频里weekend05、06、07的可靠性 + HA原理、分析、机制 + weekend01、02、03、04、05、06、07的分布式集群搭建
现在,我们来验证分析下,zookeeper集群的可靠性 现在有weekend05.06.07 将其一个关掉, 分析,这3个zookeeper集群里,杀死了weekend06,还存活weekend05. ...
- [Python]网络爬虫(二):利用urllib2通过指定的URL抓取网页内容
版本号:Python2.7.5,Python3改动较大. 所谓网页抓取,就是把URL地址中指定的网络资源从网络流中读取出来,保存到本地. 类似于使用程序模拟IE浏览器的功能,把URL作为HTTP请求的 ...
- coco2dx 精灵类
CCSize size = CCDirector::sharedDirector()->getWinSize(); CCSprite *bg = CCSprite::create("H ...
- hdoj 5461 Largest Point
Largest Point Time Limit: 1500/1000 MS (Java/Others) Memory Limit: 65535/32768 K (Java/Others)Tot ...
- spring官方文档中文版
转 http://blog.csdn.net/tangtong1/article/details/51326887 spring官方文档:http://docs.spring.io/spring/do ...
- Node调试工具JSHint
Node调试工具JSHint的安装及配置教程 作者: 字体:[增加 减小] 类型:转载 时间:2014-05-27我要评论 Node的优势我就不再乱吹捧了,它让javascript统一web的前后台成 ...
- JavaEE SSH框架整合(三) struts2 异常、http错误状态码处理
struts2的action可能出现訪问不到,或action报异常等情况,所以须要作一些处理,给用户一个友好的印象. 1. 异常处理 result声明在action中 <action name ...
- oracle7
管理初始化参数 管理初始化参数(调优的一个重要知识点,凭什么可以对数据库进行调优呢?是因为它可以对数据库的一些参数进行修改修正) 初始化参数用于设置实例或是数据库的特征.oracle9i提供了200多 ...
- trace openjdk from systemtap
here are several different tactics to trace openjdk from systemtap. The first relies on sys/sdt.h dt ...
- android开发的学习路线
参考资料:千锋3G学院--课程大纲 http://www.mobiletrain.org 看了专业的培训机构的课程大纲,才知道,自己学习android的路途才刚刚开始!特此整理分享一下,希望能帮 ...