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