Sliverlight中图片使用的总结
图片在Sl开发中可能是用的最多的资源了,我感觉视频,字体资源的使用与其如出一辄,这里主要把它几点应用简单的整理一下。
路径引用
这是个首当其冲的话题,Sl对图片的支持主要有资源方式,相对路径与绝对路径方式这些方式。
资源方式:
当图片复制于客户端目录下面时,其BulidAction属性会默认为Resource。
<Image Source="images/Tulips.jpg"/>
资源方式的路径还有一种写法, 如果你从设计器的属性窗口设置其图片Source时,会默认为
<Image Source="/ImageSummarize;component/images/Tulips.jpg"/>
C#代码写成
this.image1.Source = new BitmapImage(new Uri("/ImageSummarize;component/images/Tulips.jpg", UriKind.Relative));
第2种方式是直接从程序集中获取信息的,以资源方式生成的xap包中是没有Tulips.jpg这个文件的,因为其已经编译到程序集中了,可以
用Reflector查看。
相对路径:
如果你把图片的BulidAction改为Content时,继续用上面的代码浏览页面看不到图片的
<Image Source="/images/Tulips.jpg"/>
你需要以/表示当前路径,如果解压以这种方式编译的xap包时,会看到有Tulips.jpg这个文件,
绝对路径就更简单了,就是服务器上的位置(即图片在Web端目录下)
<Image Source="http://localhost:49185/Tulips.jpg" />
理论上三种方式都可以用,但是实际要根据xap包大小或者其它因素进行取舍
Effective 特效
Sl中对图片的操作可谓多姿多彩,这里主要说明一下使用模糊和阴影两种效果
模糊效果主要是运用了Radius效果
<Image Height="150" HorizontalAlignment="Left" Margin="120,62,0,0" Name="image1"Stretch="Fill" VerticalAlignment="Top" Width="200"Source="http://localhost:49185/Tulips.jpg"><Image.Effect><BlurEffect Radius="10"></BlurEffect></Image.Effect></Image>
Radius值越大,图片越模糊
阴影效果
<Image Height="150" HorizontalAlignment="Left" Margin="120,62,0,0"Name="image1" Stretch="Fill" VerticalAlignment="Top"Width="200" Source="http://localhost:49185/Tulips.jpg"><Image.Effect><DropShadowEffect BlurRadius="30"Opacity="1"ShadowDepth="0"Color="Blue"></DropShadowEffect></Image.Effect></Image>
看看效果图:
阴影效果常用属性包括Color,BlurRadius,Direction,Opcaity,ShadowDepth,具体的可以查看API,事实上对于图片的处理远远超越
了我的想象,就不深谈了。
获取图片:
这个在我的其它笔记中已经总结过了,可以参考一下读取图片这篇文章。