根據(jù)我個人的使用經(jīng)驗，我將與大家一起交流分享，在LightSwitch程序中運行ClientUI是一件多么簡單和容易的事情。從LightSwitch bata 2版本開始，LightSwitch便允許自定義控件代替幾乎所有的布局和預(yù)定義控件。它包含了列表，數(shù)據(jù)網(wǎng)格，表單控件，如文本框和時間選擇器控件。

　　在本篇文章中，我將展示ClientUI’s UXDateTimePicker如何取代默認的日期和時間選擇器，以提供更具吸引力的日期和時間選擇。假設(shè)你已經(jīng)準備好了一個簡單的LightSwitch項目，此時，請打開屏幕設(shè)計器。在我的示例中，我采用員工詳情列表，其數(shù)據(jù)來源于Northwind數(shù)據(jù)庫。

　　設(shè)計器一旦打開，便可選擇其中一個日期時間段。自從“Hire Date”采用了日期和時間這兩個元素，“Hire Date”似乎顯得非常具有意思。在屬性窗口中，將控件類型改為自定義控件，然后點擊更改鏈接來指定自定義控件類型。接下來，會有一個對話框提示你，要求你選擇要使用的控件類型。

　　打開Intersoft.Client.UI.Aqua.UXInput程序集，選擇UXDateTimePicker，如下圖所示：

　　如果所需的程序集不在列表中，你可以點擊“ Add References”按鈕，瀏覽所有程序集，選擇并添加你需要的程序集。

　　指定了自定義控件后，最后一步就是編寫代碼將數(shù)據(jù)值綁定到控件中。我最初以為LightSwitch有自動綁定功能，事實上沒有。你也不能直接訪問設(shè)計器中的自定義控件屬性。算是有一點小小的遺憾?。。。?！希望在以后的版本中能夠解決。

　　下面的代碼顯示了如何通過代碼將數(shù)據(jù)綁定到自定義控件并且自定義控件屬性：

namespace LightSwitchApplication
{
public partial class EmployeesListDetail
{
partial void EmployeesListDetail_Created()
{
// get the reference to the UXDateTimePicker
var datePicker = this.FindControl("HireDate1");

// set the value binding to the UXDateTimePicker's Value property.
datePicker.SetBinding(UXDateTimePicker.ValueProperty, "Value");

datePicker.ControlAvailable +=
new EventHandler<ControlAvailableEventArgs>(DatePicker_ControlAvailable);
}

private void DatePicker_ControlAvailable(object sender, ControlAvailableEventArgs e)
{
UXDateTimePicker datePicker = e.Control as UXDateTimePicker;
datePicker.EditMask = "MM/dd/yyyy hh:mm tt";
datePicker.UseEditMaskAsDisplayMask = true;
}
}
}

　　這樣，就大功告成了！按F5可在瀏覽器上面運行該項目。構(gòu)建過程比正常的Silverlight項目花的時間更長。你可能需要等待好幾秒才能看見瀏覽器彈出來。

　　下面的截圖顯示了運行中的UXDateTimePicker。點擊“Hire Date’s picker”，你可以看見一款帶有優(yōu)雅模擬時鐘的日歷。值得注意的是，日期和時間一定要選擇正確。下載！請注意，你需要再你的本地SQL服務(wù)器上安裝 Northwind數(shù)據(jù)庫。