WPF Toolkit: Calendar & DatePicker Walkthrough
The WPF team is excited to release version 1 of our new WPF Calendar and DatePicker control starting on Monday, October 27, 2008! Binaries and source code for the Calendar and DatePicker can be downloaded at the WPF Codeplex site.
Feature Walkthrough
Version 1 of the WPF DatePicker and Calendar include many of the features that Line-of-Business (LOB) application authors need to create rich end-user experiences for viewing and selecting their dates. Features such as BlackoutDates, Multi-Range Selection, and built-in functionality like keyboard navigation will help developers get their applications up and running quickly. Developers can also create unique, branded experiences using the DatePicker and Calendar’s styling features and advanced options such custom display ranges and week day orderings. The following is a walkthrough of the major Calendar and DatePicker features explaning how to use them in your application.
Blackout Dates
The Calendar and DatePicker controls let one specify dates that are not considered acceptable dates for selection according to business rules. By default, no dates are off limits but with just a few simple lines of XAML the controls indicate the specified Blackout dates.
<c:Calendar>
<c:DatePicker.BlackoutDates>
<c:CalendarDateRange Start="4/1/2008" End="4/6/2008"/>
<c:CalendarDateRange Start="4/14/2008" End="4/17/2008"/>
</c:DatePicker.BlackoutDates>
</c:Calendar>
<c:DatePicker>
<c:DatePicker.BlackoutDates>
<c:CalendarDateRange Start="4/1/2008" End="4/6/2008"/>
<c:CalendarDateRange Start="4/14/2008" End="4/17/2008"/>
</c:DatePicker.BlackoutDates>
</c:DatePicker>
Selection Modes
The Calendar provides four modes of selection:
- SingleDate
- SingleRange
- MultipleRange
- None
Each of these specifies how date selection can be performed in the Calendar or DatePicker. SingleDate, the only option available for the DatePicker, only permits the user to select one day. SingleRange selection permits a single contiguous selection of sequential dates while MultipleRange selection removes this limitation and permits multiple ranges of any size. Below is an example of a Calendar using Multiple Range selection.
<c:Calendar SelectionMode="MultipleRange" />
First Day of the Week
The Calendar and DatePicker permit an alternate starting day of the week for those that prefer to change the default of Sunday
<c:Calendar FirstDayOfWeek="Monday" />
<c:DatePicker FirstDayOfWeek="Monday" />
Display Date
The Calendar and DatePicker, by default, initially displays Today’s date but if another default date is preferred one can set the DisplayDate to something else in the Calendar’s declaration.
<c:Calendar DisplayDate="10/17/2008" />
Display Mode
The Calendar and DatePicker provide three modes for the calendar allowing the user to navigate to their intended date simply and quickly.
The three modes provided are:
- Month Mode (the default shown so far)
- Year Mode
- Decade Mode
By clicking the Header Button (which displays viewable Month, Year, or Decade) one can change the display mode of the Calendar or DatePicker from Month Mode to Year Mode, allowing one to navigate in one-year increments; Clicking the button again will change the mode to Decade Mode, allowing one navigate in decade-long increments. To navigate back to a specific date from Decade Mode the user clicks the appropriate year button to return to Year Mode then the appropriate month button to return to Month Mode. The images below show Year Mode (on the left) and Decade Mode (on the right). The arrow points to the Header Button used for navigating Display Modes.
Styling & Design Time
The Calendar and DatePicker have a design time experience for both Expression Blend and the Visual Studio WPF Designer. Use the WPF Designer to quickly set your properties or Blend to dive into the templates to create a truly customized look and feel for your users.
Get Started with Calendar and DatePicker
Version 1 of the WPF Calendar and DatePicker include all of the above features and more. Check out the Calendar and DatePicker in the WPF Toolkit on www.codeplex.com/wpf starting October 28th!
1
2 Next >