在本篇文章中，我将展示ClientUI’s UXDateTimePicker如何取代默认的日期和时间选择器，以提供更具吸引力的日期和时间选择。假设你已经准备好了一个简单的LightSwitch项目，此时，请打开屏幕设计器。在我的示例中，我采用员工详情列表，其数据来源于Northwind数据库。
设计器一旦打开，便可选择其中一个日期时间段。自从“Hire Date”采用了日期和时间这两个元素，“Hire Date”似乎显得非常具有意思。在属性窗口中，将控件类型改为自定义控件，然后点击更改链接来指定自定义控件类型。接下来，会有一个对话框提示你，要求你选择要使用的控件类型。
打开Intersoft.Client.UI.Aqua.UXInput程序集，选择UXDateTimePicker，如下图所示：
如果所需的程序集不在列表中，你可以点击“ Add References”按钮，浏览所有程序集，选择并添加你需要的程序集。
指定了自定义控件后，最后一步就是编写代码将数据值绑定到控件中。我最初以为LightSwitch有自动绑定功能，事实上没有。你也不能直接访问设计器中的自定义控件属性。算是有一点小小的遗憾！！！！！希望在以后的版本中能够解决。
下面的代码显示了如何通过代码将数据绑定到自定义控件并且自定义控件属性：
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
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可在浏览器上面运行该项目。构建过程比正常的Silverlight项目花的时间更长。你可能需要等待好几秒才能看见浏览器弹出来。
下面的截图显示了运行中的UXDateTimePicker。点击“Hire Date’s picker”，你可以看见一款带有优雅模拟时钟的日历。值得注意的是，日期和时间一定要选择正确。下载示例！请注意，你需要再你的本地SQL服务器上安装 Northwind数据库。
最新评论