Changing the border for a DatePicker control on Windows Phone 7

There is a neat package of controls that comes pre-bundled with the Silverlight Toolkit for Windows Phone. It saves you a lot of time on creating custom user controls and at the same time keeps your application consistent with the main Windows Phone UI. One particular case I want to talk about today is that related to control customizations. Specifically, I tried to customize a DatePicker border.

The whole idea was triggered by this question. Surprisingly, setting the border directly via XAML had no effect whatsoever - I was able set the border thickness, but not the color. Not something out of the normal flow of things, so I fired up Expression Blend, referenced the control library, added the DatePicker control on the main page and tried to get its template. I already performed a similar "operation" on a ComboBox control and didn't expect this one to be any more complicated. However, a surprise was waiting:

No template that I can edit - pretty disappointing to see. After a minute of thinking I realized that somehow the default control properties are set anyway, and thanks to the fact that the toolkit has the source code available, I was able to take a look under the hood and see what's up.

And here is what I found out in the first place - all controls have their visual properties defined in one theme file - Generic.xaml, located in the Themes folder.

A template file is always a good place to start when there are visual property problems, so I scrolled a bit to the point when I saw the DatePicker control listed:

I noticed one weird thing about this particular style - it had no BorderBrush setter defined, therefore it makes total sense that the BorderBrush manual setting didn't work. An easy fix was implemented pretty quick.

In the main style, I added the following setter:

<Setter Property="BorderBrush" Value="Azure"/>

Of course you can set this to a different color or even to a static resource that will be linked to the phone theme. I am using azure just for testing purposes.

The picker you are seeing is nothing but a button, so I scroll down to the button part and add this property reference:

BorderBrush="{TemplateBinding BorderBrush}"

This links the border brush of the button to the border brush of the template. Nothing fancy here. Overall, you should have this:

Recompile the library and reference it instead in your project.

NOTE: If you have the toolkit installed on your system, the default reference for Microsoft.Phone.Controls.Toolkit will be taken from GAC instead of what you built. Either rename the library or make a local copy in the project folder.

Once done, you will be able to set the brush as you want it: