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

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

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

 

DatePicker

 

概述

Windows Phone Toolkit的DatePicker是一個能為你自動提供一個輸入框的UI元素，當你在選擇它時，選取器會顯示一個表單你可以使用無限滑動的方式選擇另一個日期，DatePicker 是符合Windows Phone設計規範的 UX控制項。

 

準備

開始使用DatePicker必須先在你的項目中添加引用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中建立DatePicker執行個體

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

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

• 在C#/VB中建立DatePicker控制項執行個體

NOTE:如果你選擇通過C#代碼的方式添加DatePicker控制項，不要忘記將DatePicker添加到頁面容器中，如: this.ContentPanel.Children.Add(datePicker);

IMPORTANT：在DatePicker和TimePicker中正確使用ApplicationBar的表徵圖，需要在項目的根目錄下建立一個名為"Toolkit.Content"的檔案夾，將表徵圖檔案複製到該檔案夾。Toolkit提供了一些基本的表徵圖檔案，你可以在PhoneToolkitSample項目中找到，複製到你的項目中，它們必須命名為 "ApplicationBar.Cancel.png" 和"ApplicationBar.Check.png"，並且build action 必須設定為"Content"!

 

主要屬性Header

Header Object類型屬性，它用來擷取或設定控制項的頭部

樣本：

HeaderTemplate

HeaderTemplate DataTemplate類型屬性，擷取或設定控制項頭部顯示的模板

PickerPageUri

PickerPageUri Uri類型屬性，它用來擷取或設定一個Uri（用在當點擊控制項載入IDateTimePickerPage執行個體），參考下文“定製全螢幕的選擇頁面”，擷取更多資訊和樣本。

Value

Value  DateTime?類型屬性，擷取或設定時間值

樣本：

ValueString

ValueString  string類型屬性，擷取當前選中值的字元形式

樣本：

ValueStringFormat

ValueStringFormat string類型屬性，擷取或設定當將 Value屬性轉換為string類型的格式化字元，擷取更多關于格式化文本的資訊，可以訪問MSDN文檔。

NOTE：格式化字元需要包含"{" 和 "}"，所以在XAML中使用時，需要規避特殊字元進行轉義，如ValueStringFormat="{}{0:d}" .

NOTE: DatePicker預設的ValueStringFormat是"{}{0:d}"，這意味著在美國文化裡將顯示為15/12/2010.

 主要事件ValueChanged

在Value屬性發生改變時觸發

樣本：

 

定製全螢幕的選擇頁面

你可以這樣來定製全螢幕的選擇頁面，設定DatePicker.PickerPageUri或者TimePicker.PickerPageUri屬性，導航到一個實現了IDateTimePickerPage介面的 PhoneApplicationPage。IDateTimePickerPage是為DatePicker/TimePicker 設計的介面，用來與選擇頁面進行互動。它僅包含一個屬性：

我們來建立一個簡單的方案，使用自訂頁面重設DatePicker的選中值為DateTime.Now。下面是步驟：

第一步：在你的項目添加Windows Phone Partial Page，並且重新命名為"CustomPage".

第二步：在後台代碼中實現IDateTimePickerPage介面，代碼如下：

第三步：然後在"CustomPage"中添加一個按鈕

第四步：下一步是添加一些代碼實現將DatePicker當前選中值設定為 DateTime.Now.

第五步：設定PickerPageUri為"/DatePickerDemo;component/CustomPage.xaml"

第六步：運行結果

上面就是實現一個定製的全屏選擇頁面。如果你運行這個樣本，你將會發現當你選擇DatePicker時，我們建立的CustomPage就會出現。然後如果你點擊按鈕，NavigationService.GoBack()將被執行，DatePicker的值將被更新為目前時間。如此簡單的你就實現了定製的全螢幕選擇頁面，當然你可以添加任何你喜歡的方式。

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

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