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:
And apply the style to the DatePicker:
It will look something like this:
Cool!
I hope it helped, do leave your comments or suggestions for further improvements.
Happy coding!
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 > |
1
| < DatePicker CalendarStyle = "{StaticResource styleCalendar}" Height = "25" HorizontalAlignment = "Left" Name = "datePicker1" Width = "115" /> |
Cool!
I hope it helped, do leave your comments or suggestions for further improvements.
Happy coding!
Thank you so much. This was awesome
ReplyDelete