Sunday, December 26, 2010

Calendar Control for Windows Phone 7 (WP7)

For my first WP7 application, Diabetes Manager, I needed a calendar control that would give users an easy way to enter their daily data. Unfortunately WP7 does not provide any calendar control; it does provide a Date and Time picker. But the picker control did not work for me as far as user experience is concerned. And since I did not find anything on the internet, I decided to write my own.

My calendar control gives users a view of the entire month and  they can click on any day to enter data for that day. The control is made up of two sections :

a) Month and Year selector at the top and
b) Grid of days at the bottom.

Users can navigate between months by clicking on left/right buttons and selecting a day would launch a data entry form.
The calendar control also provides visual cues via color scheme. For instance dates with no data are indicated with default white color; whereas dates with data are indicated with yellow color. Current date is indicated by Orange color.
The rounded rectangles are achieved by using a combination of Rectangle Shape with rounded borders and transparent button (which makes it click able).

IMPORTANT:  To display the different color schemes (white, yellow, orange) for different states, I initially set the Foreground property of the Button. But it would always revert back to the original color (White in this case). The workaround is to define button styles for various states in XAML as shown here and use it in the code as follows:

btn.Style = this.Resources["HasDataButtonStyle"] as Style;

I posted the entire source code for this control on Codeplex: