日历控件用于创建可视日历,让用户选择日期并在选择日期时触发事件。本文演示如何使用 XAML 和 C# 在 WPF 中创建和使用日历控件。
创建日历
Calendar 元素表示 XAML 中的 WPF 日历控件。
<Calendar/>
Calendar 控件在 System.Windows.Controls 命名空间中定义。当您将日历控件从工具箱拖放到页面时,XAML 代码将类似于以下代码,您可以在其中看到日历 XAML 元素已添加到 Grid 元素中,并且其 Width、Height、Name 和 VerticalAlignment 和 HorizontalAlignment 属性是放。
<Grid>
<Calendar Height="170" HorizontalAlignment="Left" Margin="58,32,0,0"
Name="calendar1" VerticalAlignment="Top" Width="180" />
</Grid>
Calendar控件的默认视图如图所示。
Calendar元素的Width和Height属性表示Calendar的宽度和高度。Content属性表示Calendar的文本。Name属性表示控件的名称,它是控件的唯一标识符。
清单1中的代码片段创建了一个Calendar控件,并设置了Calendar控件的名称、高度和宽度属性。
<Calendar Name=" MonthlyCalendar" Height="30" Width="100">
</Calendar>
显示模式
Calendar类的DisplayMode属性表示Calendar的显示格式,可以是月、年或年。默认模式为“月”。将DisplayMode设置为Year和Decade。
Month视图也是默认视图。
如果您以Decade为例,单击图3中的2008年,您将得到另一种日历格式,其中包含2008年的所有月份,如果您单击任何一个月份,最终将得到日历的月份视图。
下面的代码段将DisplayMode属性设置为Decade。
<Calendar DisplayMode="Decade">
</Calendar>
选择方式和选择日期
SelectedDate属性表示当前选中的日期。如果多个日期选择为真,则SelectedDates属性表示当前选定日期的集合。
类型CalendarSelectionMode枚举的SelectionMode表示日历的选择模式。表1描述了CalendarSelectionMode枚举及其成员。
日历选择模式 | 描述 |
None | 不允许选择。 |
SingleDate | 通过设置 SelectedDate 或 SelectedDates 中的第一个值,只能选择一个日期。不能使用 AddRange。 |
SingleRange | 可以选择单个日期范围。设置 SelectedDate、将日期单独添加到 SelectedDates 或使用 AddRange 将清除 SelectedDates 中的所有先前值。 |
MultipleRange | 可以选择多个不连续的日期范围。将日期单独添加到 SelectedDates 或使用 AddRange 不会清除 SelectedDates。设置 SelectedDate 仍将清除 SelectedDates,但可以添加其他日期或范围。添加包含一些已选择日期或与另一个范围重叠的日期的范围会导致这些范围的并集,并且不会导致异常。 |
以下代码片段将 SelectionMode 属性设置为单个范围。
<Calendar SelectionMode="SingleRange">
</Calendar>
BlackoutDates
Calendar类的BlackoutDates属性表示不可用于选择的日期集合。所有非选择日期都用叉号标记。例如,假设在2010年的3月,我们想要阻止日期从1月1日到1月8日,然后所有的星期一。最终的日历应该如图所示。
下面的代码片段将回退日期添加到日历中。
<Calendar.BlackoutDates>
<CalendarDateRange Start="3/1/2010" End="3/7/2010" />
<CalendarDateRange Start="3/8/2010" End="3/8/2010" />
<CalendarDateRange Start="3/15/2010" End="3/15/2010" />
<CalendarDateRange Start="3/22/2010" End="3/22/2010" />
<CalendarDateRange Start="3/29/2010" End="3/29/2010" />
</Calendar.BlackoutDates>
BlackoutDates。Add方法接受一个CalendarDateRange对象,该对象是两个DateTime对象的集合。第一个日期是日期范围的开始日期,第二个日期是日期范围的结束日期。
private void SetBlackOutDates() {
MonthlyCalendar.BlackoutDates.Add(new CalendarDateRange(new DateTime(2010, 3, 1), new DateTime(2010, 3, 7)));
MonthlyCalendar.BlackoutDates.Add(new CalendarDateRange(new DateTime(2010, 3, 8), new DateTime(2010, 3, 8)));
MonthlyCalendar.BlackoutDates.Add(new CalendarDateRange(new DateTime(2010, 3, 15), new DateTime(2010, 3, 15)));
MonthlyCalendar.BlackoutDates.Add(new CalendarDateRange(new DateTime(2010, 3, 22), new DateTime(2010, 3, 22)));
MonthlyCalendar.BlackoutDates.Add(new CalendarDateRange(new DateTime(2010, 3, 29), new DateTime(2010, 3, 29)));
}
DisplayDateStart和DisplayDateEnd
日历控件允许您通过使用DisplayDateStart和DisplayDateEnd属性来设置开始和结束显示日期。如果您看到前一节中的图5,您可能会注意到2010年3月日历显示从2010年3月01日开始。但是现在如果你想只显示2010年3月的日期呢?我们可以使用DisplayStartDate和DisplayEndDate属性来控制一个月的开始日期和结束日期。
DisplayDate属性表示要显示的当前日期。
下面的代码段设置DisplayDate、DisplayDateStart和DisplayDateEnd属性
<Calendar Name="MonthlyCalendar"
SelectionMode="MultipleRange"
DisplayDate="3/1/2010"
DisplayDateStart="3/1/2010"
DisplayDateEnd="3/31/2010"
/>
代码确保开始日期为2010年3月01日,结束日期为2010年3月31日。当前选定日期为3月05日。
private void SetDisplayDates()
{
MonthlyCalendar.DisplayDate = new DateTime(2010, 3, 5);
MonthlyCalendar.DisplayDateStart = new DateTime(2010, 3, 1);
MonthlyCalendar.DisplayDateEnd = new DateTime(2010, 3, 31);
}
新的日历如图所示。
FirstDayOfWeek和IsTodayHighlighted
默认情况下,周日是一周的第一天。如果你想改变它,你可以使用FirstDayOfWeek属性。istodayhighlight属性用于突出显示今天。
下面的代码片段将FirstDayOfWeek设置为周二,并突出显示今天。
<Calendar Name="MonthlyCalendar"
SelectionMode="MultipleRange"
DisplayDate="3/5/2010"
DisplayDateStart="3/1/2010"
DisplayDateEnd="3/31/2010"
FirstDayOfWeek="Tuesday"
IsTodayHighlighted="True"
xmlns:sys="clr-namespace:System;assembly=mscorlib" Margin="15,39,88,19">
下面的代码片段将FirstDayOfWeek设置为周二,并在WPF中突出显示今天。
MonthlyCalendar.FirstDayOfWeek = DayOfWeek.Tuesday;
MonthlyCalendar.IsTodayHighlighted = true;
新的日历如图7所示,在图中可以看到一周的开始一天Tuesday。
Selected Date and Selected Dates
SelectedDate属性表示当前选中的日期。如果多个日期选择为true,则SelectedDates属性表示Calendar中所有选定的日期。下面的代码片段在设计时设置XAML中的SelectedDates。
<Calendar Name="MonthlyCalendar" SelectionMode="MultipleRange" DisplayDate="3/5/2010" DisplayDateStart="3/1/2010" DisplayDateEnd="3/31/2010" FirstDayOfWeek="Tuesday" IsTodayHighlighted="True" xmlns:sys="clr-namespace:System;assembly=mscorlib" Margin="15,39,88,19">
<Calendar.SelectedDates>
<sys:DateTime>3/5/2010</sys:DateTime>
<sys:DateTime>3/15/2010</sys:DateTime>
<sys:DateTime>3/25/2010</sys:DateTime>
</Calendar.SelectedDates>
</Calendar>
格式化日历
我们如何创建一个带有日历的边框格式、背景和前景的日历控件?
Calendar 的 BorderBrush 属性设置画笔来绘制日历的边框。您可以使用任何画笔来填充边框。下面的代码片段使用线性渐变画笔来绘制红色和蓝色组合的边框。
<Calendar.BorderBrush>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="Blue" Offset="0" />
<GradientStop Color="Red" Offset="1.0" />
</LinearGradientBrush>
</Calendar.BorderBrush>
日历的背景和前景属性设置日历的背景和前景颜色。你可以使用任何笔刷填充边界。下面的代码片段使用线性渐变笔刷绘制日历的背景和前景。
<Calendar.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="Blue" Offset="0.1" />
<GradientStop Color="Orange" Offset="0.25" />
<GradientStop Color="Green" Offset="0.75" />
<GradientStop Color="Red" Offset="1.0" />
</LinearGradientBrush>
</Calendar.Background>
<Calendar.Foreground>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="Black" Offset="0.25" />
<GradientStop Color="Green" Offset="1.0" />
</LinearGradientBrush>
</Calendar.Foreground>
设置图片为日历的背景
要设置一个图片作为日历的背景,我们可以设置一个图片作为日历的背景。下面的代码片段将Calendar的背景设置为图像。代码还设置图像的不透明度。
<Calendar.Background>
<ImageBrush ImageSource="Garden.jpg" Opacity="0.3"/>
</Calendar.Background>