Expression Blend 的點滴（1）--ListBox華麗大變身

最近，在園子裏有很多朋友寫了關於Blend的優秀而且實用的文章，在此，我先表明silverlight的愛好者感謝他們的無私分享。廢話很少說了，今天，我也來分享點東西，但願對你們有用。

正如文章題目，此次咱們要拿ListBox來進行折騰，這時，你腦海中會不會浮現listbox的樣子呢？最後，listbox最後變成了下面的樣子：



看到它會不會以爲很熟悉？在js中見過，在flash中見過？不會吧？它是listbox變的？別被眼睛所欺騙，相信我，它確實是listbox。至少，在看完這篇文章的時候，你必定會相信個人。其實，這一切都受益於silverlight強大的模板技術，可是這仍是不夠的，若是沒有blend，這一切將變得如此的不現實，你面對一大堆xaml代碼，相信你沒看上50行就頭暈了，一塊兒來感謝blend吧，讓一切工做變得如此簡單（這裏指的的界面設計，若是你要用它去作業務邏輯，那就......)。接下了，就跟着我一步一步改造listbox，不用寫一行代碼，把它變成上面的樣子：

首先，打開blend建立一個silverlight項目



接着打開數據源選項，建立一個示例數據



選擇圖片數據，並指定文件來源



講Property1拖拽到LayoutRoot上
這樣就能看到以下的樣子


接着，對listbox建立一個副本模板



肯定後，咱們修改模版下Grid的屬性將垂直捲動條設置爲無效，水平設置有效


接着，咱們繼續選擇scrollviewer編輯模板--編輯副本



建立好後，能夠看到以下界面：



在這裏，咱們把VerticalScrollBar刪除掉，由於不須要它，接着繼續編輯VerticalScrollBar的模板



肯定後，將會是下面的結構：


接着把不須要的東西刪除，這裏咱們刪除VerticalRoot以及HorizontalRoot下的全部Rectangle，HorizontalLargeDecrease，HorizontalLargeIncrease，HorizontalThumb項。

而後，繼續編輯HorizontalSmallDecrease的模板



把下圖中選中的項所有刪除，只留下path，咱們一層一層的進入，好像把一件件衣服脫掉，如今已經在內衣部分了，這個Path其實就是listbox滾動條上的增長和減小的三角按鈕，不過，目前彷佛有些小，不要緊，咱們修改它的屬性，把它變大點。





這樣能夠看到它了：



對於HorizontalSmallIncrease作相同的修改（這裏略去）

而後退出因此的模板編輯進入最開始的界面，編輯listbox的佈局模板：



將stackpanel的位置設置爲垂直




調整下listbox的大小，這時，你將看到下面的結果：


這兩個控制的箭頭位置好像有點不對，不要緊，咱們打開到HorizontalScrollBar的模板下對HorizontalSmallDecrease和horizontalSmallIncrease的Margin屬性進行設置，調整到合適的位置：

                   

具體的值根據你本身肯定的大小去調整。你運行項目，就能夠看到效果了，可是還有一點點不對的地方，就是在listbox中的image下會有一段空白，這是因爲存在着HorizontalScrollBar的緣由，想辦法把它隱藏掉，可是不能刪除，刪除的話，那個三角箭頭也會消失，由於它是屬性Scrollbar的一部分，這裏，只要將HorizontalScrollBar的Margin屬性的top設置一個必定大小的負數，讓它往上移動，這樣就隱藏了。

還有更多的細節，就再也不贅述了，能夠對三角箭頭設置各類狀態響應，例如鼠標移上去顏色變化等等動畫效果。終於寫完了，若是你第一次看，可能會以爲很複雜，那麼多步驟，可是當你熟練了以後，你會發現這一切是多麼的簡單，固然你也許更願意本身用coding硬編碼去實現這樣的效果，那也是很好的。這裏只是提供一個思路，並非必定要你這樣作。：）