Den is a DZone Zone Leader and has posted 460 posts at DZone. You can read more from them at their website. View Full User Profile

Changing the border for a DatePicker control on Windows Phone 7

02.03.2011
| 8212 views |
  • submit to reddit

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:

Comments

Derek Lakin replied on Fri, 2011/02/04 - 5:08am

As I detailed in my answer to the same question on StackOverflow, the best solution to this problem is not to modify the source code and use a custom version of the library, but to re-template the control accordingly in App.xaml (or some other linked resource dictionary), which follows the standard styles and templates model of lookless controls in Silverlight (and WPF).

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.