<Toolkit>———Silverlight for Windows Phone 7 Silverlight Toolkit
Silverlight for Windows Phone 7 Silverlight Toolkit
.gif)
前言
Silverlight for Windows Phone 7 Toolkit是專為Windows Phone 7設定的一組控制項，能夠方便的使用以及加速應用程式的開發；如果您還沒有安裝過Toolkit，可以到下面的位置來進行下載以及安裝
http://silverlight.codeplex.com/releases
除了本篇文章提供的範例程式碼之外，在下載位置當中，您也可以找到使用Toolkit的範例程式碼，以及Toolkit的原始程式碼，您也可以加以修改、進行客製等等，那麼接下來本篇就跟各位介紹一下Toolkit中包含的項目以及簡單的使用方式
議程
Silverlight for Windows Phone 7 Toolkit
Silverlight for Windows Phone 7 Toolkit
- 將Toolkit中的控制項加入到工具箱中
安裝好Toolkit之後，預設並不會直接就在Visual Studio中出現，您可以透過新增的方式，將常用的控制項加入到工具箱中方便使用
首先可以在工具箱中新增一個區塊(Tab)出來，並且命名為Toolkit(名稱您可以自訂)
之後在空白的地方點選滑鼠右鍵，之後點選『選擇項目』
之後會彈出一個新的視窗，這個就是新增項目的視窗了
您可以用 Assembly Name 來排序一下，這樣 Toolkit 的項目就會排列在一起了，勾選要使用的控制項之後，按下 OK ，該控制項就會出現在工具箱中了
- AutoCompleteBox
AutoCompleteBox 是一個具有自動完成功能的文字框，例如說輸入框是具有特定的目的，或是有一些常用字，那麼用這個控制項來做會相當的方便。
在使用 AutoCompleteBox 的時候，主要必須要設定 ItemSource 這個屬性，這也就是提示項目的來源了，您可以自訂類別，或是利用字典的方式來做為資料來源，例如筆者這邊簡單建立了一個 Vendor 類別，程式碼像下面這樣
很簡單的一個類別，而在這邊簡單的做一個 Email 選擇的功能，所以只要先取出所有的 Email 資料之後，將內容指定給 AutoCompleteBox 就可以使用了
之後當文字框輸入類似的文字時，就會出現選單供使用者快速的選擇項目
註：請特別注意，目前的版本(2010 Nov)在使用AutoCompleteBox的時候，如果您將其放置在Pivot控制項中，會有顯示上的問題
- ContextMenu
ContextMenu 是一個類似於在使用一般桌上型應用程式時，點選右鍵之後會出現的選單，只是在 WP7 平台上使用時為長按在控制項上時會出現，例如說下面這個樣子
在使用的時候，程式碼的部分可以利用 ContextMenuService 來將某個 ContextMenu 指定給控制項，例如下面的程式碼
那麼直接利用 XAML 的方式來加入呢？當然也是可以的，直接在 XAML 中使用時，要先加入相關的 xmlns 命名空間
使用的時候大致會像是這樣
- DatePicker TimePicker
DatePicker 以及 TimePicker 就是專門為設定日期以及時間的用途所打造的，使用的時候只要將控制項拉出來，設定好位置就可以直接來使用，相當的方便，而選擇的介面也相當的漂亮
但第一次使用時您可能會有一個疑惑，在選擇畫面的 Toolbar 這邊，圖示怎麼會是『X』的樣子呢？屬性中也沒有可以設定圖示的地方，那要怎麼辦呢？這是由於目前 DatePicker & TimePicker 在 Toolbar 圖示的部分是用固定的檔案名稱，所以必須建置特定名稱的資料夾以及檔案來作為圖示使用，首先要建立一個 Toolkit.Content 的資料夾，並且在其中放置名稱分別為 ApplicationBar.Cancel.png 以及 ApplicationBar.Check.png 的兩張圖示檔案，請特別注意，在 Build Action 的地方要設定為 Content，像是下圖這樣，就可以正常的顯示出圖示了。
- ListPicker
ListPicker 使用的方式跟以往在一般應用程式中的 ComboBox 感覺相當的相似，主要的功能也是可以在多個項目中來選擇一個項目，例如說在平常的狀態下，看到的感覺是跟一般的文字框相同(像是下面左圖)，而展開後就會出現項目列表(像是下方右圖的樣子)
在 XAML 的部分，您會看到大致像是下面這個樣子
使用的方式也是相當的簡單，您可以直接在 XAML 上面做項目的新增，首先要加入 xmlns 的項目
之後加入項目的樣子大概會是像這樣
這樣就完成了項目的新增了，而用程式碼來加入當然也沒有問題，像是
而這邊有一個部分要特別的留意；當用Visual Studio開發的時候，預設的容器都是使用Grid，而當ListPicker在展開項目的時候，您可能會遭遇下方的控制項被覆蓋的問題，像是下面左邊的這張圖
這樣子使用起來就會很奇怪，而且功能性就大打折扣了；要處理這個問題的方式也不困難，您可以利用有自動排版的功能來做，比如說利用StackPanel
，將原先的Grid變更為StackPanel之後，那麼在ListPicker項目展開之後，便會自動的取得顯示的空間，並且把其他的項目往下推，顯示的結果就會正常了(像是上方右圖的樣子)，除了直接修改XAML之外，也可以在 Blend中直接的變更容器的設定
展開項目後的 ListPicker 跟 ComboBox 的感覺相當的相似，而當項目的數量超出 5 個的時候，這個時候 ListPicker 會自動的以整頁的模式來顯示待選的項目，這樣可以有更多的顯示空間，在項目的選擇上也會更加的方便
歸功於 Silverlight 強大的 UI 自訂能力，你也可以自訂項目的外觀，像是選擇顏色的 ListPicker ，可以在項目的最前方加入一個 Rectangle ，並填上對應的顏色這樣子使用者在選擇的時候就更加的直覺了，那麼這個部分要怎麼做呢？在 XAML 中搭配 Binding 的功能也是很簡單的可以實作出來。首先可以先建立一個表示顏色的字串陣列
並且將這個陣列設定給ListPicker的DataContext屬性
listPicker2.DataContext = AccentColors;
而在XAML中，我們變更ListPicker的樣板，例如下面這個樣子
- LongListSelector
LongListSelector使用上感覺有點像是ListBox，但其中加入了『群組』的功能，能夠讓你快速的到達都一個群組的開頭；像是在選擇聯絡人的介面，就是利用這個方式去做的，例如下面的樣子
而要怎麼去使用他呢？筆者這邊先建立幾個簡單的類別，首先是 Vendor，有幾個基本的欄位
之後建立一個VendorInfo類別，其中有個初始化的function，用來建立一些假資料，以及一個實作IEnumerable介面的群組類別，主要是在LINQ中要作為群組分類使用的，像是下面這樣
在資料中，筆者是利用 Area 的部分來做群組的分別，所以在對 LongListSelector 設定 ItemSource 的時候會像是下面這個樣子
而在 XAML 的部分，我們必須要設定一下樣板的樣式，在頁面中的 Resource 部分建立像下面的樣板
之後在 LongListSelector 控制項中去設定對應的樣板
這樣子就可以達到像是下圖的效果了
- ToggleSwitch
ToogleSwitch 控制項主要是做為設定 ON/OFF 的用途，如果您有類似的設定需求，用這個控制項來做設定是最適合不過的；比如說是不是開啟Location的功能等等，接下來來看一下控制項放置到畫面上時的效果
使用時，您可以設定Header的屬性，用以設定在畫面上顯示的提示文字，例如
toggleSwitch1.Header = "SomeSetting";
而要讀取設定的情形時，您可以檢查IsChecked這個屬性來判斷目前是在ON或是OFF的狀態
- WrapPanel
在原先的開發工具中，預設是沒有 WrapPanel 的容器的，不過在 Toolkit 裡面也加進來了；WrapPanel 使用的方式跟 StackPanel 相當的相當的相似，主要的方別在於 StackPanel 是直向的方式來擺放控制項，而 WrapPanel 是以橫向的方式來擺放，例如下面這樣子的效果
先前在介紹容器的這篇文章當中也有過介紹，各位也可以前往參考
- Transition
Transition 提供了多種特效可以讓我們使用，可以用在一些轉場的特效上面；在 Toolkit 當中，共提供了下面這些效果
- RotateTransition
具有旋轉效果的特效，可以設定依照順時針或是逆時針方向的旋轉，效果大致會像是下圖的感覺
- SlideTransition
具有滑動效果的特效，可以設定滑動的方向，例如由上往下或是向左邊滑出等的效果，大致像是下圖的感覺
- SwivelTransition
SwivelTransition的效果也是在做轉向只是是3D的效果，例如效果大致上會像是下圖這樣的感覺
- TurnstileTransition
TurnstileTransition 跟 SwivwlTransition 有點類似，只是他動畫的方向有點像是『開門』這種感覺，實際執行的效果大致上像是下圖這樣
- RollTransition
RollTransition 跟 RotateTransition 有點類似，他也是一個旋轉方式的動畫，只是在 RollTransition當中就沒有Mode的屬性可以來設定了，也許之後會有所更新也說不一定；而效果大概會像是下圖的感覺
接下來來看看程式碼的部分，使用時主要會利用 Transition.GetTransition 去設定要作動的 UIElement，以及設定 Transition 的 Mode，Mode 是設定特效的表現方式，比如以 SlideTransition 來說，Mode 會有由上往下，或是向左邊滑出這樣的設定，例如
- RotateTransition
之後利用 GetTransition 設定要旋轉的 UIElement (通常是指定裝載整個頁面的 ApplicationPage )
這樣就可以讓動畫開始撥放了；這邊也要特別的留意一下，在 Completed 的事件中，要記得去呼叫 Stop，不然當一些滑出畫面之類的動畫，在最後是不會自動的返回初始的狀態的喔，這部分可以根據您應用程式的使用方式去做一些調整，來達到您想要的效果。
那麼如果說想要頁面統一使用一種轉頁的特效，您也可以利用自動撥放的方式來指定當頁面在做 Navigation 的時候要呈現的動畫效果，這個時候就要利用 TransitionService 來做；在頁面中直接使用 XAML 來指定的話會像是下面這個樣子
設定好之後，在進入頁面以及離開頁面的時候都會自動的幫您撥放您指定的動畫效果，而使用這個方式的時候，在 App.xaml.cs 中有個地方要加以修改，像是下圖的地方
要將原先的 PhoneApplicationFrame 修改為 TransitionFrame，沒有修改的話，動畫的效果是會出不來的喔，要特別的注意。
利用 Toolkit 提供的功能，就可以很方便的來做一些應用程式的轉頁效果，如果您不想自行用 Blend 做的話，Toolkit 也是個不錯的選擇。使用的時候只要修改 Completed 事件中的程式碼，在動畫完成之後轉向到其他的頁面，就可以有不錯的感覺喔。
註：有關 Transition 的說明您也可以參考 http://blogs.msdn.com/b/wfaught/archive/2010/11/15/transitions.aspx 中相關的說明
- Gestures
在使用 Gestures 的功能時，要利用 XAML 將 GestureService 中的 GestureListener 掛載到元素中，比如說要在一個 Canvas 中建立一個可以拖曳的圓形，在 XAML 的部分大致會像是這個樣子
這樣就可以捕捉到 Gesture 相關的動作；而使用的時候，主要就是要在各個事件中去處理變化，像是上面筆者加入了一個圓形，如果要讓圓形可以拖動，要做出像是這樣的效果，只要在 DragDelta 事件中，去變更圓形的 Translate 變化，首先宣告一個 CompositeTransform ，並且將它設定給剛剛建立的圓形(或是您也可以在 XAML 中直接設定)
之後在 DragDelta 事件中，去設定 Transform 的變化，
這個就可以達成拖曳的效果了；那麼在 Gestures 中有那些事件可以使用呢？下面列出比較會常使用的幾個事件
- DragStarted、DragDelta、DragCompleted
Drag 相關的事件都是跟拖曳有關，如果想要做出的效果是可以在頁面上去拖曳控制項(元素)，那麼就要處理這三個事件
- Flick
Flick 是偵測手勢，也就是當手指快速且短暫的滑動時會發生，可以告訴你滑動的方向等訊息
- PinchStarted、PinchDelta、PinchCompleted
Pinch 相關的事件都是與多點觸控有關，如果你想要去旋轉控制項，或是像是在瀏覽圖片的時候能夠支援利用兩根手指去放大、縮小的效果的時候，就要處理這些相關的事件
- Hold
Hold 事件是發生在長按控制項的時候會發生
- DoubleTap
雙擊的時候會產生的事件
利用這些事件，想要做一個可以類似縮放圖片的功能也就很方便了；例如說在 PinchDelta 事件中，去改變 Scale 的變化，像是下面程式碼的樣子
是不是很方便呢。Silverlight Toolkit 中除了提供相當多好用的控制項可以使用之外，在特效上以及手勢的偵測上也提供了很方便的使用方式，趕緊動手來試試看吧!
