Windows Phone 7 - DatePicker and TimePicker【转】

In this artcile we will discuss about DatePicker and TimePicker control in Window Phone 7. DatePicker and TimePicker control comes along with Silverlight Windows Phone Toolkit. DatePicker and TimePicker are important controls to select date in Windows Phone 7.

Download Silverlight Windows Phone Toolkit

Let's write code to demonstrate how to use.

Step 1: Create a silverlight for Windows Phone project.

Step 2: Add reference of Microsoft.Phone.Controls.Toolkit.dll

Step 3: Add namespace of Microsoft.Phone.Controls.Toolkit in MainPage.xaml.

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

Step 4: Create instance of DatePicker and TimePicker in MainPage.xaml

<toolkit:DatePicker x:Name="datePicker" Margin="20, 0,0,0" Header="Select Date" Value="01/04/2011"/>

<toolkit:TimePicker x:Name="timePicker" Margin="20, 100,0,0" Header="Select Time" Value="20:20"/>

ValueStringFormat property of DatePicker and TimePicker is used to format the date and time.

Run the application, you will get date and time format as shown below.



Now apply ValueStringFormate to DatePicker and TimePicker.

<toolkit:DatePicker x:Name="datePicker" Margin="20, 0,0,0" Header="Select Date" Value="01/04/2011"ValueStringFormat="{}{0:D}"/>

<toolkit:TimePicker x:Name="timePicker" Margin="20, 100,0,0" Header="Select Time" Value="20:20"ValueStringFormat="{}{0:T}"/>

Run the application again and you will notice that date and time formatting has been applied.



Refer Standard Date and Time Format Strings for more options.

Step 5: There is one important eventhandler of DatePicker and TimePicker.

ValueChanged event triggers when value of DatePicker or TimePicker is changed.

Paste below code in the constructor of the MainPage.xaml.cs to attach ValueChanged event handler to DatePicker and TimePicker.

public MainPage()
{
InitializeComponent();
this.datePicker.ValueChanged += new EventHandler<DateTimeValueChangedEventArgs>(datePicker_ValueChanged);
this.timePicker.ValueChanged += new EventHandler<DateTimeValueChangedEventArgs>(timePicker_ValueChanged);
}

Alternative we can add event handler in MainPage.xaml as well like below.

<toolkit:DatePicker x:Name="datePicker" Margin="20, 0,0,0" Header="Select Date" Value="1/4/2011"ValueChanged="datePicker_ValueChanged" />

<toolkit:TimePicker x:Name="timePicker" Margin="20, 100,0,0" Header="Select Time" Value="20:20"ValueChanged="timePicker_ValueChanged" />

Step 6: Now place below code in MainPage.xaml.cs.

void datePicker_ValueChanged(object sender, DateTimeValueChangedEventArgs e)
{
DateTime date = (DateTime)e.NewDateTime;
MessageBox.Show(date.ToString("d"));
}

void timePicker_ValueChanged(object sender, DateTimeValueChangedEventArgs e)
{
DateTime date = (DateTime)e.NewDateTime;
MessageBox.Show(date.ToString("t"));
}

Now run the application you will get below screen like shown. If you notice the icon in the application bar won't be displayed.



Add Toolkit.Content folder and cancel image with name ApplicationBar.Cancel.png and done image with name ApplicationBar.Check.png.



Now run the application again and the application bar icon will be visible now.



On click of Select Date text box below screen will appear.



On click of Done button from application bar value changed event will trigger and the message box will appear as shown below. ValueChanged event will trigger only if date is changed.



On click of Select Time text box below screen will appear.



On click of Done button from application bar value changed event will trigger and the message box will appear as shown below. ValueChanged event will trigger only if time is changed.



One can add DatePicker and TimePicker control dynamically also like below.

DatePicker datePicker = new DatePicker();
TimePicker timePicker = new TimePicker();

this.ContentPanel.Children.Add(datePicker);
this.ContentPanel.Children.Add(timePicker);

The ValueString property of DatePicker and TimePicker returnds the selected value of date and time as string.

MessageBox.Show(datePicker.ValueString);

This ends the article of DatePicker and TimePicker in Windows Phone 7.

原文连接：http://www.dotnetspeaks.com/DisplayArticle.aspx?ID=172