如何使用WP Team'的MediaViewer类来显示150多个图像
本文关键字:显示 图像 MediaViewer WP 何使用 Team | 更新日期: 2023-09-27 18:19:09
我正在开发一个Windows Phone 8应用程序。它基本上是一个支持缩放的图像查看器。用户可以向左滑动&右键切换图像。我还想添加索引输入,这样用户就可以跳转到那个特定的图像。我在寻找& &;遇到了一个名为PhoneMediaViewer的NuGet包。还有一个MSDN样本叫做Basic Lens样本它使用了媒体查看器。我检查了代码&我不知道密码。任何请帮助我,我如何能显示本地150+图像缩放支持它的媒体查看器控制。
Windows Phone编程本身可能很困难,即使是新手教程也必须深刻理解新的async, await关键字。再一次,使用phone本地文件系统,即。IsolatedStorage会让你对Streams有一个很好的理解,. net通常会为你做得很好,但是在Windows Phone中,你肯定要自己处理这些任务。
要使用MediaViewer控件,您只需将Nuget包安装到您正在处理的项目中。然后,您将需要向MediaViewer controls Items属性提供一个IThumbnailedImage列表。nuget附带了两个实现这个接口的类,LocalFolderThumbnailedImage和MediaLibraryThumbnailedImage,其中第一个用于存储在手机上的本地图像,即。IsolatedStorage,后者用于媒体库中的图像项。要使用MediaLibraryThumbnailedImage类,请确保在WMAppManifest.xml文件中允许ID_CAP_MEDIALIB_PHOTO功能,否则在调用中不会返回相册。
然而,如果你想使用在线可用的图像,你将不得不实现另一个类。我把我的叫做onlinemediathumbnaileimage。
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Microsoft.Phone.Controls;
namespace MobileWin8Phone.ImageItem
{
class OnlineMediaThumbnailedImage : IThumbnailedImage
{
private Stream _stream;
private string _imageUrl;
/// <summary>
/// This class implements the IThumbnailedImage interface so that it can be
/// consumed by the MediaViewer control. Obtain the Stream of an image and
/// pass it in so that the MediaViewer control can call GetImage() when needed.
/// </summary>
/// <param name="theImageStream"></param>
/// <param name="imageUrl"></param>
public OnlineMediaThumbnailedImage(Stream theImageStream, string imageUrl = "")
{
_stream = theImageStream;
_imageUrl = imageUrl;
}
/// <summary>
/// Returns a Stream representing the thumbnail image.
/// </summary>
/// <returns>Stream of the thumbnail image.</returns>
public Stream GetThumbnailImage()
{
return this._stream;
}
/// <summary>
/// Returns a Stream representing the full resolution image.
/// </summary>
/// <returns>Stream of the full resolution image.</returns>
public Stream GetImage()
{
return this._stream;
}
/// <summary>
/// Represents the time the photo was taken, useful for sorting photos.
/// </summary>
public System.DateTime DateTaken
{
get
{
return System.DateTime.Today;
}
}
}
}
这个类的调用者负责获取他们想要显示的图像流。因为我们使用的是Windows Phone,所以所有调用都应该被标记为Async,这样它们就可以运行到完成,并允许UI线程尽快返回处理。下面是我用来放置MediaViewer控件的页面的示例代码。
protected override async void OnNavigatedTo(NavigationEventArgs e)
{
//Initialize Items
List<IThumbnailedImage> theImages = new List<IThumbnailedImage>();
mvControl.Items = new ObservableCollection<object>(theImages);
//Begin downloading images.
await LoadImages();
}
private async Task LoadImages()
{
try
{
await LoadFromOnlineMedia();
}
catch (Exception ex)
{
string pauseHere = "";
}
}
private async Task LoadFromOnlineMedia()
{
await DownloadImageFile("http://www.fnordware.com/superpng/pnggrad16rgb.png");
await DownloadImageFile("http://www.fnordware.com/superpng/pnggrad16rgba.png");
await DownloadImageFile("http://www.fnordware.com/superpng/pngtest16rgba.png");
}
private async Task DownloadImageFile(string imageUrl)
{
WebClient theClient = new WebClient();
theClient.OpenReadCompleted += new OpenReadCompletedEventHandler(client_OpenReadCompleted);
theClient.OpenReadAsync(new System.Uri(imageUrl));
}
void client_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e)
{
//Add Image to the Items collection via the UI Thread.
Dispatcher.BeginInvoke(() => { mvControl.Items.Add(new OnlineMediaThumbnailedImage(e.Result)); });
}
当页面被导航到我们输入OnNavigatedTo方法。这个方法被标记为async,这样我们就可以调用和等待它内部的其他异步方法。我们首先创建一个空List并初始化mvController。项目集合。这样做是可以的,因为我们仍然在主UI线程上。
接下来,我们等待加载图像的调用,这样它就可以离开并做它的事情,UI线程可以返回捕捉用户交互。LoadOnlineMedia方法使用WebClients从给定的URL读取图像流。回调用于此函数,因为这是Windows Phone编程,所有网络调用必须是异步的。如果省略await关键字,则异步方法将以同步方式运行,并且不会处理任何网络调用。
基本上你的回调方法将永远不会命中任何WebClient调用,如果你是从UI线程调用。
调用回调函数后,使用返回的Stream来构建一个OnlineMediaThumbnailedImage。我们使用Dispatcher调用BeginInvoke来将这个项目添加到Items集合中,因为对UI或UI集合所做的任何事情都必须在UI线程上完成。
Dispatcher自动返回UI线程来完成它的工作,不管它是从哪个线程调用的。一旦我们将项目添加到集合中,MediaViewer控件将使用虚拟化来决定何时加载图像。基本上,它加载前5个图像,并在它们进入范围后继续加载更多图像。当MediaViewer准备好加载图像时,它调用GetImage或GetThumbnailImage来返回要查看的图像流。如果您希望用自己的类覆盖IThumbnailImage,只需记住覆盖这些方法并以您认为合适的任何方式提供Image流。