BlackWaspTM

This web site uses cookies. By using the site you accept the cookie policy.This message is for compliance with the UK ICO law.

Windows Presentation Foundation
.NET 4.0+

WPF Date Controls - Calendar

The sixty-fifth part of the Windows Presentation Foundation Fundamentals tutorial starts to look at the date controls provided by WPF. The first of these controls is Calendar, which allows the user to browse and select dates.

Display Modes

As described above, the Calendar has three different views, or display modes. These are the month, year and decade modes. To determine which mode is currently in use, or to change the mode, you can use the DisplayMode property. This returns a value from the CalendarMode enumeration, although plain text can be used in the XAML. The available values are Month, Year and Decade.

The following updated control causes the Calendar to start in year mode, displaying the two months that are both within the limit dates and in the same year as the display date.

<Calendar Name="Cal"
          DisplayDate="1999-12-31" 
          DisplayDateStart="1999-11-20"
          DisplayDateEnd="2000-01-20"
          DisplayMode="Year"
          DisplayDateChanged="Calendar_DisplayDateChanged"/>

Detecting a Display Mode Change

You can detect a change to the display mode by attaching to the DisplayModeChanged event. Let's update the code to show the display date and display mode in the TextBlock when either property changes. Start by adding the event to the control's XAML:

<Calendar Name="Cal"
          DisplayDate="1999-12-31" 
          DisplayDateStart="1999-11-20"
          DisplayDateEnd="2000-01-20"
          DisplayMode="Year"
          DisplayModeChanged="Cal_DisplayModeChanged"
          DisplayDateChanged="Calendar_DisplayDateChanged"/>

Replace the existing event code behind the window with the following methods:

private void Calendar_DisplayDateChanged(object sender, CalendarDateChangedEventArgs e)
{
    ShowInfo();
}

private void Cal_DisplayModeChanged(object sender, CalendarModeChangedEventArgs e)
{
    ShowInfo();
}

private void ShowInfo()
{
    if (Info != null)
    {
        var info = Cal.DisplayDate.ToString("yyyy-MM-dd")
                 + " - " + Cal.DisplayMode.ToString();
        Info.Text = info;
    }
}

Try running the program and changing the visible month and the display mode to see the events being raised.

Date Selection

Generally you will want to use a Calendar to allow the user to select a date, not just to browse a set of dates. The main property to use is SelectedDate, which returns a nullable DateTime. If no date is selected, the property returns null. To detect a change in the selection, you can register the SelectedDatesChanged event. This is raised when the user clicks a date in the grid, whilst in month mode.

To demonstrate, start by adding the event to the XAML for the Calendar:

<Calendar Name="Cal"
          DisplayDate="1999-12-31" 
          DisplayDateStart="1999-11-20"
          DisplayDateEnd="2000-01-20"
          DisplayMode="Year"
          DisplayModeChanged="Cal_DisplayModeChanged"
          DisplayDateChanged="Calendar_DisplayDateChanged"
          SelectedDatesChanged="Cal_SelectedDatesChanged"/>

We'll show the selected date in the TextBlock when the selection is changed:

private void Cal_SelectedDatesChanged(object sender, SelectionChangedEventArgs e)
{
    var info = Cal.SelectedDate == null
        ? "No selection"
        : Cal.SelectedDate.Value.ToString("yyyy-MM-dd") + " - Selected";
    Info.Text = info;
}

Try running the program and selecting dates to see the results.

Current Date Highlight

As you have seen, whenever today's date is visible, it is highlighted. This is useful when selecting a date in the near past or future, as the user does not have to work out the correct date, only the relative position to the current one. In some situations this may not be relevant. In such cases you can disable the highlight by setting the Boolean IsTodayHighlighted property to false.

<Calendar Name="Cal"
          IsTodayHighlighted="False"
          DisplayModeChanged="Cal_DisplayModeChanged"
          DisplayDateChanged="Calendar_DisplayDateChanged"
          SelectedDatesChanged="Cal_SelectedDatesChanged"/>
26 May 2014