Geeks With Blogs
Silverlighting... Ramblings on Silverlight and occasionally WPF


Using DatePicker control in Silverlight

A simple primer to the DatePicker control.  In Windows Forms, there is a control called DateTimePicker which allows you to select a date from a dropdown list or a Calendar grid with dates.  Silverlight 3 and 4 also have a similar control though slightly different in its functionality.

The DatePicker control in Silverlight enables you to select a date by either typing it into a text field or by using a drop-down Calendar control.  When you type a date directly into a text field, the Text property of the DatePicker control gets set.
You can use the drag and drop approach to add the DatePicker control from the Toolbox to your XAML code.
Create a Silverlight 4 application using Visual Studio 2010.

Position the cursor in the XAML code between the <Grid></Grid> tags. Then, drag and drop the TextBlock control followed by the DatePicker control from the Toolbox. This results in the following XAML code.

<UserControl x:Class="DatePickerDemo.MainPage"
    d:DesignHeight="300" d:DesignWidth="400"
    <Grid x:Name="LayoutRoot" Background="White">
<TextBlock Height="27" HorizontalAlignment="Left" Margin="42,31,0,0" Name="textBlock1" Text="text?Block1" VerticalAlignment="Top" Width="72" />
        <sdk:DatePicker Height="23" HorizontalAlignment="Left" Margin="10,10,0,0" Name="datePicker1" VerticalAlignment="Top" Width="120" />

Set the Text of the TextBlock control to BirthDate. Now, modify some of the DatePicker properties as shown in the below code.  

<UserControl xmlns:basics="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"  x:Class="SilverlightApplication1.Page"
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">
<TextBlock Height="27" HorizontalAlignment="Left" Margin="42,31,0,0" Name="textBlock1" Text="Birthdate:" VerticalAlignment="Top" Width="72" />
       <sdk:DatePicker Height="27" HorizontalAlignment="Left" Margin="120,27,111,0" Name="datePicker1" VerticalAlignment="Top" Width="151" Background="PaleTurquoise" IsEnabled="True" IsTodayHighlighted="true" IsDropDownOpen="True" />

The Background property sets the background for the control. The Height and Width specify the size of the control and IsEnabled specifies whether the control is enabled or not. The IsTodayHighlighted property determines whether the current date is highlighted in the Calendar that is displayed.  The dropdown Calendar is not initially visible but only appears after you click the button. The IsDropDownOpen property is used to make it visible.

There are plenty of more properties for this control that can be configured.

The DateValidationError event is raised if the DatePicker cannot convert whatever you typed to a valid date. Normally, this causes an exception, but you can set the ThrowException property to false in an event handler and prevent an exception from being raised, if that’s what you want.

Posted on Friday, July 2, 2010 1:11 PM Silverlight | Back to top

Comments on this post: Using DatePicker control in Silverlight

# re: Using DatePicker control in Silverlight
Requesting Gravatar...
how to set/make cursor focus on click of datepicker
Left by karthik on May 22, 2013 10:55 AM

Your comment:
 (will show your gravatar)

Copyright © Mamta | Powered by: