【全面解禁!真正的Expression Blend實戰開發技巧】第六章 認識ListBox

反反複複考慮後，準備把這一章的切入點瞄準ListBox。并用了一個看起來有點别扭的标題“認識ListBox"，許多人看到這裡就不愛看了，即使是大學裡用winform的學生也會說ListBox我看他好幾年了。但我想說，在實際項目開發中，界面元素除了Button,另一個使用率最高的就是ListBox，你認識ListBox，但未必認識下面幾種特殊的ListBox，也未必知道如何最快速建構這樣特殊的ListBox，這背後還涉及了blend獨有的很重要的一個元素的用法，sampledatasource!有興趣了嗎？好，請看下圖。

　　　　

　　在我做過的項目中很多都用到了圖2和3的表達方式，比如下圖中就是用了圖3的布局：

　　國内某個非常著名的公司有一款siverlight産品，也用到了上圖中的布局效果。一次交流中我給他們的開發人員看了我做的一個demo,然後他問我：“你這個布局用的是什麼控件啊？stackpanel? wrappanel? grid? ” ，當我跟他說是ListBox時他很意外。他告訴我他們産品中，使用grid實作這個效果, 要用code動态生成grid的行與列，把元素一個一個的加進去，由于grid不自帶滾動條，是以他們還要用code控制滾動條。如此這般麻煩下才實作了上圖中的效果。我聽後非常無語，也非常欽佩他們的耐心。其實，實作上面的效果隻要30秒。兄弟們，打開Blend，跟我一起做。

　　

　　打開Data面闆，點選Create a sample data按鈕，在彈出菜單中選擇第一項，new sample data...。

　　在彈出菜單中直接點選OK

　　然後blend會自動生成一個sampleDataSource,他下面緊跟一個名為Collection的集合，集合中包含兩個屬性Property1，Property2，點選Property1最右側的按鈕，在彈出框中将Type類型選擇為Image。如下圖所示：

　　然後點選上圖中的Browse...按鈕，浏覽一個預先準備好圖檔的檔案夾。然後點選OK。我電腦中的位置是“e:圖檔檔案夾”

　　下一步，請直接将Property1拖拽到畫布上，blend會自動生成一個ListBox。并用剛才浏覽的圖檔内容，填充ListBox。

　　這樣我們得到了一個預設樣式的ListBox，他就像我們常見的ListBox一樣，自上而下排列内容。下一步，為了讓他變得特殊一點，請右擊ListBox，在彈出菜單中選擇Edit Additional Templates -> Edit Layout Of Items ->Create Empty。

　　在彈出對話框中，為你的Template取一個名字，然後點選OK按鈕。

　　然後你會發現,Objects and timeline面闆自動切換到了Template編輯模式。如下圖：

　　在右側屬性面闆中，找到StackPanel的Orientation屬性，我們看到該屬性預設值為vertical，也就是說自上而下排列的，請把它修改為horizontal。

　　在Objects and timeline面闆中，點選下圖中最左的“”按鈕傳回主界面編輯模式。

　　這樣一個水準方向，從左向右排列的ListBox便制作完畢了。

　　下一步我們來實作圖3中的另外一種效果，可以自動換行的ListBox。首先右擊ListBox，在彈出菜單中選擇Edit Additional Templates -> Edit Layout Of Items ->Edit Current 　　　　　　　　　　　　　　　　

　　　　　　

　　将模闆中的StackPanel替換為WrapPanel。(替換方法為：先删除StackPanel，然後點選工具條上的按鈕，在搜尋欄中輸入wrappanel,稍等1分鐘左右，blend才會搜尋到wrappanel。如果按照上面步驟依然無法找到wrappanel,請确認電腦中是否安裝了Microsoft Silverlight 4 Toolkit April 2010)

　　　　　　　　　　

　　接下來得到下圖中的效果，做到這一步大家可能會有疑問，怎麼ListBox一點效果也沒有變化呢？

　　别着急，這是因為wrapPanle的特性是當wrapPanle的寬度不夠容下所有子Item時才會換行排列其餘的Item。是以我們下一步需要禁用ListBox的水準滾動條，讓他内部的wrapPanle沒有延展的空間。請點選ListBox,在右側屬性面闆中找到HorizontalScrollBarVislbility屬性，将它設定為Disabled。

　　這樣就實作了圖3中的ListBox效果。

　　背後的故事

　　也許有人會問，假設ListBox中有一萬張圖檔資料，一起加載豈不是會消耗很多的資源？ 也許你想到，如果可以随着滾動條向下拖拽，内容被逐漸的加載并顯示就好了。

其實微軟已經替我們考慮并預設內建了這一特性。在WPF中，VirtualizingStackPanel等集合控件本身具有名為virtualizes的特性。請看下圖

　　這是一個擁有10個Item的ListBox。但他的高度隻夠顯示4項Item，5~10（半透明的部分）使用者是看不到的。我們從此可以發現，無論ListBox有多少子項，使用者同一時間可以看到的隻有四項，利用這一點，在WPF中，VirtualizingStackPanel無論有多少子項，實際消耗資源的隻有使用者看到的那四項，當滾動條向下滑動時，會動态的加載後續資源并使其可視化，同時自動釋放移出使用者的視野的Items。Silverlight作為WPF的弟弟，當然也預設內建了virtualizes特性。

　　唠叨幾句

　　第五章發表後，意外發現我的文章被許多網站轉載，銀光中國居然還将它放在了首頁的頭條。我受寵若驚的不知道該感謝CCTV還是MTV。最近工作很忙，時間排的很滿。本想等忙過這段再繼續寫，但看到大家的留言，一想到有那麼多人等着看下文，心裡就抓心撓肝一樣。本文的定位圍繞三點“最常用，最實用，最快速”，是以該講什麼比怎麼講更有難度。在此我希望大家可以幫我一起想題目，你可以在這裡留言或郵件發給我。謝謝！