windows phone (20) Image元素

简介: 原文:windows phone (20) Image元素 之前有说道wp目前支持的图片格式为png和jpeg ,我们可以通过设置Source属性设置图片源,下面要说的是Iamge元素的部分属性,这就是Stretch,Opacity【作者:神舟龙】 Stretch属性 image的拉伸行为有...
原文: 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很炫,但是也不能随意使用,因为它会造成性能上的问题

 

 

 

目录
相关文章
|
存储 安全 前端开发
USB Image Tool:Windows下的直接写盘利器 【开源硬件佳软介绍 #2】
这个问题,我们从磁盘结构讲起。磁盘内部所有的存储区域,必然分为分区表和数据区域两大块。而数据区域按分区表分区后,每个分区还被文件系统封装和管理[注B]:
2279 1
USB Image Tool:Windows下的直接写盘利器 【开源硬件佳软介绍 #2】
|
Android开发 iOS开发 Windows
Windows Phone 寿终正寝了,这些经典机型你还记得吗?
不久前,随着最后一家WP手机厂商惠普宣布取消今后Windows Phone的研发计划,以及微软官方声明对WP8.1系统今后所有升级维护的终止,WP手机,作为曾经和安卓手机、苹果手机并驾齐驱的三大智能手机之一,正式寿终正寝。
1356 0
Windows Phone 寿终正寝了,这些经典机型你还记得吗?
|
XML 开发框架 前端开发
Windows Phone快速入门需掌握哪些能力
在此之前,先普及下Windows Phone的概念和开发工具的介绍。 Windows Phone是微软公司开发的手机操作系统,它将微软旗下的Xbox Live游戏、Xbox Music音乐与独特的视频体验集成至手机中。2012年6月21日,微软正式发布Windows Phone 8,采用和Windows 8相同的Windows NT内核,同时也针对市场的Windows Phone 7.5发布Windows Phone 7.8。
148 0
Windows Phone快速入门需掌握哪些能力
|
移动开发 Android开发 开发者
Windows Phone 8.1 新功能汇总 开发者预览版开放下载
在Build 2014大会上,微软正式发布了传闻已久的Windows Phone 8.1系统,所有的Windows Phone 8手机都可以升级,微软这次可谓是十分厚道。虽然并非迭代升级,但WP 8.1还是拥有很多重大更新,对于微软进一步完善移动平台拥有积极的意义。下面,就一起来了解一下WP 8.1的主要新特性。
244 0
Windows Phone 8.1 新功能汇总 开发者预览版开放下载
|
编解码 前端开发 JavaScript
Windows Phone 下开发 LBS 应用
基于位置的服务(Location Based Service,LBS),它是通过电信移动运营商的无线电通讯网络(如GSM网、CDMA网)或外部定位方式(如GPS)获取移动终端用户的位置信息(地理坐标,或大地坐标),在GIS(Geographic Information System,地理信息系统)平台的支持下,为用户提供相应服务的一种增值业务。
180 0
|
Windows
背水一战 Windows 10 (76) - 控件(控件基类): Control - 基础知识, 焦点相关, 运行时获取 ControlTemplate 和 DataTemplate 中的元素
原文:背水一战 Windows 10 (76) - 控件(控件基类): Control - 基础知识, 焦点相关, 运行时获取 ControlTemplate 和 DataTemplate 中的元素 [源码下载] 背水一战 Windows 10 (76) - 控件(控件基类): Control -...
1120 0