Using the DatePicker control in Silverlight 5

Using the DatePicker control in Silverlight 5

This article introduces the DatePicker control present in the Silverlight Toolkit and shows how to use it in Silverlight applications.

The DatePicker control enables users to select dates using a Calendar like interface. It also includes a TextBox as part of its interface so that users can enter a date instead of selecting one from the Calendar.

The DatePicker control is not part of the Silverlight runtime, it is available in the Silverlight SDK. To use a control from the Silverlight SDK, you must add a reference to the assembly and include the appropriate XML namespace mapping in XAML.

For example,

  xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"

Let us see how to use this control.

Create a new Silverlight 5 application named SilverlightDemo.

You can see the DatePicker control in the Toolbox.

Add the DatePicker control from the Toolbox into your application between the <Grid></Grid> tags.

The XAML markup will look as follows:

<UserControl x:Class="SilverlightDemo.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d"

    xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"

    HorizontalAlignment="Stretch" VerticalAlignment="Stretch">

    <Grid x:Name="LayoutRoot" Background="White">

        <sdk:DatePicker Height="23" HorizontalAlignment="Left" Margin="49,77,0,0" Name="datePicker1" VerticalAlignment="Top" Width="120" />

    </Grid>

</UserControl>

Save, build, and execute the application. Click the calendar icon next to the Textbox in the DatePicker.

The output is shown in Figure 2.

The default date format of the The DatePicker control is M/dd/yyyy. To change the format, you either use the SelectedDateFormat property which allows one of two values: Long or Short, or set the current culture of the thread to a new culture, which will also affect the date format. You can also change number of properties of this control. Figure 3 shows an example of some properties that are configured for the control.

Add a TextBox and a Button control to the page and configure the XAML markup as follows:

<UserControl x:Class="SilverlightDemo.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d"

    xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"

    HorizontalAlignment="Stretch" VerticalAlignment="Stretch">

    <Grid x:Name="LayoutRoot" Background="White">

        <TextBox x:Name="txtDate" Height="20" Margin="49,124,182,156" Width="99"/>

        <sdk:DatePicker Height="23" HorizontalAlignment="Left" Margin="49,77,0,0" Name="datePicker1" VerticalAlignment="Top" Width="120" DisplayDateEnd="11/26/2012" SelectionBackground="#FFE83333" FontFamily="Georgia" FontSize="14" DisplayDateStart="{Binding Text, ElementName=txtDate, Mode=TwoWay}" />

        <Button Height="25" Margin="40,167,169,108" Width="94" Content="OK"/>

    </Grid>

</UserControl>

This markup sets the start date, end date, font style, selection background color, and binds the content of the text box to the DatePicker. A sample output is shown in Figure 4:

Some of the commonly used properties of the DatePicker control are:

Conclusion: This article covered the DatePicker control in Silverlight 5.