如何使用WP Team'的MediaViewer类来显示150多个图像

本文关键字:显示 图像 MediaViewer WP 何使用 Team | 更新日期: 2023-09-27 18:19:09

我正在开发一个Windows Phone 8应用程序。它基本上是一个支持缩放的图像查看器。用户可以向左滑动&右键切换图像。我还想添加索引输入,这样用户就可以跳转到那个特定的图像。我在寻找& &;遇到了一个名为PhoneMediaViewer的NuGet包。还有一个MSDN样本叫做Basic Lens样本它使用了媒体查看器。我检查了代码&我不知道密码。任何请帮助我,我如何能显示本地150+图像缩放支持它的媒体查看器控制。

如何使用WP Team'的MediaViewer类来显示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流。