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 ...
随机推荐
- 自定义ALV控件的工具条按钮
*&---------------------------------------------------------------------* *& Report YTEST028 ...
- Qt之生成Window资源文件(.rc 文件)
简述 qmake 可以随意地自动生成一个适当填充的 Windows 资源文件.本节主要讲解如何用 qmake 处理一个 Windows 资源文件,并将其链接到一个可执行应用程序(EXE)或动态链接库( ...
- leetcode第一刷_Sqrt(x)
这道题乍看下来很easy,实际上要注意的问题许多. 注意看给出来的函数的接口,返回的是int值,也就是计算结果是个近似值.如何求呢?难道是从2開始往上算?直到某个值正好接近x?当然不行,肯定超时了.再 ...
- Swift编程语言学习9—— 存储属性和计算属性
属性将值跟特定的类.结构或枚举关联.存储属性存储常量或变量作为实例的一部分,计算属性计算(而不是存储)一个值.计算属性能够用于类.结构体和枚举里,存储属性仅仅能用于类和结构体. 存储属性和计算属性通经 ...
- WKE——Webkit精简的纯C接口的浏览器
以前不知道有这个东西 https://github.com/cexer/wke http://blog.csdn.net/weolar/article/details/50383491 http:// ...
- hnnu 11546 Sum of f(x) (求一个数的全部约数和)
代码: #include<cstdio> #include<cstring> #define N 200000 using namespace std; long long f ...
- RegisterHotKey注册热键,然后响应WM_HOTKEY消息
MSDN中的一个示例代码,步骤就是RegisterHotKey注册热键,然后响应WM_HOTKEY消息 @1:这个是系统热键 #include "stdafx.h" int _cd ...
- DOM - Element 对象
http://www.runoob.com/dom/dom-element.html Element 对象 Element 对象代表 XML 文档中的一个元素.元素可以包含属性.其他元素或文本.如果一 ...
- Linux内核源代码解析之TCP面向字节流
本文原创为freas_1990,转载请标明出处:http://blog.csdn.net/freas_1990/article/details/11264237 大家都知道TCP是面向stream,而 ...
- hdu2102(bfs)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2102 分析:bfs求最短时间到达'P'点,不过本题有好几个trick,我都踩到了,自己还是太嫩了... ...