Recently I received some requests from people to support some more styling for the DatePicker control. The initial idea for the DatePicker was to create a “lookless” control and then users would create a ControlTemplate to change the look and feel of the control (which is still 100% possible, see here for more info). Yet sometimes users do not want to totally change the look of the control, sometimes it’s more a matter of changing colors and minor things like that. So I decided to make the DatePicker support some more styling so that users don’t need to create a new ControlTemplate for the DatePicker if they only need to change minor things in the DatePicker UI.
As you can see in the image above I added 5 new properties for styling the control. All of these properties are optional and if they are not set, a default value will be set for you.
DayCellTemplate
This property accepts a DataTemplate where the user can specify how each Day cell should look. The DataTemplate is fed with a DayCell object as DataContext. The DayCell class has the following properties which you can use in the DataTemplate
| Property Name | Type | Description |
| DayNumber | int | Represents the Day number |
| MonthNumber | int | Represents the Month number |
| YearNumber | int | Represents the Year number |
| IsEnabled | bool | Flag that indicates if the item falls out of the MinDate and MaxDate range |
| IsInCurrentMonth | bool | Flag that indicates if the item is in the current selected month |
Here is a sample DataTemplate for the DayCellTemplate.
<DataTemplate>
<Border Name="border">
<TextBlock Text="{Binding DayNumber}" Name="dayCell"/>
</Border>
<DataTemplate.Triggers>
<!--This trigger is to do some thing with the template when an item is selected-->
<DataTrigger Binding="{Binding RelativeSource={
RelativeSource AncestorType={x:Type ListBoxItem}},
Path=IsSelected}"
Value="True">
<Setter Property="Background" Value="Blue" TargetName="border"/>
</DataTrigger>
<!--This is for those dates that fall out of the MinDate and MaxDate.-->
<DataTrigger Binding="{Binding IsEnabled}" Value="False">
<Setter Property="Background" Value="Gray" TargetName="border"/>
</DataTrigger>
<DataTrigger Binding="{Binding IsInCurrentMonth}" Value="False">
<Setter Property="Foreground" Value="Gray" TargetName="dayCell"/>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
So basically the DayCellTemplate will give you a lot of flexibility in terms of what you can do with the UI of the DatePicker because you can make the Day cell look however you want without the need of re building the whole UI for the control.
DayHeaderTemplate
The DayHeaderTemplate is again another DataTemplate, this time it will be a DataTemplate for the Header Day cell which basically is the Text -> Sun, Mon, Tue etc.. The DataTemplate that you set as being the DayHeaderTemplate will be passed a string object as DataContext that contains the Text for the Header (ex. Mon, Tue etc..) Here is an example of a DataTemplate that can be applied for the DayHeaderTemplate property.
<DataTemplate>
<Border Background="Yellow">
<TextBlock Foreground="Lime" Text="{Binding}"/>
</Border>
</DataTemplate>
MonthBackButtonStyle/MonthForwardButtonStyle
These two properties are the styles for the back and forward month navigation buttons of the DatePicker. Basically you can apply a style for the Back and Forward button in any way you like. So you may decide even to create a ControlTemplate for these two buttons which would be quite easy. Something like this….
<Style TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border BorderBrush="Pink" Width="20" BorderThickness="2">
<TextBlock Text="<" FontWeight="Bold"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
MonthSelectorStyle
Last but not least is the MonthSelectorStyle property. This property enables you to set a style for the Months drop down list aka ComboBox. Since here we are setting a scyle for a ComboBox a user has full control over that combobox. One can decide to do a ControlTemplate for the ComboBox or maybe just set an ItemTemplate for the elements inside it… Here is a style that I used in the demo app of the DatePicker…
<Style TargetType="ComboBox">
<Setter Property="Background" Value="Yellow"/>
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType="ComboBoxItem">
<Setter Property="Background" Value="Yellow"/>
</Style>
</Setter.Value>
</Setter>
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock Foreground="Red" Text="{Binding}"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
Conclusion
I think that with the introduction of these properties the DatePicker control will be much more easy to use and re style. Again I would suggest that if you need to totally re arrange the look of this control the best way would be to use a ControlTemplate and change the whole look of the control, yet if all you need is to change some colors and other minor things, these new properties will help you out in the process.
The new version of the DatePicker will be available in the AvalonControlsLibrary v3, yet I know you can’t wait until you get your hands on this so I created a demo app for you 😀
I am open to suggestions as usual! Please let me know if there is something missing or something that you would like to have in YOUR AvalonControlsLibarary DatePicker 🙂
And as my friend Sacha Barber says – “It’s all good!” 😀
