Thursday, August 14, 2008

WPF Calendar Control

For our time entry here at the office we use the infamous NetTERD (.Net Time and Expense Reporting Database). I created the NetTERD as an extension of the existing Access Database that was distributed upon arrival at the company.

Anyway, to get to the point of this post, I've never been happy with the way we select dates in the NetTERD. We've decided to go with a WPF version of the NetTERD that will add alot of features that will be helpful for creating estimates and tracking revisions and changes. The WPF has a lot to offer when it comes to user interfaces, so I decided to take some time and make a stylish calendar control for selecting the date in the new WPFTerd (Codename Adept).

After reading some posts about WPF over at the Hanselminutes blog I did a quick google image search for a calendar. I found a pretty good set of them at some random Pocono vacation site; so I horked the image and opened up Photoshop for a little workout of my Photoshop-Fu.

Not too bad for a programmer with no design skills. So we have our background image, now we fire up our Visual Studio 2008 and do some XAML coding. I specifically wanted to not use Blend for this because I need to start getting more familiar with the XAML, I don't want to fall victim to the Law of Leaky Abstractions. All the coding here was done with the VS 2008 Source Editor, not the designer.

After getting the date to display on my background how I wanted, I needed a way to work in the traditional version of the DatePicker control. I found a nice WPF DatePicker control by Marlon Grech and decided I could bend it to my will. I changed the style of the DatePicker a little to make it work by clicking the bits of calendar on the upper right of the image. Just a couple Visibility="Collapsed" and changing the TriggerBox styles and Voila! we got something semi-respectable.

Check out the source if you are looking for something to hork as well. You'll need to download the AvalonControlLibrary and add a reference to it also. Fair warning, it is statically sized, I'm hoping to make it sizeable later. I'd also like to do some kind of sexy animation with the DatePicker popup. Suggestions welcome.


1 comment: