原文: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. 自定义ALV控件的工具条按钮

    *&---------------------------------------------------------------------* *& Report YTEST028 ...

  2. Qt之生成Window资源文件(.rc 文件)

    简述 qmake 可以随意地自动生成一个适当填充的 Windows 资源文件.本节主要讲解如何用 qmake 处理一个 Windows 资源文件,并将其链接到一个可执行应用程序(EXE)或动态链接库( ...

  3. leetcode第一刷_Sqrt(x)

    这道题乍看下来很easy,实际上要注意的问题许多. 注意看给出来的函数的接口,返回的是int值,也就是计算结果是个近似值.如何求呢?难道是从2開始往上算?直到某个值正好接近x?当然不行,肯定超时了.再 ...

  4. Swift编程语言学习9—— 存储属性和计算属性

    属性将值跟特定的类.结构或枚举关联.存储属性存储常量或变量作为实例的一部分,计算属性计算(而不是存储)一个值.计算属性能够用于类.结构体和枚举里,存储属性仅仅能用于类和结构体. 存储属性和计算属性通经 ...

  5. WKE——Webkit精简的纯C接口的浏览器

    以前不知道有这个东西 https://github.com/cexer/wke http://blog.csdn.net/weolar/article/details/50383491 http:// ...

  6. hnnu 11546 Sum of f(x) (求一个数的全部约数和)

    代码: #include<cstdio> #include<cstring> #define N 200000 using namespace std; long long f ...

  7. RegisterHotKey注册热键,然后响应WM_HOTKEY消息

    MSDN中的一个示例代码,步骤就是RegisterHotKey注册热键,然后响应WM_HOTKEY消息 @1:这个是系统热键 #include "stdafx.h" int _cd ...

  8. DOM - Element 对象

    http://www.runoob.com/dom/dom-element.html Element 对象 Element 对象代表 XML 文档中的一个元素.元素可以包含属性.其他元素或文本.如果一 ...

  9. Linux内核源代码解析之TCP面向字节流

    本文原创为freas_1990,转载请标明出处:http://blog.csdn.net/freas_1990/article/details/11264237 大家都知道TCP是面向stream,而 ...

  10. hdu2102(bfs)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2102 分析:bfs求最短时间到达'P'点,不过本题有好几个trick,我都踩到了,自己还是太嫩了... ...