【譯】Silverlight for Windows Phone Toolkit In Depth(三)

文章目錄

• PopulateComplete()

開篇： Silverlight for Windows Phone Tookit In Depth(一)

上一篇：Silverlight for Windows Phone Tookit In Depth(二)

 

AutoCompleteBox

 

概述

AutoCompleteBox是當使用者在輸入時在下拉式清單中給出相應的匹配項的控制項，它是由一個文本輸入框和下拉式清單組成。具有豐富的屬性集支援個人化定製、模板顯示、資料繫結和自動完成邏輯。

 

準備

開始使用AutoCompleteBox必須先在你的項目中添加引用Microsoft.Phone.Controls.Toolkit.dll

Note:在安裝完Toolkit後你可以在下面路徑找到Microsoft.Phone.Controls.Toolkit.dll

For 32-bit systems:

C:\Program Files\Microsoft SDKs\Windows

Phone\v7.1\Toolkit\Aug11\Bin\Microsoft.Phone.Controls.Toolkit.dll 

For 64-bit systems:

C:\Program Files (x86)\Microsoft SDKs\Windows

Phone\v7.1\Toolkit\Aug11\Bin\Microsoft.Phone.Controls.Toolkit.dll 

或者如果你下載了“Silverlight for Windows Phone Toolkit Source & Sample - Aug 2011.zip”,可以直接從“...\Silverlight for Windows Phone Toolkit

Source & Sample - Aug 2011\Bin\”目錄下找到

你可以在XAML或者C# / VB中建立AutoCompleteBox控制項執行個體

• 在XAML中定義AutoCompleteBox：你必須先添加如下命名空間

注意:確保在你的頁面聲明中包含“toolkit”命名空間！你可以通過Visual Studio Toolbox, Expression Blend Designer或者手動添加。

• 在C#中建立 AutoCompleteBox執行個體：

你需要添加如下代碼

下一步是為ItemSource屬性賦值，用樣本資料填充AutoCompleteBox

 

主要屬性

 

FilterMode

FilterMode是AutoCompleteFilterMode類型的相依性屬性，用來以指定的方式篩選ItemsSource集合，以便在下拉式清單中顯示，預設值是AutoCompleteFilterMode.StartsWith

注意：使用FilterMode屬性來指定如何篩選可能的匹配。例如，可以以預定義或自訂的方式進行篩選。如果你設定了ItemFilter屬性，檢索方式自動化佈建為自訂。

樣本：

例如我們想實現大小寫匹配的搜尋，需要如下這種方式設定FilterMode屬性

你可以看到第一個樣本中，我們輸入一個小寫字母沒有任何匹配結果顯示，在第二個樣本中我們輸入一個大寫字母，匹配項就自動顯示出來。

 

ItemFilter

ItemFilter是AutoCompleteFilterPredicate<object>類型的相依性屬性。它的值是一個使用使用者輸入的文本篩選項目集合的自訂方法，預設為空白

注意：如果你設定了ItemFilter屬性，檢索方式會自動化佈建為自訂。使用 ItemFilter 以自訂對象的方式篩選集合，或者使用TextFilter提供自訂文本的方式過濾。

AutoCompleteBox使用此方法決定可能匹配的文本，如果返回True,說明item是匹配的結果，否則返回fasle

• search -string類型，用來作為被匹配的字元
• Item-用來與“search”參數相比較
• T-可以是string或者Object類型

樣本：

如果我們實現最後一個字母匹配，可以參考下面的代碼

當我們輸入“s”時，所有以“s”結尾的匹配項就會顯示出來。類似的你可以添加自訂的匹配方法來滿足你的需求。

 

TextFilter

TextFilter是AutoCompleteFilterPredicate<string>類型的相依性屬性，它的值是一個使用使用者輸入的文本篩選項目集合的自訂方法，以便在下拉項中顯示。

注意：如果你設定了TextFilter屬性，檢索方式會自動化佈建為自訂。TextFilter提供以自訂文本的方式篩選集合，或者使用ItemFilter，以自訂對象的方式過濾。

樣本：實現以字元長度的方式匹配，參考如下代碼

如上面樣本，當你在輸入時只要字元長度超過6的項都會出現在下拉項中。

 

MinimumPopulateDelay

MinimumPopulateDelay是Int類型的相依性屬性，預設為0，用來擷取或設定最小延遲（使用者輸入完成到匹配結果填充完AutoCompleteBox的下拉項之前的時間）

 

MinimumPrefixLength

MinimumPrefixLength是Int類型的相依性屬性，預設為1，用來擷取或設定響應的最小長度。

注意：如果你設定MinimumPrefixLength為-1，AutoCompleteBox將不會顯示任何匹配結果，它沒有最大值，如果將MinimumPrefixLength值設的過大，AutoCompleteBox將無法很好的提供可能的匹配。

樣本：

如果我們想實現當使用者輸入2個字元後作出響應，可以參考下面代碼：

在第一個樣本中輸入一個字元沒有任何結果顯示，在第二樣本中，輸入兩個字元後匹配結果顯示。

 

SearchText 

SearchText  是用來擷取檢索文本的屬性，該文本用來篩選ItemsSource 的集合

注意：SearchText 的值與Text屬性相同，但是它的值是在TextChanged事件以後，Populating 事件之前賦值的。

 

TextBoxStyle 

TextBoxStyle  是用來擷取或設定輸入框的樣式，預設為空白

 

Text

Text  string類型,代表AutoCompleteBox控制項輸入框的值

 

IsDropDownOpen

IsDropDownOpen  bool類型，用來擷取或設定下拉項是否開啟。

 

IsTextCompletionEnabled 

IsTextCompletionEnabled  bool 類型，用來擷取或設定是否自動填滿（當有第一個匹配項時是否自動填滿輸入框）。預設值為false

 

InputScope

InputScope InputScope類型，它決定AutoCompleteBox的文本模板的輸入範圍，即數字、密碼、文本等

註：儘管 AutoCompleteBox不是ItemsControl類型控制項，但是它仍然具有一些ItemsControl的屬性，如：ItemContainerStyle, ItemTemplate 和ItemsSource!

 

ItemContainerStyle

ItemContainerStyle Style類型，它用來決定下拉式清單選中項容器的樣式

 

ItemTemplate

你可以使用 ItemTemplate屬性使下拉項資料對象顯示的更美觀，如果你綁定一個集合到AutoCompleteBox，並且沒有使用DataTemplate提供特殊的顯示方法，那麼每一項都將是字元。

 

ItemsSource

擷取或設定用來產生下拉項的項目集合

 

SelectedItem

擷取或設定下拉式清單中當前選中項

注意：關於AutoCompleteBox資料繫結，使用ValueMemberBinding 和 ValueMemberPath屬性

 

事件Populated

當AutoCompleteBox根據使用者輸入的文本將匹配結果填充完下拉項之後觸發

樣本：

Populating

當AutoCompleteBox根據使用者輸入的文本將匹配結果填充下拉項的過程中觸發

樣本：

注意：如果通過設定PopulatingEventArgs取消事件，Cancel屬性為true, AutoCompleteBox 將不會自動填滿下拉項，基於這種情形，如果你依然想顯示匹配結果就必須自己提供填充邏輯。

TextChanged

在AutoCompleteBox的 輸入框輸入時觸發

樣本：

DropDownOpening

在 IsDropDownOpen改變為true, AutoCompleteBox未顯示時觸發

樣本：

DropDownOpened

在AutoCompleteBox已經顯示且IsDropDownOpen改變為true,時觸發

樣本：

DropDownClosing

在 IsDropDownOpen改變為false,並且AutoCompleteBox依然顯示時觸發

樣本：

DropDownClosed

在AutoCompleteBox關閉且IsDropDownOpen改變為false,時觸發

樣本：

SelectionChanged

當下拉式清單選中項發生改變時觸發

樣本：

 

主要方法PopulateComplete()

通知AutoCompleteBox，ItemsSource屬性已經設定並且資料可以被匹配並且顯示在下拉項中

注意：當你提供了自訂的下拉項填充邏輯，調用此方法通知控制項你已經完成填充過程。也許，當填充過程非常漫長時，你調用了PopulateComplete()和你想取消內建的篩選，在這種情況下，你可以處理Populated事件，設定 PopulatingEventArgs.Cancel為true.當這漫長的填充完成時，你可以調用PopulateComplete()，表明下拉項已經填充完成。

 AutoCompleteBox 資料繫結

下面的樣本示範了怎樣通過資料繫結填充AutoCompleteBox控制項，基於上面的例子我們可以在下拉項中展示不同手機的圖片和描述

定義資料來源

下面是建立資料來源的步驟：
第一步：定義業務/資料類

首先定義資料類，如建立下面“WP7Phone”資料類

注意：重寫ToString() 方法很重要，因為我們將要實現一個自訂的文本篩選方法，篩選WP7Phone對象ToString方法返回的字串。自訂的篩選方法將返回 匹配的WP7Phone的 Name，也就是將顯示在Textbox中的值。

第二步：建立Images檔案夾，並為之添加圖片（設定添加的圖片的build action 為Content），圖片將顯示在AutoCompleteBox的下拉項中。

第三步：建立WP7Phone類型的樣本集合

綁定資料

第一步：在XAML中定義AutoCompleteBox

我們將定義一個AutoCompleteBox，並且設定FilterMode為Custom（自訂），因為我們想顯示自訂的WP7Phone類型的資料。然後，我們自訂一個ItemTemplate，將WP7Phone類的Image屬性綁定到Image，將Name屬性綁定到TextBlock，代碼如下：

第二步：為ItemsSource屬性賦值

第三步：添加自訂的ItemFilter

我們將添加名為SearchPhones的自訂委託，用來依據使用者輸入的字元檢索可能匹配的結果（即以輸入的字元開頭的項）

第四步：編譯運行項目，運行結果如下

讓我們在輸入框內輸入"htc"，正如你所看到的，在下拉項中提供了兩項結果。如果我們選擇“HTC Mozart”，輸入框地區將顯示為“Selected Phone: HTC Mozart”（注意：這段字元是 WP7Phone類中重寫的 ToString()方法返回的）

 

通過ValueMemberBinding 綁定AutoCompleteBox

也許，你不想使用自訂的篩選方法並且覺得沒必要在你的資料類中重寫ToString()方法，你可以使用ValueMemberBinding 來替代。下面是樣本（我們使用和前面一樣的資料，唯一的區別是我們沒有使用任何自訂的篩選方法）

資料來源

代碼如下：

資料繫結

下面示範怎樣進行資料繫結

結果

最終結果如下：

 

聲明：本人英語水平有限，翻譯有不當的地方還望指正，所有翻譯均是理解性翻譯，與原文不一定相符，出現錯誤翻譯不當，以原文為準，英文好的建議直接閱讀英文原版(也不是太難)，著作權歸原作者所有。轉載此文請註明文章出處和作者。

英文原版：http://www.windowsphonegeek.com/WPToolkitBook2nd