Working with Silverlight/WPF DatePicker control


This article shows how we can use or customize Silverlight DatePicker control for different needs like
- Usual Date picker (Textbox with Calendar icon)
- Simple date selector (without textbox and attaching selection changed event to it)
- Customize date picker template to change styles
- And finally changing the datetime format


Default DatePicker control (with textbox):

Silverlight toolkit contains a date picker control, which by default provides a textbox with calendar icon besides it. Opens calendar as a popup upon clicking on icon, allowing user to select date from the calendar popup. This can be directly used in any of our Silverlight screens.



XAML Code:

 <sdk:DatePicker x:Name="datepicker" Width="150" Height="25">sdk:DatePicker>

DatePicker control has property called SelectedDate which is of type Nullable and can be used to get/set the selected date to the control.

C# code to read value or set value to the DatePicker:

datepicker.SelectedDate = DateTime.Now;

Customizing DatePicker template:

More often we need to customize the template for Silverlight inbuilt controls to apply custom styles and behaviors. In case of DatePicker we can easily customize the template to change the styles of the calendar icon as shown below.

To customize the template go to Blend and edit the template by right clicking on the control to get a copy of the template.


Customize template to hide textbox in Silverlight DatePicker:

Other most important use of DatePicker control is for Date Selection control on the screen and allow us to call custom event handler upon the change in the selected date.


Customize the template to hide textbox - find the control DatePickerTextBox and set the Visibility property to Collapsed.

 <sdk:DatePicker x:Name="datepicker" Style="{StaticResource DatePickerNewStyle}" Width="150" Height="25">sdk:DatePicker>

XAML code for DatePickerNewStyle:

<Style x:Key="DatePickerNewStyle" TargetType="sdk:DatePicker">
    <Setter Property="IsTabStop" Value="False"/>
    <Setter Property="Background" Value="#FFFFFFFF"/>
    <Setter Property="Padding" Value="2"/>
    <Setter Property="SelectionBackground" Value="#FF444444"/>
    <Setter Property="BorderBrush">
        <Setter.Value>
            <LinearGradientBrush EndPoint=".5,0" StartPoint=".5,1">
                <GradientStop Color="#FF617584" Offset="0"/>
                <GradientStop Color="#FF718597" Offset="0.375"/>
                <GradientStop Color="#FF8399A9" Offset="0.375"/>
                <GradientStop Color="#FFA3AEB9" Offset="1"/>
            LinearGradientBrush>
        Setter.Value>
    Setter>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="sdk:DatePicker">
                <Grid x:Name="Root">
                    <Grid.Resources>
                        <SolidColorBrush x:Key="DisabledBrush" Color="#8CFFFFFF"/>
                        <ControlTemplate x:Key="DropDownButtonTemplate" TargetType="Button">
                            <Grid FlowDirection="LeftToRight">
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualStateGroup.Transitions>
                                            <VisualTransition GeneratedDuration="0"/>
                                            <VisualTransition GeneratedDuration="0:0:0.1" To="MouseOver"/>
                                            <VisualTransition GeneratedDuration="0:0:0.1" To="Pressed"/>
                                        VisualStateGroup.Transitions>
                                        <VisualState x:Name="Normal"/>
                                        <VisualState x:Name="MouseOver">
                                            <Storyboard>
                                                <ColorAnimation Duration="0" To="#FF448DCA" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Background"/>
                                                <ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient">
                                                    <SplineColorKeyFrame KeyTime="0" Value="#7FFFFFFF"/>
                                                ColorAnimationUsingKeyFrames>
                                                <ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient">
                                                    <SplineColorKeyFrame KeyTime="0" Value="#CCFFFFFF"/>
                                                ColorAnimationUsingKeyFrames>
                                                <ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient">
                                                    <SplineColorKeyFrame KeyTime="0" Value="#F2FFFFFF"/>
                                                ColorAnimationUsingKeyFrames>
                                            Storyboard>
                                        VisualState>
                                        <VisualState x:Name="Pressed">
                                            <Storyboard>
                                                <ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Background">
                                                    <SplineColorKeyFrame KeyTime="0" Value="#FF448DCA"/>
                                                ColorAnimationUsingKeyFrames>
                                                <DoubleAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Highlight">
                                                    <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
                                                DoubleAnimationUsingKeyFrames>
                                                <ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient">
                                                    <SplineColorKeyFrame KeyTime="0" Value="#EAFFFFFF"/>
                                                ColorAnimationUsingKeyFrames>
                                                <ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient">
                                                    <SplineColorKeyFrame KeyTime="0" Value="#C6FFFFFF"/>
                                                ColorAnimationUsingKeyFrames>
                                                <ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient">
                                                    <SplineColorKeyFrame KeyTime="0" Value="#6BFFFFFF"/>
                                                ColorAnimationUsingKeyFrames>
                                                <ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient">
                                                    <SplineColorKeyFrame KeyTime="0" Value="#F4FFFFFF"/>
                                                ColorAnimationUsingKeyFrames>
                                            Storyboard>
                                        VisualState>
                                        <VisualState x:Name="Disabled">
                                            <Storyboard>
                                                <DoubleAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="DisabledVisual">
                                                    <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
                                                DoubleAnimationUsingKeyFrames>
                                            Storyboard>
                                        VisualState>
                                    VisualStateGroup>
                                VisualStateManager.VisualStateGroups>
                                <Grid Background="#11FFFFFF" HorizontalAlignment="Center" Height="18" Margin="0" VerticalAlignment="Center" Width="19">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="20*"/>
                                        <ColumnDefinition Width="20*"/>
                                        <ColumnDefinition Width="20*"/>
                                        <ColumnDefinition Width="20*"/>
                                    Grid.ColumnDefinitions>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="23*"/>
                                        <RowDefinition Height="19*"/>
                                        <RowDefinition Height="19*"/>
                                        <RowDefinition Height="19*"/>
                                    Grid.RowDefinitions>
                                    <Border x:Name="Highlight" BorderBrush="#FF6DBDD1" BorderThickness="1" Grid.ColumnSpan="4" CornerRadius="0,0,1,1" Margin="-1" Opacity="0" Grid.Row="0" Grid.RowSpan="4"/>
                                    <Border x:Name="Background" BorderBrush="#FFFFFFFF" BorderThickness="1" Background="#FF1F3B53" Grid.ColumnSpan="4" CornerRadius=".5" Margin="0,-1,0,0" Opacity="1" Grid.Row="1" Grid.RowSpan="3"/>
                                    <Border x:Name="BackgroundGradient" BorderBrush="#BF000000" BorderThickness="1" Grid.ColumnSpan="4" CornerRadius=".5" Margin="0,-1,0,0" Opacity="1" Grid.Row="1" Grid.RowSpan="3">
                                        <Border.Background>
                                            <LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
                                                <GradientStop Color="#FFFFFFFF" Offset="0"/>
                                                <GradientStop Color="#F9FFFFFF" Offset="0.375"/>
                                                <GradientStop Color="#E5FFFFFF" Offset="0.625"/>
                                                <GradientStop Color="#C6FFFFFF" Offset="1"/>
                                            LinearGradientBrush>
                                        Border.Background>
                                    Border>
                                    <Rectangle Grid.ColumnSpan="4" Grid.RowSpan="1" StrokeThickness="1">
                                        <Rectangle.Fill>
                                            <LinearGradientBrush EndPoint="0.3,-1.1" StartPoint="0.46,1.6">
                                                <GradientStop Color="#FF4084BD"/>
                                                <GradientStop Color="#FFAFCFEA" Offset="1"/>
                                            LinearGradientBrush>
                                        Rectangle.Fill>
                                        <Rectangle.Stroke>
                                            <LinearGradientBrush EndPoint="0.48,-1" StartPoint="0.48,1.25">
                                                <GradientStop Color="#FF494949"/>
                                                <GradientStop Color="#FF9F9F9F" Offset="1"/>
                                            LinearGradientBrush>
                                        Rectangle.Stroke>
                                    Rectangle>
                                    <Path Grid.ColumnSpan="4" Grid.Column="0" Data="M11.426758,8.4305077 L11.749023,8.4305077 L11.749023,16.331387 L10.674805,16.331387 L10.674805,10.299648 L9.0742188,11.298672 L9.0742188,10.294277 C9.4788408,10.090176 9.9094238,9.8090878 10.365967,9.4510155 C10.82251,9.0929432 11.176106,8.7527733 11.426758,8.4305077 z M14.65086,8.4305077 L18.566387,8.4305077 L18.566387,9.3435936 L15.671368,9.3435936 L15.671368,11.255703 C15.936341,11.058764 16.27293,10.960293 16.681133,10.960293 C17.411602,10.960293 17.969301,11.178717 18.354229,11.615566 C18.739157,12.052416 18.931622,12.673672 18.931622,13.479336 C18.931622,15.452317 18.052553,16.438808 16.294415,16.438808 C15.560365,16.438808 14.951641,16.234707 14.468243,15.826504 L14.881817,14.929531 C15.368796,15.326992 15.837872,15.525723 16.289043,15.525723 C17.298809,15.525723 17.803692,14.895514 17.803692,13.635098 C17.803692,12.460618 17.305971,11.873379 16.310528,11.873379 C15.83071,11.873379 15.399232,12.079271 15.016094,12.491055 L14.65086,12.238613 z" Fill="#FF2F2F2F" HorizontalAlignment="Center" Margin="4,3,4,3" Grid.Row="1" Grid.RowSpan="3" RenderTransformOrigin="0.5,0.5" Stretch="Fill" VerticalAlignment="Center"/>
                                    <Ellipse Grid.ColumnSpan="4" Fill="#FFFFFFFF" HorizontalAlignment="Center" Height="3" StrokeThickness="0" VerticalAlignment="Center" Width="3"/>
                                    <Border x:Name="DisabledVisual" BorderBrush="#B2FFFFFF" BorderThickness="1" Grid.ColumnSpan="4" CornerRadius="0,0,.5,.5" Opacity="0" Grid.Row="0" Grid.RowSpan="4"/>
                                Grid>
                            Grid>
                        ControlTemplate>
                    Grid.Resources>
                    <Grid.ColumnDefinitions>
                        
                        <ColumnDefinition Width="Auto"/>
                    Grid.ColumnDefinitions>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisual"/>
                                Storyboard>
                            VisualState>
                        VisualStateGroup>
                        <VisualStateGroup x:Name="ValidationStates">
                            <VisualState x:Name="Valid"/>
                            <VisualState x:Name="InvalidUnfocused">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ValidationErrorElement">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>VisibleVisibility>
                                            DiscreteObjectKeyFrame.Value>
                                        DiscreteObjectKeyFrame>
                                    ObjectAnimationUsingKeyFrames>
                                Storyboard>
                            VisualState>
                            <VisualState x:Name="InvalidFocused">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ValidationErrorElement">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>VisibleVisibility>
                                            DiscreteObjectKeyFrame.Value>
                                        DiscreteObjectKeyFrame>
                                    ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsOpen" Storyboard.TargetName="validationTooltip">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <sys:Boolean>Truesys:Boolean>
                                            DiscreteObjectKeyFrame.Value>
                                        DiscreteObjectKeyFrame>
                                    ObjectAnimationUsingKeyFrames>
                                Storyboard>
                            VisualState>
                        VisualStateGroup>
                    VisualStateManager.VisualStateGroups>
                    <System_Windows_Controls_Primitives:DatePickerTextBox x:Name="TextBox" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.Column="0" Padding="{TemplateBinding Padding}" SelectionBackground="{TemplateBinding SelectionBackground}" Visibility="Collapsed"/>
                    <Border x:Name="ValidationErrorElement" BorderBrush="#FFDB000C" BorderThickness="1" Grid.Column="0" CornerRadius="1" Visibility="Collapsed">
                               
                        <Grid Background="Transparent" HorizontalAlignment="Right" Height="12" Margin="1,-4,-4,0" VerticalAlignment="Top" Width="12">
                            <Path Data="M 1,0 L6,0 A 2,2 90 0 1 8,2 L8,7 z" Fill="#FFDC000C" Margin="1,3,0,0"/>
                            <Path Data="M 0,0 L2,0 L 8,6 L8,8" Fill="#FFFFFF" Margin="1,3,0,0"/>
                        Grid>
                    Border>
                    <Button x:Name="Button" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.Column="1" Foreground="{TemplateBinding Foreground}" Margin="2,0,2,0" Template="{StaticResource DropDownButtonTemplate}" Width="20"/>
                    <Grid x:Name="DisabledVisual" Grid.ColumnSpan="2" IsHitTestVisible="False" Opacity="0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                        Grid.ColumnDefinitions>
                        <Rectangle Fill="#8CFFFFFF" RadiusY="1" RadiusX="1"/>
                        <Rectangle Grid.Column="1" Fill="#8CFFFFFF" Height="18" Margin="2,0,2,0" RadiusY="1" RadiusX="1" Width="19"/>
                    Grid>
                    <Popup x:Name="Popup"/>
                Grid>
            ControlTemplate>
        Setter.Value>
    Setter>
Style>

To handle selection changed event - subscribe to the DatePicker SelectionChanged event as shown in below example
code.

   datepicker.SelectedDateChanged   = CalendarSelectedDateChanged;
   private void CalendarSelectedDateChanged(object sender, SelectionChangedEventArgs e)
   {
      DateTime selectedDate = datepicker.SelectedDate.Value.Date;
   }
Changing the DateTime format:

Date picker control doesn’t provide us any direct properties with which we can change the date format. Alternatively, we can change format of the local culture by setting the DateTimeFormat for the current culture to apply it throughout the application. Sample code is shown below to set ShortDate format to “dd/MM/yyyy”.

 private void Application_Startup(object sender, StartupEventArgs e)
   {
      this.RootVisual = new CalendarControl();
      Thread.CurrentThread.CurrentCulture = (CultureInfo)Thread.CurrentThread.CurrentCulture.Clone();
      Thread.CurrentThread.CurrentCulture.DateTimeFormat.ShortDatePattern = "dd/MM/yy";
   }


Happy developing...

Related tags

Customize Calendar Control, SIlverlight Calendar Control