Windows Phone笔记(4)图片操作
图片作为应用程序不可或缺,也是程序中最常见的元素之一,那么在Windows Phone中该如何使用它呢?这就是这篇文章需要解决的问题。在Silverlight支持两个格式的图片显示,它们是:JPEG和PNG,PNG使用的是无损压缩算法,可以准确重建原始位图;而JPEG使用的是一种有损压缩算法,这种算易做图对齐人们肉眼不易察觉到的一些可视信息这种压缩方式对照片这样的图像非常有效,但是却不适用于文本或基于矢量派生的位图,如建筑图和动画。
1.Image元素
在Silveright中,Image元素用来显示位图,但是Image元素并不是位图本身。现在我们通过一个简单是示例程序来学习如何在Windows Phone开发中如何使用Image元素。首先新建一个Silverlight for Windows Phone应用程序,在项目根目录下新建文件夹Images,在一张Silverlight支持格式的图片放到这个文件夹中,然后在页面中添加一个Image控件,最后将PhoneApplicationPage标记的SupportedOrientations属性值为PortraitOrLandscape,使程序能够支持横向显示。
下面是显示页面的MainPage.xaml代码:
<Image Name="image1" Source="Images/Superman.jpg"/>编译运行:
默认的情况,在保持正确的宽高比例的前提之下,Image元素会尽量放大或缩小以充满其容器(内容网格)。如果想要按原始像素尺寸显示图片的话,可以将Image的Stretch属性设置为None:
<Image Name="image1" Source="Images/Superman.jpg" Stretch="None" />运行效果如下:
2.通过Web获取图像
Image可以通过Web来获取图像,只需要将Image的Source属性设置为一个可用的URL即可,如下面的示例所示:
<Image Name="image1" Source="/2012/0308/20120308114351835.jpg" />运行效果如下:
这样Image元素就可以根据给定的URL从Web中下载图片并显示,这样就能够控制可执行文件的大小,但是考虑到Windows Phone设备并不总是与Web连接,并且在图片下载过程中还可能遇到其他的问题。为了处理这种情况,我们可以根据Image元素的两个事件:ImageFailed(出现错误后发生)和ImageOpened(下载成功后发生),根据这两个事件来判断下载是否成功,从而使程序根据不同的情况作出相应的选择。
3.Image和ImageSource
Image元素还有一些需要我们注意的地方,首先Image元素不是位图,它只是用来显示位图。从前面给出的示例,Image的Source属性被设置为一个相对文件路径或者一个可用URL,从表象上看,我们可以得出Source属性是字符串类型的结论,这并不正确。Source实际上是一个ImageSource类型,这是由于XAML语法隐藏了一些底层的是实现细节。 ImageSource是一个抽象类,派生了BitmapSource,BitmapSource类型是另一个抽象类,他定义了一个名为SetSource的方法,该方法可以通过Stream对象加载图像。派生自BitmapSource的BitmapImage支持一个可接收Uri对象的构造函数,包括一个Uri类型的UriSource属性。
-->>表示派生
ImageSource-->>BitmapSource(SetSource方法,通过Stream对象加载图像)-->>BitmapImage(Uri类型的UriSource属性)
让我们来观察下面的示例程序:
这是MainPage.xmal的代码,添加一个Image元素,且没有设置其Source属性。
<Image Name="image1"/>
这是Mainpage.xmal.cs的触摸事件处理程序:
protected override void OnManipulationStarted(ManipulationStartedEventArgs e)
{
Uri uri = new Uri("/2012/0308/20120308114351835.jpg");
BitmapImage bmp = new BitmapImage(uri);
this.image1.Source = bmp;
e.Complete();
e.Handled = true;
base.OnManipulationStarted(e);
}
程序运行,触摸屏幕后就会触发事件,把图片下载到本地显示出来。
我们也可以直接使用WebClient来操作位图,虽然这并不是通用的方法,但我们依然可以做到。
XMAL页面代码和上面的示例一致,这里就不在给出,这是后台处理程序代码:
protected override void OnManipulationStarted(ManipulationStartedEventArgs e)
{
WebClient webClient = new WebClient();
webClient.OpenReadCompleted += OnWebClientReadCompleted;//绑定事件
webClient.OpenReadAsync(new Uri("/2012/0308/20120308114351835.jpg"));
e.Complete();
e.Handled = true;//表示事件已处理
base.OnManipulationStarted(e);
}
private void OnWebClientReadCompleted(object sender, OpenReadCompletedEventArgs args)
{
if (!args.Cancelled && args.Error == null)
{
BitmapImage bmp = new BitmapImage();
bmp.SetSource(args.Result);//利用SetSource通过Stream对象创建位图
this.iamge1.Source = bmp;
}
}
4.本地位图加载
前面所有的示例程序中,位图都是作为资源(Resource)添加到项目中,并嵌入可执行文件中,这是最常见的做法。那么如何直接加载本地的位图呢?请看下面的这个示例程序。新建一个项目,包含一个Image元素,和一个Images文件夹,文件夹中存放一张图片。右击图片-->属性-->生成操作-->选择Resource。这是示例的运行效果是:运行程序后触摸屏幕,事件处理程序通过Application类定义的GetResourceStream访问资源。
MainPage.xaml:
<Image Name="image1"/>
MainPage.xmal.cs
protected override void OnManipulationStarted(ManipulationStartedEventArgs e)
{
Uri uri = new Uri("/SilverlightTapToDownload;component/Images/Superman.jpg",UriKind.Relative);//当生成操作为Resource时URL显得比较复杂
StreamResourceInfo resourceInfo = Application.GetResourceStream(uri);
BitmapImage bmp = new BitmapImage();
bmp.SetSource(resourceInfo.Stream);
this.image1.Source = bmp;
e.Complete();
e.Handled = true;
bas
补充:移动开发 , Windows Phone ,