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

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

上一篇：Silverlight for Windows Phone Toolkit In Depth(五)

 

ExpanderView

 

概述

ExpanderView是由頭部和可摺疊的下拉項組成的控制項。當使用者點擊頭部時，ExpanderView將摺疊或者開啟。ExpanderView本身是一個簡單的HeaderedItemsControl，提供了大量的屬性和事件用於控制下拉項的開啟和摺疊功能。

 

準備

開始使用ExpanderView必須先在你的項目中添加引用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\Oct11\Bin\Microsoft.Phone.Controls.Toolkit.dll 

For 64-bit systems:

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

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

或者如果你下載了“Silverlight for Windows Phone Toolkit Source & Sample - Nov 2011.zip”,可以直接從“...\Source and Sample\Bin\”目錄下找到

你可以在XAML或C#/VB中建立ExpanderView執行個體

• 在XAML中定義ExpanderView：你需要添加如下命名空間

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

• 在C#/VB中建立ExpanderView控制項執行個體：只需要添加如下代碼

 

主要屬性Expander

Expander Object類型屬性，擷取或設定expander對象

樣本：

左邊為摺疊狀態，後邊為開啟狀態

ExpanderTemplate

ExpanderTemplate  DataTemplate類型屬性，擷取或設定該控制項expander的模板

HasItems

HasItems bool類型屬性，擷取或設定一個bool值，該值表示ExpanderView是否包含子項目

IsExpanded

IsExpanded  bool類型屬性，擷取或設定一個bool值，該值表示ExpanderView是否開啟。

IsNonExpandable

IsNonExpandable bool類型屬性，擷取或設定一個bool值，該值表示ExpanderView是否是非擴充的。

NonExpandableHeader

NonExpandableHeader  object類型屬性，擷取或設定當ExpanderView為非擴充的，頭部顯示的對象。

樣本：

NonExpandableHeaderTemplate

NonExpandableHeaderTemplate DataTemplate類型屬性，擷取或設定當ExpanderView為非擴充時，頭部的資料範本。

 

主要事件Expanded

在ExpanderView開啟顯示內容時觸發

樣本：

Collapsed

在ExpanderView摺疊並隱藏內容時觸發

樣本：

 

ExpanderView資料繫結

下面的樣本將示範如何使用資料繫結填充ExpanderView，我們將為比薩店實現一個很簡單的可摺疊菜單，在摺疊狀態下顯示不同種類的比薩餅，在開啟狀態顯示詳細的配料資訊

定義資料來源

下面是建立資料來源的步驟：

第一步：定義資料/業務類

首先定義一個名為“CustomPizza"的資料類，包含如下屬性：

PizzaOption類如下：

第二步：建立一個圖片檔案夾並添加一些圖片

第三步：建立項為CustomPizza類型的集合

 

ExpanderView資料繫結

首先我們需要在頁面資源中添加必要的資料範本

第一步：在頁面資源中定義RelativeTimeConverter，我們用它將“AddedDate”值轉換為合適的字元（如：08/08/2011將轉換為“one month ago”）

第二步：在頁面資源中定義一個自訂HeaderTemplate

第三步：在頁面資源中定義一個自訂的ExpanderTemplate

第四步：在頁面資源中定義一個自訂的ItemTemplate

第五步：在頁面資源中定義一個自訂的NonExpandableHeaderTemplate

第六步：在XAML中添加一個ListBox，用來使用ExpanderView控制項顯示CustomPizza對象的集合。在ItemTemplate中將 “CustomPizza”綁定到ExpanderView，代碼如下：

第七步：設定ListBox的ItemsSource屬性

下面是最終運行結果：

開啟/摺疊全部樣本

這個樣本將示範如何開啟/摺疊上面樣本中所有的ExpanderViews，注意ListBox的每一項都是ExpanderViews。

第一步：添加兩個用於開啟/摺疊全部項的按鈕

第二步：添加如下方法，用於開啟/摺疊ExpanderViews

第三步：在後台代碼中，添加 “btnExpand”單擊事件

第四步：在後台代碼中，添加  “btnCollapse”單擊事件

 

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

英文原版（第二版）：http://www.windowsphonegeek.com/WPToolkitBook2nd

 

致謝：在翻譯過程中園內的許多朋友給予了鼓勵與支援，在此衷心的感謝！您的鼓勵與支援是我翻譯的最大動力，如您有任何意見可以直接在評論中發表，我會認真回複！再次感謝大家！