2012年3月30日 星期五

如何在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更加的優質動人。

沒有留言: