Changing DatePicker in Silverlight to show current date

This past weekend during a conversation about Silverlight controls at the San Diego Silverlight Education Day, someone asked about the DatePicker control and why the “15” is there and how come they can’t change it.  Here’s the control that was being referred to:

The calendar displays an icon to the right of the text box area which, when clicked, displays a drop-down calendar picker.  The icon always says “15” and is intended to look like a little calendar date sheet (you know, like those desk calendars).

The question was how to change that icon.  Well, easily.  You can easily edit the template using Blend and drill into the UI parts and change it.  I opened Blend, chose to edit the template, then edit the Button template and you’ll see that the “15” is actually a Path:

Now that I know where that template is, I can put anything i want there to replace the Path data to anything I want.  But the question was raised as to why it doesn’t show the current date text instead.  So on the plane ride back I did a quick refactor to see how easy that could be done.

After getting the Ms-PL licensed source code for the DatePicker control from the Silverlight Toolkit, I had access to the full source of the control to get the inner guts.  Here’s what I did. 

First, I changed generic.xaml (located in Themes folder) definition of DatePicker style/template.  I changed the Path to a ContentPresenter (about line 437 in the generic.xaml file).  I removed the Path and replaced it with this:

   1: <ContentPresenter x:Name="DropDownDateText" HorizontalAlignment="Center" Margin="0,0,0,0" 

   2:     VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5" Grid.Column="0" Grid.Row="1" 

   3:     Grid.ColumnSpan="4" Grid.RowSpan="3"/>

Once I had that in place I just went into OnApplyTemplate in DatePicker.cs and after the call to base.OnApplyTemplate() (line 851) I added some additional code:

   1: // change the date to the current date

   2: string DateDay = DateTime.Now.Day.ToString(CultureInfo.CurrentUICulture);

   3:  

   4: // get the Button template and insert the content as current date text

   5: Button b = this.GetTemplateChild(DatePicker.ElementButton) as Button;

   6: TextBlock tb = new TextBlock();

   7: tb.FontFamily = new FontFamily("Arial Bold");

   8: tb.FontSize = 9.5;

   9: tb.FontStretch = FontStretches.Expanded;

  10: tb.UseLayoutRounding = true;

  11: tb.Text = DateDay;

  12: b.Content = tb;

What this does is basically use the local time information to get the current Day text and put that TextBlock as the Content for the button…the result is that the DatePicker now will display the number for the current Date (I took this screenshot on 05 OCT 2009):

So if I wanted this then I could recompile the source and use my custom DatePicker in my application.  The key difference in this modification is that I’m not using a Path, but a TextBlock.

I’m not sure if this is useful, but since the question was posed and I had time to kill, I thought I’d post my findings.  Having access to the source control for all the Silverlight controls is a great way to customize/extend exactly what you need as well as serving as a great learning resource for you in your control development.

Hope this helps!