Confessions of a .NET Developer!

How to enlarge or re-size Calendar in WPF DatePicker

It has been a long time since my last post!
Okay so in this short article, I will show you how to increase the size of a calendar in WPF 4.0 DatePicker. Since I’m currently working on a touchscreen application, it required me to create a larger calendar so that the user can touch it.
So as usual, like normal developers, I started googling for answers, but it was unsuccessful(maybe I need to improve my googling skills!). It required me to think a little more, but finally I got the solution! This is how I did:
You can edit the template of the calendar by wrapping it in a ViewBox. So now the calendar will fit according to the size of the ViewBox. Simples!

Here is the Style for the calendar:

        <Style x:Key="styleCalendar" TargetType="{x:Type Calendar}">
            <Setter Property="Template">
                    <ControlTemplate TargetType="{x:Type Calendar}">
                        <!-- Wrapping in ViewBox will enlarge calendar of that size.-->
                        <Viewbox Height="400"
                            <CalendarItem x:Name="PART_CalendarItem"
                                          Background="{TemplateBinding Background}"
                                          BorderBrush="{TemplateBinding BorderBrush}"
                                          BorderThickness="{TemplateBinding BorderThickness}"/>

And apply the style to the DatePicker:

        <DatePicker CalendarStyle="{StaticResource styleCalendar}" Height="25" HorizontalAlignment="Left" Name="datePicker1" Width="115" />

It will look something like this:

Re-size Calendar

Calendar Re-sized

I hope it helped, do leave your comments or suggestions for further improvements.

Happy coding! 🙂


December 19, 2011 Posted by | C Sharp, WPF | 25 Comments