AvalonControlsLibrary DatePicker refactored

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

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!” :D

Download Demo Project

kick it on DotNetKicks.com

About these ads

12 thoughts on “AvalonControlsLibrary DatePicker refactored

  1. Pingback: WPF DatePicker « C# Disciples

  2. Hi,

    I need some suggestion to incorporate the Vista style of date selection. Can anyone offer me some advice?

    I have add an addition DataTemplate such that it will return the Month in String. By “hardcoding” i can get the different style to load different presentation. I intended to have a flag to store the current view.

    CurrentView.Month will shows the no. of days in the month
    CurrentView.Year will show the no. of months(12) in the year
    //Not Yet Implemeneted (as below)
    CurrentView.Decade will show the various decade grouping
    1900-1910 | 1910-1920 | 1920-1930 | 1930-1940 …
    CurrentView.Century will show the various century grouping
    1700-1800 | 1800-1900 | 1900-2000 | 2000-2100

    Questions:
    1. How do i incorporate a TemplateSelector that will auto select the correct datatemplate to use for the “DayCellTemplate”
    2. Currently, I have not managed to make the YearView align correctly. It displayed March, even though the “textbox” correctly show January 1, 2008.

    Thanks and Best Regards,
    Zuff

  3. Hi all,
    Plz help me to update DatePicker control that support user can choose date format (in combobox). Exp: I want to view date with format: mm/dd/yyyy or yyyy/mm/dd … And also support user fill date by typed with above defined format.

  4. Hi Marlon,

    Thanks for sharing all of your hard work, I really appreciate it. I was tinkering around with your DatePicker here and created a “Halloween” look to it. This, then, gave me an idea to place this into the ListView I have been working on in CodeProject. Would you mind if I used your DatePicker I modified to write an article about it on CodeProject? I would, of course, reference you and this web site. Thanks Marlon..

    Matt

  5. Hi, one must be able to localize it depending of the user logged in to the application. The month and day names in correct language for example.
    Now is even November spelled wrong (Novemeber) and it crashes when you select it.

    Ola

  6. Hello Marlon,
    I have something that will make my brains to explode. There is a TextBox inside the DatePicker, this TextBox has a Border that is not the same as the outer border… this is a inner border.
    Well, this Border becomes evident when you change the control background. The inner border stays white. I would like to visualy dissapear that border, but I can’t find an easy way. Do you have a way to rid off it?

  7. Sorry Marlon… I have just read that you’re not supporting this anymore… And for some reason I though that your DatePicker was the same as the WPF Toolkit DatePicker. My fault.
    Keep the good work. Cya.

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