November 15, 2009

WPFToolkit Calendar Control Step trough

Posted in Uncategorized tagged WPF Toolkit, XAML at 14:07 by winglinglang

In this section we will dissect the wpf toolkit calendar control. To learn more on how Microsoft codes for wpf.

One of the challenges I had writing my own calendar control and some of the samples I looked at on the web was to display the day’s in the calendar control. At first it sounds easy, you use a uniform grid control with 7 columns and bind to a list of day’s, another solution was to use a list box and dived the days into weeks, then you have a week template and list box template. All very well. The problem was where do you store the list of day’s neatly away from the controls user yet make it easy to access for the data binding and flexible for new templates and styles to be applied.

Let see how the toolkit team did it.

WPF Toolkit Calendar Control

WPF ToolKit Calendar Control

Lets start at the Calendar style, From the main Calendar style they have a CalendarItem.  The CalendarItem is a WPF Control on its own, a nice future of the Toolkit Calendar is that it support multiple Views, this is all handled by the CalendarItem style. Having the Calendar Control Contain one CalendarItem is a clever way of Hiding the Control Code from the actual code the developer will want to see when consuming the control.

The Toolkit CalendarItem use a Grid to display the day’s with 7 columns and 7 rows fields called ‘PART_MonthView‘ the grid is contained in parent grid with 2 rows and 3 Columns. The parent grid displays the left and right arrows and the heading.

Filling the Days in the PART_MonthView

After the Control Template is set, The C# code extracts all the Template ‘PARTs’ and assign it too internal variables prefixed with underscore. the one we are interested in is ‘_monthView’ which is the grid with 7 rows and 7 columns.

_monthView is populated with ‘CalendarDayButton’ Controls using a standard loop. The CalendarItem Control Populates the grid via a function ‘PopulateGrids()’

PopulateGrids() Sets the CalendarDayButton Owner and assign the events and binds the style property.

private void SetMonthModeDayTitles() Sets the Day Titles by looping trought the 1 ste 7 cells  in the Month View Grid. Then the day’s are set using the SetMonthModeCalendarDayButtons function.

Here is a quick view of this function.

private void SetMonthModeCalendarDayButtons()
{
 DateTime firstDayOfMonth = DateTimeHelper.DiscardDayTime(DisplayDate);
 int lastMonthToDisplay = GetNumberOfDisplayedDaysFromPreviousMonth(firstDayOfMonth);
 bool isMinMonth = DateTimeHelper.CompareYearMonth(firstDayOfMonth,DateTime.MinValue) <= 0;
 bool isMaxMonth = DateTimeHelper.CompareYearMonth(firstDayOfMonth,DateTime.MaxValue) >= 0;
 int daysInMonth =_calendar.GetDaysInMonth(firstDayOfMonth.Year, firstDayOfMonth.Month);
 int count = ROWS * COLS;

 //Loop the cell's ignoring the first seven as they contain the day names for the title.
 for (int childIndex = COLS; childIndex < count; childIndex++)
 {
 CalendarDayButton childButton = _monthView.Children[childIndex] as CalendarDayButton;
 Debug.Assert(childButton !=null);
 int dayOffset = childIndex - lastMonthToDisplay- COLS;

  //Set DayButton Control with the new Content.
 if ((!isMinMonth || (dayOffset >= 0)) &&(!isMaxMonth || (dayOffset < daysInMonth)))
 {
 DateTime dateToAdd =_calendar.AddDays(firstDayOfMonth, dayOffset);
 //Sets and Calculates all the Properties for the Day
 SetMonthModeDayButtonState(childButton, dateToAdd);
 childButton.DataContext = dateToAdd;
 childButton.SetContentInternal(DateTimeHelper.ToDayString(dateToAdd));
 }
 else
 {
 SetMonthModeDayButtonState(childButton, null);
 childButton.DataContext = null;
 childButton.SetContentInternal(DateTimeHelper.ToDayString(null));
 }
 }
}

• You Hide the complexities of the month and day calculations by wrapping the actual control by anouther more userfriendly control. This they did by wrapping CalendarItem with Calendar Control. CalendarItem is in a separate name space than the Calendar control, this hide’s the control from normal developers only intrested in the Calendar, but for more advance coding you can still access the the base control by adding the primitives names space.
• They do not recreate the Day Controls but rather just update the content’s.
• There was no magic to make this work its basic clever wpf and C# coding. What was intresting to me how much they still did in code.  When starting WPF you tend to do everything in WPF, and that is not always the correct or best way of doing things.

You can find the complete WPF ToolKit and source code here.

http://wpf.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=29117

Permalink Leave a Comment