原文: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. POJ 2186 Popular Cows (强联通)

    id=2186">http://poj.org/problem? id=2186 Popular Cows Time Limit: 2000MS   Memory Limit: 655 ...

  2. 与众不同 windows phone (1) - Hello Windows Phone

    原文:与众不同 windows phone (1) - Hello Windows Phone [索引页] [源码下载] 与众不同 windows phone (1) - Hello Windows ...

  3. 使用Elasticsearch、Logstash、Kibana与Redis(作为缓冲区)对Nginx日志进行收集(转)

    摘要 使用Elasticsearch.Logstash.Kibana与Redis(作为缓冲区)对Nginx日志进行收集 版本 elasticsearch版本: elasticsearch-2.2.0 ...

  4. (Android) Download Images by AsyncTask API

    1. Check network status AndroidManifest.xml <uses-sdk> ... </> <uses-permission andro ...

  5. Swift - 开关按钮(UISwitch)的用法

    下面演示如何创建开关,以及监听它值的改变,代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 class ViewController: UIV ...

  6. linux 终端控制-- 多彩输出 格式排版

    linux 终端控制-- 多彩输出 格式排版 在unix/linux的终端下,怎么控制终端输出的颜色和格式呢,当然了有专门的工具,tput,但是能被terminal直接读懂的格式化字符串更通用. 先来 ...

  7. C#写的客户端连接 php的服务器端的小例子

    C#写的客户端连接 php的服务器端的小例子 php的server 端 <?php // server.php set_time_limit( 0 ); ob_implicit_flush(); ...

  8. Shell编程中Shift的用法(转)

    位置参数可以用shift命令左移.比如shift 3表示原来的$4现在变成$1,原来的$5现在变成$2等等,原来的$1.$2.$3丢弃,$0不移动.不带参数的shift命令相当于shift 1. 非常 ...

  9. net 面向接口框架

    Asp.net 面向接口框架之应用程序上下文作用域组件 在团队中推广面向接口开发两年左右,成果总体来说我还是挺满意的,使用面向接口开发的模块使用Unity容器配置的功能非常稳定,便于共享迁移(另一个项 ...

  10. C# 文件操作(全部) 追加、拷贝、删除、移动文件、创建目录 修改文件名、文件夹名

    原文:C# 文件操作(全部) 追加.拷贝.删除.移动文件.创建目录 修改文件名.文件夹名 本文也收集了目前最为常用的C#经典操作文件的方法,具体内容如下:C#追加.拷贝.删除.移动文件.创建目录.递归 ...