windows phone7 下 Silverlight 异步读取网络图片

项目有这样的需求,

要求窗口加载一揽子图片,为了不让UI阻塞太久,采用异步读取后绑定显示的方案.

图片的下载应该采用并发的过程(等待网络响应会很耗时,一张一张的下载,等待时间太长)

图片的下载不能占用过多的线程数,应有个阀值(图片不是核心业务,不能占用那么多资源)

在图片加载的过程中,如果用户有操作,比如窗口跳转,则未加载完成的图片加载的过程应取消(为了替用户节省流量).

需求就是这么多了,如何实现呢?

思路是这样的,由于需要异步,且需要等待,首先想到使用队列,先让队列排列起来,再定量迭代读取.

因为要涉及异步的取消,想到了用WebClient对象的异步功能, 当然,所以发起异步请求之后的对象我都需要记录,

所以还需要一个list容器.

外部接口是两个参数,url,图片的网址,一个回调,定义了图片下载完成后的操作.

内部的核心流程,

1.将一个图片任务从队列中取出,

2.异步发生此请求,

3.将发起请求的对象放进容器,以备撤销时使用.

撤销的核心流程是.

1.让处理线程停止

2.取消队列中的任务,

3.让等待响应的任务取消.

需要用到以下命名空间:

using System;
using System.Collections.Generic;
using System.Net;
using System.Windows;
using Microsoft.Phone.Controls;
using System.Windows.Media.Imaging;
using System.IO;

using System.ComponentModel;
using System.Threading;

先声明两个回调

public delegate void GetDataStreamCallback(Stream stream);
public delegate void GetPicCallback(BitmapSource bimage);

第一个是从网络读取流的回调,第二个是生成了图片源之后的回调.

定义了一个接口:

/// <summary>
/// 可以撤销的操作
/// </summary>
interface IRevocable
{
void RevokeAsync();
event Action ProcessCompleted;
}

一个方法,是用来撤销操作的,

一个事件,是当异步完成时触发的.(不管是正常完成还是撤销,都视为操作完成)

做一个类继承该接口,用来获取网络数据

public class HttpResourceGet : IRevocable
{
public event GetDataStreamCallback OnDataStreamGenerated;
public event Action ProcessCompleted;
WebClient m_client;
public HttpResourceGet()
{
m_client = new WebClient();
m_client.OpenReadCompleted += ((send, ev) =>
{
do
{
if (ev.Error != null || ev.Cancelled)
{
break ;
}
if (OnDataStreamGenerated != null )
{
OnDataStreamGenerated(ev.Result);
ev.Result.Close();
}
} while ( false );

if (ProcessCompleted != null )
{
ProcessCompleted();
}
});
}

public void BeginGetData( string url)
{
m_client.OpenReadAsync( new Uri(url));
}

public void RevokeAsync()
{
m_client.CancelAsync();
}

}

再做一个类,把网络数据包装为图片源

public class HttpPicGet : IRevocable
{

public event GetPicCallback OnImageLoadCompleted;
public event Action ProcessCompleted;
HttpResourceGet m_httpGet;
public HttpPicGet()
{
m_httpGet = new HttpResourceGet();
m_httpGet.OnDataStreamGenerated += (stream =>
{
BitmapSource bi = new BitmapImage();
bi.SetSource(stream);
if (OnImageLoadCompleted != null )
{
OnImageLoadCompleted(bi);
}
});
m_httpGet.ProcessCompleted += (() =>
{
if (ProcessCompleted != null )
{
ProcessCompleted();
}
});
}

public void BeginLoadPic( string url)
{
m_httpGet.BeginGetData(url);
}


public void RevokeAsync()
{
m_httpGet.RevokeAsync();
}

}

做一个容器,用来处理多条任务

public class RevocableContainer
{
private class QueueItem
{
public GetPicCallback action;
public string url;
}

const int Threshold = 3 ;

AutoResetEvent m_event;
int m_count;
bool m_isThreadProcessing;
Queue < QueueItem > m_queue;
List < IRevocable > m_list;
object m_lock;
public RevocableContainer()
{
m_event = new AutoResetEvent( false );
m_queue = new Queue < QueueItem > ();
m_list = new List < IRevocable > ();
m_lock = new object ();
m_count = Threshold;
m_isThreadProcessing = false ;
}

void HttpRequestThread()
{
while ( true )
{
if (m_count == 0 )
{
m_event.WaitOne();
}
QueueItem item = null ;
// out from queue
lock (m_queue)
{
if ( ! m_isThreadProcessing)
{
break ;
}
if (m_queue.Count == 0 )
{
break ;
}

item = m_queue.Dequeue();
Interlocked.Decrement( ref m_count);

}

// do request
HttpPicGet pic = new HttpPicGet();
pic.OnImageLoadCompleted += (img =>
{
item.action(img);
});

pic.ProcessCompleted += (() =>
{
lock (m_list)
{
m_list.Remove(pic);
}
if (m_count == 0 )
{
m_event.Set();
}
Interlocked.Increment( ref m_count);
});
pic.BeginLoadPic(item.url);

// into list
lock (m_list)
{
m_list.Add(pic);
}

Thread.Sleep( 1 );
}
}


public void EnQueue( string url, GetPicCallback action)
{
QueueItem item = new QueueItem() { action = action, url = url };
BackgroundWorker worker = null ;
lock (m_queue)
{
m_queue.Enqueue(item);
if ( ! m_isThreadProcessing)
{
m_isThreadProcessing = true ;
worker = new BackgroundWorker();
}
}

if (worker != null )
{
worker.DoWork += ((send, ev) => HttpRequestThread());
worker.RunWorkerCompleted += ((send, ev) =>
{
lock (m_queue)
{
m_isThreadProcessing = false ;
}
});

worker.RunWorkerAsync();
}

}

public void CancelAll()
{

lock (m_queue)
{
m_isThreadProcessing = false ;
m_queue.Clear();
}
lock (m_list)
{
foreach (IRevocable item in m_list)
{
item.RevokeAsync();
}
}
}
}

做异步绑定需要的类

public class MyImage : INotifyPropertyChanged
{

public event PropertyChangedEventHandler PropertyChanged;
string m_url;
BitmapSource m_source;

public string URL
{
get { return m_url; }
set
{
if (m_url != value)
{
m_url = value;
OnPropertyChanged( new PropertyChangedEventArgs( " URL " ));
}
}
}

public BitmapSource Source
{
get { return m_source; }
set
{
if (m_source != value)
{
m_source = value;
OnPropertyChanged( new PropertyChangedEventArgs( " Source " ));
}
}
}

protected virtual void OnPropertyChanged(PropertyChangedEventArgs args)
{
if (PropertyChanged != null )
PropertyChanged( this , args);
}
}

业务的部分都做完了

接下来就是做一个例子来验证成果了

public partial class MainPage : PhoneApplicationPage
{
RevocableContainer m_container = new RevocableContainer();
// Constructor
public MainPage()
{
InitializeComponent();
}

private void DoClick( object sender, RoutedEventArgs e)
{

string [] sources = new string []
{
" http://gb.cri.cn/mmsource/images/2008/05/26/ei080526395.jpg " ,
" http://gb.cri.cn/mmsource/images/2008/05/26/ei080526396.jpg " ,
" http://gb.cri.cn/mmsource/images/2008/05/26/ei080526397.jpg " ,
" http://gb.cri.cn/mmsource/images/2008/05/26/ei080526398.jpg " ,
" http://gb.cri.cn/mmsource/images/2008/05/26/ei080526399.jpg " ,
" http://gb.cri.cn/mmsource/images/2008/05/26/ei080526400.jpg " ,
" http://gb.cri.cn/mmsource/images/2008/05/26/ei080526401.jpg " ,
" http://gb.cri.cn/mmsource/images/2008/05/26/ei080526402.jpg " ,
" http://gb.cri.cn/mmsource/images/2008/05/26/ei080526403.jpg " ,
" http://gb.cri.cn/mmsource/images/2008/05/26/ei080526404.jpg " ,
" http://gb.cri.cn/mmsource/images/2008/05/26/ei080526405.jpg " ,
" http://gb.cri.cn/mmsource/images/2008/05/26/ei080526406.jpg " ,
" http://gb.cri.cn/mmsource/images/2008/05/26/ei080526407.jpg " ,
" http://gb.cri.cn/mmsource/images/2008/05/26/ei080526408.jpg " ,
" http://gb.cri.cn/mmsource/images/2008/05/26/ei080526409.jpg " ,
" http://gb.cri.cn/mmsource/images/2008/05/26/ei080526410.jpg " ,
" http://gb.cri.cn/mmsource/images/2008/05/26/ei080526411.jpg " ,
" http://gb.cri.cn/mmsource/images/2008/05/26/ei080526412.jpg "
};


MyImage[] imgs = new MyImage[sources.Length];

for ( int i = 0 ; i < imgs.Length; ++ i)
{

imgs[i] = new MyImage();
MyImage imgItem = imgs[i];
imgItem.URL = sources[i] + " ?rand= " + Guid.NewGuid().ToString(); // 加Guid保证调试时无缓存
m_container.EnQueue(imgItem.URL, (bitsource => imgItem.Source = bitsource));
}

lbContent.DataContext = imgs;

}


private void RevokeClick( object sender, RoutedEventArgs e)
{
m_container.CancelAll();
}
}

XAML页面代码如下:

<!-- LayoutRoot is the root grid where all page content is placed -->
< Grid x:Name ="LayoutRoot" Background ="Transparent" >
< Grid.RowDefinitions >
< RowDefinition Height ="Auto" />
< RowDefinition Height ="*" />
</ Grid.RowDefinitions >

< ListBox Height ="670" x:Name ="lbContent" Grid.Row ="0" ItemsSource =" {Binding} " >
< ListBox.ItemTemplate >
< DataTemplate >
< StackPanel Orientation ="Horizontal" >
< Image Height ="100" Width ="100" Source =" {Binding Source, Mode=OneWay} " />
< TextBlock Text =" {Binding URL} " />
</ StackPanel >
</ DataTemplate >
</ ListBox.ItemTemplate >
</ ListBox >

<!-- ContentPanel - place additional content here -->
< Grid x:Name ="ContentPanel" Grid.Row ="1" VerticalAlignment ="Bottom" Margin ="12,0,12,0" >
< StackPanel Orientation ="Horizontal" >
< Button x:Name ="btnDo" Width ="100" Height ="100" Content ="DO" Click ="DoClick" />
< Button x:Name ="btnRevoke" Width ="100" Height ="100" Content ="Revoke" Click ="RevokeClick" />
</ StackPanel >
</ Grid >
</ Grid >

运行起来,达到需要所要求的效果

转载于:https://www.cnblogs.com/gibbon/archive/2011/04/08/2009704.html