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">
                <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:

        <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! 🙂

Advertisements

December 19, 2011 - Posted by | C Sharp, WPF

25 Comments »

  1. Hi,

    Cool post! this worked great for WPF. But when i tried to run this on Silver light i get an error reguarding , x:Type not recoqnized.
    do u have any mattching style for Silverlight?

    Thanks

    Comment by Sasina | March 11, 2012 | Reply

  2. Thank you tarundotnet,

    I tried you solution and the project compiled but can not see the calendar.
    i left out these lines:

    because silverlight doesint recognize the CalendarItem do you think this might cause the issue???

    Thanks a lot, i appriciate it,
    Sasina

    Comment by Sasina | March 15, 2012 | Reply

  3. Thanks .. awesome solution to the problem. quick .. clean and simpler. Cheers

    Comment by gerdi | August 19, 2012 | Reply

  4. Thanks buddy. It helped.

    Comment by Abdul Mayeed Chowdhury | January 27, 2013 | Reply

  5. Thank you. That worked! 😀

    Comment by Flemming | March 20, 2013 | Reply

  6. THANKS!

    Comment by mike | April 24, 2013 | Reply

  7. Where to add style tag?

    Comment by vishal | May 18, 2013 | Reply

  8. Great thanks, though it’s a post long ago.

    Comment by YimingLU | August 5, 2013 | Reply

  9. I want to enlarge the icon near the texbox of the textbox, is this possible?

    Comment by lnodaba | August 17, 2013 | Reply

  10. Thank you very much!!

    Comment by ilmatte | September 22, 2013 | Reply

  11. Thank you very much. Working well .

    Comment by gijith | October 5, 2013 | Reply

  12. Nice work, you saved my time.

    Comment by Mohammad | April 9, 2014 | Reply

  13. Works great, thanks!

    Comment by MaGreen | May 16, 2014 | Reply

  14. Many thanks for this, works a treat.

    Comment by itsmcgregor | May 27, 2014 | Reply

  15. Amazing. Worked wonders!!! You’d think this functionality would be built in to the date picker.

    Comment by Naet | September 12, 2014 | Reply

  16. Thank you very much!

    Comment by cheng zi | October 10, 2014 | Reply

  17. Very helpful posting, thank a lot for your kindness. ^^

    Comment by Koy | January 23, 2015 | Reply

  18. Thanks! This saved me some time

    Comment by mbecker1234 | May 8, 2015 | Reply

  19. Thank you for great help!!

    Comment by Osamu Tasaka | July 28, 2016 | Reply

  20. Awesome!

    Comment by Stu Colson | August 6, 2016 | Reply

  21. My new favourite website. Thanks for posting all these tips

    Comment by Stu Colson | August 6, 2016 | Reply

  22. This solution is great!! I linked it up with the user settings so I resize the viewbox by multiplying the text size by 20. So if you have a text size of 12, the viewbox expands to 240 x 240. My users are ecstatic as some previous devs said this was impossible 🙂 I have also linked the colour preference to the background and works an absolute treat 🙂

    Comment by bu00ha | November 19, 2016 | Reply

  23. Thank you very much!! This was very helpful. Im also developing an app for touchscreen, thanks!

    Comment by Manuel | November 28, 2016 | Reply


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: