WPF 4 calendar control (calendar)

I have previously written two articles about the features related to the WPF 4 taskbar (taskbar. I believe that since the release of the vs2010 beta version, fans of WPF will certainly learn about some new controls and new functions of WPF 4 in the first time. Before Visual Studio 2010 is officially released tomorrow, let me introduce some functions and attributes of the calendar control in WPF 4. Let's prepare for the warm-up at the press conference tomorrow.

Create calendar Control

In WPF toolkit, the calendar control already exists. It is also easy to create the calendar control in WPF 4: 1. you can drag the calendar from the toolbox to the design window. 2. or directly write <calendar>Code.

 <  Window  X  :  Class  = "Wpfcontroltest. mainwindow"  Xmlns  = "Http://schemas.microsoft.com/winfx/2006/xaml/presentation" Xmlns  :  X  = "Http://schemas.microsoft.com/winfx/2006/xaml"  Title  = "Mainwindow"  Height  = "350"  Width  = "525">    <  Grid  > <  Calendar  Margin  = "0, 50, 0, 0" Name  = "Calendarctl"/> </  Grid  > </  Window  > 

Displaymode attribute

Displaymode is used to adjust the calendar display mode, dividedMonth,YearAndDecadeThe default value is month.

 
<CalendarMargin= "0, 50, 0, 0"Name= "Calendarctl"Displaymode= "Month"/>
 

The effects of these three modes are shown in:

Selectionmode attribute

The selectionmode attribute can be used to adjust the date selection method:None,Singledate,Singlerange,MultiplerangeNext, let's take a look at the effect on date selection.

1. None: you cannot select a date ~

2. Singledate: only the unique date can be selected ., You can only select a single and unique date such as 4.12.

 
<CalendarMargin= "0, 50, 0, 0"Name= "Calendarctl"Displaymode= "Month"Selectionmode= "Singledate"/>
 

3. Singlerange: select a set of date ranges ., You can drag the mouse in the calendar to select a group from 4.19 ~ The date range of 4.25, or use the Shift key to select the start and end dates with the mouse.

 
<CalendarMargin= "0, 50, 0, 0"Name= "Calendarctl"Displaymode= "Month"Selectionmode= "Singlerange"/>
 

4. Multiplerange: You can select multiple consecutive date ranges ., Press ctrl and drag the mouse to select multiple groups of date ranges.

<CalendarMargin= "0, 50, 0, 0"Name= "Calendarctl"Displaymode= "Month"Selectionmode= "Multiplerange"/>
 

Blackoutdates attributes

The blackoutdates attribute is used to define some date items that cannot be selected. The following XAML Code defines some date items that cannot be selected:

 <  Calendar  Margin  = "0, 50, 0, 0"  Name  = "Calendarctl" Displaymode  = "Month"> <  Calendar. blackoutdates  > <  Calendardaterange  Start  = "2010/4/1"  End  = "2010/4/3"/> <  Calendardaterange  Start  = "2010/4/14"  End  = "2010/4/18"/> <  Calendardaterange  Start = "2010/4/27"  End  = "2010/4/27"/> </  Calendar. blackoutdates  > </  Calendar  > 

As you can see, the date defined in blackoutdates presents a handling status in the calendar:

Displaydatestart and displaydateend attributes

The combination of these two attributes allows you to define a date range, and dates out of the range are not displayed in the calendar. Suppose we only display 4.10 ~ 4.20:

<CalendarMargin= "0, 50, 0, 0"Name= "Calendarctl"Displaymode= "Month"Displaydatestart= "2010/4/10"Displaydateend= "2010/4/20">
 

Istodayhighlighted attributes

Adjust whether to highlight the date of the current day. The default value is true.

<CalendarMargin= "0, 50, 0, 0"Name= "Calendarctl"Displaymode= "Month"Istodayhighlighted= "False"/>
 

Firstdayofweek attribute

By default, the first day of a calendar week is Sunday. You can use firstdayofweek to modify it at will. For example, change to Monday:

<CalendarMargin= "0, 50, 0, 0"Name= "Calendarctl"Displaymode= "Month"Firstdayofweek= "Monday"/>
 

Flowdirection attributes

Adjust the date display sequence of the calendar: lefttoright and righttoleft. The default value is lefttoright. Put it upside down:

<CalendarMargin= "0, 50, 0, 0"Name= "Calendarctl"Displaymode= "Month"Flowdirection= "Righttoleft"/>
 

Date key style

You can use the calendardaybuttonstyle button to customize the style:

 <  Window  X  :  Class  = "Wpfcontroltest. mainwindow"  Xmlns = "Http://schemas.microsoft.com/winfx/2006/xaml/presentation"  Xmlns  :  X  = "Http://schemas.microsoft.com/winfx/2006/xaml"  Title  = "Mainwindow"  Height  = "350"  Width  = "525"> <  Window. Resources  > <  Style  Targettype = "Calendardaybutton"  X  :  Key  = "Calendardaybtnstyle"> <  Setter  Property  = "Background"> <  Setter. Value  > <  Lineargradientbrush  Startpoint  = "0, 0"  Endpoint  = "1, 1"> < Gradientstop  Color  = "White"  Offset  = "0"/> <  Gradientstop  Color  = "Green"  Offset  = "1"/> </  Lineargradientbrush  > </  Setter. Value  > </  Setter > </  Style  > </  Window. Resources  > <  Grid  > <  Calendar  Margin  = "0, 50, 0, 0"  Name  = "Calendarctl"  Displaymode  = "Month"  Calendardaybuttonstyle  = "{ Staticresource  Calendardaybtnstyle  } "/> </  Grid  > </  Window  > 

We are looking forward to the Visual Studio 2010 release event.