天天看點

WPF自定義控件與樣式(12)-縮略圖ThumbnailImage /gif動畫圖/圖檔清單

一.前言

  申明:WPF自定義控件與樣式是一個系列文章,前後是有些關聯的,但大多是按照由簡到繁的順序逐漸釋出的等,若有不明白的地方可以參考本系列前面的文章,文末附有部分文章連結。

  本文主要針對WPF項目開發中圖檔的各種使用問題,經過總結,把一些經驗分享一下。内容包括: WPF常用圖像資料源ImageSource的建立; 自定義縮略圖控件ThumbnailImage,支援網絡圖檔、大圖檔、圖檔異步加載等特性; 動态圖檔gif播放控件; 圖檔清單樣式,支援大資料量的虛拟化;

二. WPF常用圖像資料源ImageSource的建立

  這是一個普通Image控件的使用,Source的資料類型是ImageSource,在XAML中可以使用檔案絕對路徑或相對路徑,ImageSource是一個抽象類,我們一般使用BitmapSource、BitmapImage等。

  但在實際項目中,有各種各樣的需求,比如:

從Bitmap建立ImageSource對象;

從資料流byte[]建立ImageSource對象;

從System.Drawing.Image建立ImageSource對象;

從一個大圖檔檔案建立一個指定大小的ImageSource對象;

2.1 從System.Drawing.Image建立指定大小ImageSource對象  

2.2 從一個大圖檔檔案建立一個指定大小的ImageSource對象  

2.3 從Bitmap建立指定大小的ImageSource對象  

2.4 從資料流byte[]建立指定大小的ImageSource對象  

三.自定義縮略圖控件ThumbnailImage

  ThumbnailImage控件的主要解決的問題:

WPF自定義控件與樣式(12)-縮略圖ThumbnailImage /gif動畫圖/圖檔清單

  為了能擴充支援多種類型的縮略圖,設計了一個簡單的模式,用VS自帶的工具生成的代碼視圖:

WPF自定義控件與樣式(12)-縮略圖ThumbnailImage /gif動畫圖/圖檔清單

3.1 多種類型的縮略圖擴充

  首先定義一個圖檔類型枚舉:  

  然後定義了一個接口,生成圖檔資料源ImageSource  

  如上面的代碼視圖,有三個實作,視訊縮略圖VedioThumbnailProvider沒有實作完成,基本方法是利用一個第三方工具ffmpeg來擷取第一幀圖像然後建立ImageSource。

  ImageThumbnailProvider:普通圖檔縮略圖實作(調用的2.2方法):

  WebImageThumbnailProvider:網絡圖檔縮略圖實作(下載下傳圖檔資料後調用2.1方法):  

  簡單工廠ThumbnailProviderFactory實作:  

3.2 縮略圖控件ThumbnailImage

  先看看效果圖吧,下面三張圖檔,圖1是本地圖檔,圖2是網絡圖檔,圖3也是網絡圖檔,為什麼沒顯示呢,這張圖檔用的是國外的圖檔連結位址,異步加載(加載比較慢,還沒出來的!)

WPF自定義控件與樣式(12)-縮略圖ThumbnailImage /gif動畫圖/圖檔清單

  ThumbnailImage實際是繼承在微軟的圖檔控件Image,是以沒有樣式代碼,繼承之後,主要的目的就是重寫Imagesource的處理過程,詳細代碼:

WPF自定義控件與樣式(12)-縮略圖ThumbnailImage /gif動畫圖/圖檔清單
WPF自定義控件與樣式(12)-縮略圖ThumbnailImage /gif動畫圖/圖檔清單

View Code

  其中異步用的線程池執行圖檔加載, Executer.TryRunByThreadPool是一個輔助方法,用于線上程池中執行一個委托方法。緩存的實作用的是另外一個輕量級記憶體緩存組建(使用微軟HttpRuntime.Cache的緩存機制),關于緩存的方案網上很多,這裡就不介紹了。

  示例代碼:  

四.動态圖檔gif播放控件

WPF自定義控件與樣式(12)-縮略圖ThumbnailImage /gif動畫圖/圖檔清單

實作代碼:  

WPF自定義控件與樣式(12)-縮略圖ThumbnailImage /gif動畫圖/圖檔清單
WPF自定義控件與樣式(12)-縮略圖ThumbnailImage /gif動畫圖/圖檔清單

五.圖檔清單樣式,支援大資料量的虛拟化

  先看看效果圖(gif圖,有點大):

WPF自定義控件與樣式(12)-縮略圖ThumbnailImage /gif動畫圖/圖檔清單

  用的是ListView作為清單容器,因為Listview支援靈活的擴充,為了實作上面的效果,集合容器ItemsPanel隻能使用WrapPanel,樣式本身并不複雜:  

  主要難道在于 WrapPanel是不支援虛拟化的,網上找了一個開源的WrapPanel虛拟化實作=VirtualizingWrapPanel,它有點小bug(滑動條長度計算有時候不是很準确),不過完全不影響使用,代碼:  

WPF自定義控件與樣式(12)-縮略圖ThumbnailImage /gif動畫圖/圖檔清單
WPF自定義控件與樣式(12)-縮略圖ThumbnailImage /gif動畫圖/圖檔清單

附錄:參考引用  

<a href="http://www.cnblogs.com/anding/p/4961215.html" target="_blank">WPF自定義控件與樣式(1)-矢量字型圖示(iconfont)</a>

<a href="http://www.cnblogs.com/anding/p/4968050.html" target="_blank">WPF自定義控件與樣式(2)-自定義按鈕FButton</a>

<a href="http://www.cnblogs.com/anding/p/4970845.html" target="_blank">WPF自定義控件與樣式(3)-TextBox &amp; RichTextBox &amp; PasswordBox樣式、水印、Label标簽、功能擴充</a>

<a href="http://www.cnblogs.com/anding/p/4976559.html" target="_blank">WPF自定義控件與樣式(4)-CheckBox/RadioButton自定義樣式</a>

<a href="http://www.cnblogs.com/anding/p/4979764.html">WPF自定義控件與樣式(5)-Calendar/DatePicker日期控件自定義樣式及擴充</a>

<a href="http://www.cnblogs.com/anding/p/4987426.html">WPF自定義控件與樣式(6)-ScrollViewer與ListBox自定義樣式</a>

<a href="http://www.cnblogs.com/anding/p/4990492.html">WPF自定義控件與樣式(7)-清單控件DataGrid與ListView自定義樣式</a>

<a href="http://www.cnblogs.com/anding/p/4993655.html" target="_blank">WPF自定義控件與樣式(8)-ComboBox與自定義多選控件MultComboBox</a>

<a href="http://www.cnblogs.com/anding/p/4996614.html" target="_blank">WPF自定義控件與樣式(9)-樹控件TreeView與菜單Menu-ContextMenu</a>

<a href="http://www.cnblogs.com/anding/p/5006279.html">WPF自定義控件與樣式(11)-等待/忙/正在加載狀态-控件實作</a>

個人能力有限,本文内容僅供學習、探讨,歡迎指正、交流。

繼續閱讀