WPF界面設計技巧（5）—自定義清單項呈現内容

接續上次的程式，稍微改動一下原有樣式，并添加一個資料模闆，我們就可以達成下面這樣的顯示功能：

滑鼠懸停于檔案清單項上，會在工具提示中顯示圖像縮略圖及檔案名、檔案大小資訊。

選中一個清單項，該清單項會擴大，并動态顯示出一個小縮略圖及檔案的所在路徑。

代碼如下：

Code

下面逐漸講解一下代碼。

首先需要引入一個命名空間，就是 FileInfo 類所在的 System.IO 命名空間，我們将它的别名定義為“c”。

DataTemplate 标記是為界面中出現的資料類型定義的顯示模闆，如果不指定 x:Key 的話，那麼界面上不管何處出現此類型的對象，都會轉為這樣的顯示方式。

WrapPanel 是一種簡單的容器元素，它會把它裡面的所有元素都橫着排列，排不下了就換一行接着排，這類似網頁的預設布局模式，很容易掌握。

WrapPanel.ToolTip 内定義的就是工具提示裡的那個縮略圖和文字了，其他代碼都很簡單就不多說了。

很多人覺得工具提示裡可以放圖檔是一件很神奇的事，的确很讓人驚喜，但是其實WPF元素的内容格式基本都是 Object 類型的，也就是說，你可以放一切你能想到的東西進去！按鈕、視訊、文檔乃至3D模型，都可以哦。

我們來看觸發器，這個觸發器定義的 Height 是誰的屬性呢？記得以前我們自定義樣式時怎麼顯示元素的内容嗎？對，ContentPresenter，這就是所有内容的總容器。

為什麼要在 ContentPresenter 高度為 68 的時候觸發動畫呢？這其實我是使了個歪點子～我沒找到資料内容相應上層元素屬性變化的方法，是以就用 ContentPresenter 高度變化與這邊産生關聯，進而間接響應 ListBox 那邊的 IsSelected 屬性變化。

動畫的内容就是把先前隐藏的圖檔和一行文字顯示并放大出來，沒什麼難點的。

行了，代碼部分講解完了，我們來談談如何完善這個程式。

這程式模樣不錯，但是有幾點很不爽：

1 顯示檔案的大小的機關是位元組，這讓人很暈。

2 選擇了非圖檔檔案不會顯示任何提示，隻是圖檔處空了。

3 FileInfo對象的内容在背景被更改不會及時反映到界面上。

對應的解決辦法：

1 采用自定義類，擷取必要的 FileInfo 對象的部分屬性值，定義專門用于以其它機關顯示檔案大小的屬性。

2 還是采用自定義類，擷取 FileInfo 對象的擴充名屬性，将之賦予自定義的一個依賴屬性上，依賴屬性可以被觸發器 Trigger 識别，這樣我們就可以依據擴充名來顯示不同的布局結構，并控制元素的隐現，比如選中視訊檔案可以播放視訊預覽，而選中一個普通檔案隻會顯示一種替代圖示。

3 依然是自定義類，隻有實作 INotifyPropertyChanged 接口的類型才可以提供更改通知，以維護雙向實時綁定。

WPF是個大舞台，我們可以做的還有很多。

<a href="http://files.cnblogs.com/SkyD/WPFListBox2.rar">源代碼下載下傳</a>

本文轉自斯克迪亞部落格園部落格，原文連結：http://www.cnblogs.com/SkyD/archive/2008/07/17/1245103.html，如需轉載請自行聯系原作者