Windows Phone 7 開發 31 日談——第21日：Silverlight Toolkit for Windows Phone

By Jeff Blankenburg

本文是“Windows Phone 7 開發 31 日談 ” 系列的第21日。

    在昨天討論了地圖控制元件之後，我突然想到你可能 還 不知道Silverlight Toolkit為你提供了大量的 控制元件。今天的文章就來講解Silverlight Toolkit for Windows Phone ，另外，還會說到Silverlight 3 Toolkit 。

 

什麼是工具包？

    在最初的Silverlight 3工具包 中有一大堆可以用在專案中的額外控制元件。包含的控制元件從圖表（Chart）到手風琴檢視（Accordion），從日期選擇器（Date Picker）到自動完成輸入框（Autocomplete Box）。這個工具包最棒的地方就是它完全相容我們用Silverlight寫的Windows Phone應用程式。

Silverlight Toolkit for Windows Phone與之類似，但它包含了額外的一些可以用在Windows Phone程式中的控制元件。它們是：

• ContextMenu
• DatePicker & TimePicker
• GestureListener
• ToggleSwitch
• WrapPanel

在本文下面的內容中我會為工具包中的每種控制元件都提供一個例子，不過我還是強烈建議你仔細研究Silverlight 3 Toolkit 。這裡有大量可以用在你的專案中的控制元件，示例和程式碼。我會在後面的文章中介紹工具包中的圖表控制元件，但是你需要耐心等待，當然你也可以現在就開始研究它。

 

ContextMenu 控制元件

    如果你試過將某個程式別到起始頁上，你就會看到ContextMenu在起作用。下面是我在將Internet Explorer放到模擬器起始頁面時的樣子（按下並保持就會顯示這個選單）：

 

為了讓這個選單出現，我們需要使用Silverlight工具包中的ContextMenu控制元件。和本文所有的例子一樣，我們需要在專案中新增Silverlight工具包的程式集。你可以在這看到：

 

 

新增程式集後，還要在XAML頁中新增名稱空間。將這個名稱空間新增到檔案頂部的<phone:PhoneApplicationPage>標籤中：

    現在可以進入正題了。讓我們找一個能為使用者提供更多選項的控制元件，矩形。我們可能會有一個使用者想與之互動的形狀，圖片或圖示等等。也可能對這個矩形我們要做更多的事（想想右擊選單）。通過向矩形新增一個ContextMenu，可以在使用者點選物件並保持時彈出一個選單。它可以是任何XAML元素，所以你甚至可以在應用程式的背景，全景檢視或按鈕中應用此控制元件。下面是如何使用它的XAML程式碼：

 

通常我們要使用ContextMenuService，在特定的控制元件上新增ContextMenu。你可以看到每一項都有一個Click事件，允許將這些選單項與程式碼相關聯。下面是我的ContextMenu截圖：

    如果你在模擬器中測試這個程式，可能會注意到背景中的內容都縮小了一點，好像陷入了背景中，將選單呈現在了使用者所注視的正前方。當然你可能不需要這個動作，那麼在<toolkit:ContextMenu>項中有一個IsZoomEnabled 特性。將它設定為false可以停止自動的縮放動畫。為XAML元素新增這種類似右擊選單的內容很簡單。這可能是6個控制元件中最常用的控制元件了（除非GestureService不能用了）。

 

DatePicker 和TimePicker控制元件

    在我為本文準備例子時，這兩個控制元件給我帶來了一個有趣的挑戰。它們是如此的簡單以至於我都不知道我哪兒做錯了。事實上，還真是有點兒小魔力。一會兒我會解釋。首先，看看如何將這些控制元件新增到頁面中。這很簡單：

 

 

當你新增這些控制元件到頁面中後，它們可以如介紹地那樣工作。它們允許使用者選擇一個日期（以你提供的初始日期開始……如果你沒有提供，它預設使用“今天”的日期）。下面是每個控制元件的截圖：

 

好了，現在來看看這些控制元件帶給我的複雜問題。你會注意到上面截圖中的工具欄。還有兩個圖示（沒有圖片）。在我幾番思索之後，我知道了它們是完成和取消 按鈕（你還可以在點選省略號（…）圖示時發現它們。它們會向上滑動並顯示文字標籤）。

為了讓這些圖示能真正工作，你需要按照下面的步驟操作：

1. 在你的專案中建一個根目錄，命名為“Toolkit.Content”。
2. 在這個目錄中新增兩個帶特定名字的圖片
   1. ApplicationBar.Cancel.png (點此下載 )
   2. ApplicationBar.Check.png (點此下載 )
3. 要確保這兩個圖片的Build Action已被設定為“Content”。如果你沒這麼做，請點選圖片，然後在屬性標籤中修改。

 

遵從上述步驟後，它就能工作了！下面是可以正常使用的程式截圖：

 

 

 

GestureListener 控制元件

    從Windows Phone 7開發31日談開始到目前為止，你可能一直在想什麼時候能找到在程式中處理使用者手勢的方法。就在今天！（免責宣告：這是其中的“一種方法”。其實有很多種方法來處理手勢，但無疑這是最簡單的一種，如果你是一路讀下來的就會發現這是這個系列所推崇的。用最簡單的方法實現Windows Phone中的內容。但這未必是你要一直遵從的最佳實踐。）

    好了，其他的都說清楚了，讓我們來討論GestureListener吧。和ContextMenu很像，我們要讓GestureService知道我們建立了一個GestureListener ，然後通常要為我們期待的特定手勢配備事件處理程式。記住是在XAML元素中應用它，所以手勢只會在被應用的控制元件中才能被識別。GestureListener支援以下手勢：

• Tap
• DoubleTap
• Hold
• Flick
• Pinch
• Drag and Drop

每一個手勢都是以這種方法實現的，實現起來非常簡單。收縮和拖拽操作還有一些細節（通常Delta過程介於手勢開始和完成之間）。下面是XAML程式碼（在另一個矩形中）：

 

正如你所見，我定義了所有需要去識別的手勢，並將相應的事件處理程式 賦 給它們，在Silverlight Toolkit for Windows Phone 的程式碼示例中，有很多關於如何處理這些事件的好例子。

 

ToggleSwitch 控制元件

如果你更改過模擬器的日期/時間就可能看到過這個控制元件。下面是例子：

 

將它新增到頁面中非常簡單：

 

在上面的截圖中寫的是“24-hour clock”，我的例子將會寫著“Receive updates automatically”。很幸運，On/Off文字是自動為你處理的。如果你想對這個控制元件做一些定製也是很簡單的。我們可以利用HeaderTemplate和ContentTemplate來使這個控制元件更加“自我”。還有Checked和Unchecked事件，它們在操作開關時被觸發。（這個控制元件和CheckBox很相似）。下面是一個使用示例（並繫結到了資料來源）：

 

最後是WrapPanel。它的目的很明顯，因為它是標準控制元件集中赫然缺失的控制元件。

 

WrapPanel 控制元件

    WrapPanel基本上是帶很多額外特性的StackPanel。幾個月前我在建立了一個遊戲，我想在一個螢幕裡面放置30個按鈕。因為那時還沒有WrapPanel，我不得不去動態的建立一個Grid，然後再將每個按鈕放在Grid中的某個位置上。這些工作比我想象的要多得多，而僅僅是為了在一個5 x 6的佈局中放30個按鈕。現在WrapPanel幫我們解決了這個問題。

在下面的例子中，我在一個WrapPanel中放置了12個按鈕：

 

在下面的截圖中，你可以看到WrapPanel動態決定在每一行如何安放它們，並在第一行下面堆疊。不會發生重疊（很像StackPanel），而且不用擔心內容的尺寸會將你的佈局搞砸。下面是截圖：

 

 

在我下面的程式碼示例中，你會看到我為Button 1和Button 2配備了事件處理程式。它們可以讓所有按鈕的尺寸放大或縮小。在把玩這個例子時應該仔細看看WrapPanel是如何動態移動你的內容的，尤其是在執行時。下面是相同程式碼的截圖，只不過其中的按鈕被刻意地放大了：

 

 

好了，就是這些！我們講解了Silverlight Toolkit for Windows Phone中5個全新的可用控制元件。請在今天就下載它，因為你會發現很快就會用到它。

 

下載示例程式碼

在這個示例程式碼中，你可以找到Silverlight Toolkit for Windows Phone 中每一個控制元件的例子。在第31日時，我會介紹Silverlight 3 Toolkit，以及如何在WP7應用程式中使用圖表。

原文地址：http://www.jeffblankenburg.com/post/31-Days-of-Windows-Phone-7c-Day-21-Silverlight-Toolkit-for-Windows-Phone.aspx