Over a million developers have joined DZone.
Platinum Partner

Changing the border for a DatePicker control on Windows Phone 7

· Mobile Zone

The Mobile Zone is brought to you in partnership with CA Technologies.  Spending too much time coding your mobile backend? CA Mobile App Services does the work for you.

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:

The Mobile Zone is brought to you in partnership with CA Technologies. Read the ebook: Accelerating Enterprise Mobile and IoT App Development to learn more.

Topics:

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}