如何在WP7的ListBox中建立動態(按下去有點選效果)的選項(ListBoxItem)

很多開發人員到最後發現了一個問題，要建立一個Windows Phone 7的App實在不難，但是要建立一個好看(誰在乎好不好看，主要是要好賣)的Windows Phone 7 App，實在不僅僅是有開發天分就可以輕易做得到的。(如果原本就缺天分，那恐怕就更...)

OK，回歸正題，要讓App做得好看，要從小處著眼，大處著手，最簡單的方式就是讓你的App的操作介面和使用者有更多(貼近)的互動。就拿一個簡單的例子來說，如果你觀察坊間大多數比較優質的App，在每一個Item(不管是按鈕、圖片、選項...etc)被點選的時候，大多會有被按下去(陷下去)的效果，這樣的小小不起眼的效果讓你的App和使用者之間的互動更佳的順暢。

舉個例子來說，我們看一個簡單的ListBox範例，我們知道Silverlight當中，可以把資料直接Binding到ListBox中，例如：

void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            string[] buf = new string[] {"章小蜂","張無忌", "裡四方","中紅焰", "王董","郭老闆","晨星風","陸小鳳","尼康","年輕人" };
            this.listBox1.ItemsSource = buf;
        }

這樣的程式碼是很簡單了，立刻就可以有我們要的捲動選項效果(這是Silverlight基本功能，這沒什麼)：



當然，這樣美中不足的是，用戶按下去某個item時，並沒有我們要的效果(例如陷下去)那樣動態的感覺，不夠完美。那要如何建立一個具有動態效果的ListBoxItem呢，請進入Blend，建立ListBox的ItemContainer template：

這個ItemContainerTemplate是ListBox每一個(依照Binding結果動態產生的)Item的容器，我們選擇VisualStates，來調整每一個項目被點選時候的動畫效果：



請注意我們在States中找到MouseOver，接著點選Object中的LayoutRoot，調整其Projection屬性中的GlobalOffset的Z軸為-30，完成後請儲存重新deploy，你會發現當你點選某一個ListBox中的Item，該選項就有陷下去的效果囉(完全不用寫Code，很簡單吧)：

總括來說，由於單純的blog和書籍很難說明這些效果的設計和成果，因此VisualState和Template是我們在開發Silverlight(或WP7)時相當容易遺漏的技巧，對於開發人員來說，妥善的適時使用這些技巧，將有助於你的App更加的優質動人。