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">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Calendar}">
                <!-- Wrapping in ViewBox will enlarge calendar of that size.-->
                <Viewbox Height="400"
                         Width="400">
                    <CalendarItem x:Name="PART_CalendarItem"
                                  Background="{TemplateBinding Background}"
                                  BorderBrush="{TemplateBinding BorderBrush}"
                                  BorderThickness="{TemplateBinding BorderThickness}"/>
                </Viewbox>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
And apply the style to the DatePicker:
1
<DatePicker CalendarStyle="{StaticResource styleCalendar}" Height="25" HorizontalAlignment="Left" Name="datePicker1" Width="115" />
It will look something like this:
Re-size Calendar
Calendar Re-sized
Cool!
I hope it helped, do leave your comments or suggestions for further improvements.
Happy coding!

Comments

Post a Comment