日历控件用于创建可视日历,让用户选择日期并在选择日期时触发事件。本文演示如何使用 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中的,您将得到另一种日历格式,其中包含的所有月份,如果您单击任何一个月份,最终将得到日历的月份视图。
下面的代码段将DisplayMode属性设置为Decade。
<Calendar DisplayMode="Decade"> </Calendar>
选择方式和选择日期
SelectedDate属性表示当前选中的日期。如果多个日期选择为真,则SelectedDates属性表示当前选定日期的集合。
类型CalendarSelectionMode枚举的SelectionMode表示日历的选择模式。表1描述了CalendarSelectionMode枚举及其成员。
以下代码片段将 SelectionMode 属性设置为单个范围。
<Calendar SelectionMode="SingleRange"> </Calendar>
BlackoutDates
Calendar类的BlackoutDates属性表示不可用于选择的日期集合。所有非选择日期都用叉号标记。例如,假设在的3月,我们想要阻止日期从1月1日到1月8日,然后所有的星期一。最终的日历应该如图所示。
下面的代码片段将回退日期添加到日历中。
<Calendar.BlackoutDates> <CalendarDateRange Start="3/1/" End="3/7/" /> <CalendarDateRange Start="3/8/" End="3/8/" /> <CalendarDateRange Start="3/15/" End="3/15/" /> <CalendarDateRange Start="3/22/" End="3/22/" /> <CalendarDateRange Start="3/29/" End="3/29/" /> </Calendar.BlackoutDates>
BlackoutDates。Add方法接受一个CalendarDateRange对象,该对象是两个DateTime对象的集合。第一个日期是日期范围的开始日期,第二个日期是日期范围的结束日期。
private void SetBlackOutDates() { MonthlyCalendar.BlackoutDates.Add(new CalendarDateRange(new DateTime(, 3, 1), new DateTime(, 3, 7))); MonthlyCalendar.BlackoutDates.Add(new CalendarDateRange(new DateTime(, 3, 8), new DateTime(, 3, 8))); MonthlyCalendar.BlackoutDates.Add(new CalendarDateRange(new DateTime(, 3, 15), new DateTime(, 3, 15))); MonthlyCalendar.BlackoutDates.Add(new CalendarDateRange(new DateTime(, 3, 22), new DateTime(, 3, 22))); MonthlyCalendar.BlackoutDates.Add(new CalendarDateRange(new DateTime(, 3, 29), new DateTime(, 3, 29))); }
DisplayDateStart和DisplayDateEnd
日历控件允许您通过使用DisplayDateStart和DisplayDateEnd属性来设置开始和结束显示日期。如果您看到前一节中的图5,您可能会注意到3月日历显示从3月01日开始。但是现在如果你想只显示3月的日期呢?我们可以使用DisplayStartDate和DisplayEndDate属性来控制一个月的开始日期和结束日期。
DisplayDate属性表示要显示的当前日期。
下面的代码段设置DisplayDate、DisplayDateStart和DisplayDateEnd属性
<Calendar Name="MonthlyCalendar" SelectionMode="MultipleRange" DisplayDate="3/1/" DisplayDateStart="3/1/" DisplayDateEnd="3/31/" />
代码确保开始日期为3月01日,结束日期为3月31日。当前选定日期为3月05日。
private void SetDisplayDates() { MonthlyCalendar.DisplayDate = new DateTime(, 3, 5); MonthlyCalendar.DisplayDateStart = new DateTime(, 3, 1); MonthlyCalendar.DisplayDateEnd = new DateTime(, 3, 31); }
新的日历如图所示。
FirstDayOfWeek和IsTodayHighlighted
默认情况下,周日是一周的第一天。如果你想改变它,你可以使用FirstDayOfWeek属性。istodayhighlight属性用于突出显示今天。
下面的代码片段将FirstDayOfWeek设置为周二,并突出显示今天。
<Calendar Name="MonthlyCalendar" SelectionMode="MultipleRange" DisplayDate="3/5/" DisplayDateStart="3/1/" DisplayDateEnd="3/31/" 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/" DisplayDateStart="3/1/" DisplayDateEnd="3/31/" FirstDayOfWeek="Tuesday" IsTodayHighlighted="True" xmlns:sys="clr-namespace:System;assembly=mscorlib" Margin="15,39,88,19"> <Calendar.SelectedDates> <sys:DateTime>3/5/</sys:DateTime> <sys:DateTime>3/15/</sys:DateTime> <sys:DateTime>3/25/</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>