Tạo Calendar
Các phần tử Lịch đại diện cho điều khiển Calendar WPF trong XAML.
<Calendar/>
Điều khiển Calendar được định nghĩa trong namespace System.Windows.Controls. Khi kéo và thả điều khiển Calendar từ Toolbox , mã XAML sẽ trông giống như sau, thấy một phần Calendar XAML được thêm vào trong phần tử Grid và thuộc tính Width, Height, Name, và VerticalAlignment và HorizontalAlignment được thiết lập.
<Grid>
<Calendar Height="170" HorizontalAlignment="Left" Margin="58,32,0,0"
Name="calendar1" VerticalAlignment="Top" Width="180" />
</Grid>
Giao diện mặc định của điều khiển Calendar trông giống như hình 1.
Hình 1
Các thuộc tính Width và Height của phần tử Calendar đại diện cho chiều rộng và chiều cao của Calendar. Thuộc tính Content đại diện cho văn bản của Calendar. Thuộc tính Name đại diện cho tên của điều khiển, đó là định danh duy nhất của điều khiển.
Đoạn mã dưới tạo ra điều khiển Calendar và được thiết lập tên, chiều cao, chiều rộng và tính chất của điều khiển Calendar.
<Calendar Name=" MonthlyCalendar" Height="30" Width="100" >
</Calendar>
Display Modes
Thuộc tính DisplayMode của lớp Calendar đại diện cho định dạng của màn hình hiển thị Calendar, đó có thể là tháng, năm, hoặc thập kỷ. Tháng là chế độ mặc định. Bằng cách thiết lập để DisplayMode theo Năm và thập kỷ như Hình 2 và Hình 3 tương ứng.
Hình 2
Hình 3
Xem theo tháng cũng là giao diện mặc định trông giống như hình 4.
Hình 4
Nếu bạn lấy ví dụ thập kỷ, và nhấp chuột vào năm 2008 trong hình 3, bạn sẽ nhận được định dạng Calendar với tất cả các tháng trong năm 2008 và nếu nhấn chuột vào bất kỳ tháng nào, cuối cùng sẽ có được giao diện tháng của Calendar.
Đoạn mã sau thiết đặt thuộc tính cho DisplayMode theo Thập kỷ.
<Calendar DisplayMode="Decade">
</Calendar>
Selection Modes và Selection Dates
Thuộc tính SelectedDate đại diện cho ngày hiện đang được chọn. Nếu nhiều ngày lựa chọn là đúng, thuộc tính SelectedDates đại diện cho tập hợp các ngày hiện đang được chọn.
Kiểu CalendarSelectionMode enumeration của SelectionMode đại diện cho chế độ lựa chọn của Calendar. Bảng 1 mô tả các kiểu liệt kê CalendarSelectionMode và các thành phần của nó.
CalendarSelectionMode | Miêu tả |
None | Không có lựa chọn được cho phép. |
SingleDate | Chỉ một ngày duy nhất có thể beselected, hoặc bằng cách thiết lập SelectedDate hoặc giá trị đầu tiên trong SelectedDates . AddRange không thể được sử dụng. |
SingleRange | Một loạt duy nhất của ngày có thể chọn. Thiết lập SelectedDate, thêm ngày riêng đến SelectedDates , hoặc sử dụng AddRange sẽ xóa giá trị allprevious từ SelectedDates . |
MultipleRange | Nhiều ngày có thể được lựa chọn. Thêm một ngày riêng đến SelectedDates hoặc sử dụng AddRange sẽ không rõ ràng SelectedDates. Thiết lập SelectedDate sẽ vẫn còn rõ ràng SelectedDates , nhưng ngày bổ sung hoặc phạm vi sau đó có thể được thêm. |
Đoạn mã sau thiết đặt thuộc tính SelectionMode cho nhiều vùng đơn.
<Calendar SelectionMode="SingleRange">
</Calendar>
BlackoutDates
Thuộc tính BlackoutDates của lớp Calendar đại diện cho tập hợp nhiều ngày mà không có sẵn để lựa chọn. Tất cả các ngày không lựa chọn được đánh dấu bằng một chữ thập. Ví dụ, tháng ba của năm 2010, tôi muốn chặn từ ngày 1 tháng 1 đến ngày 08 tháng 1 và tất cả các ngày thứ Hai. Lịch cuối cùng sẽ trông giống như hình 5.
Hình 5
Đoạn mã sau đây cho biết thêm backout dates đến Calendar.
<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>
Chúng ta có thể đạt được điều này bằng cách thêm mã được liệt kê như bên dưới. Phương thức BlackoutDates.Add mất đối tượng CalendarDateRange là tập hợp hai đối tượng DateTime. Ngày đầu tiên là ngày bắt đầu của phạm vi và ngày thứ hai là ngày kết thúc của phạm vi ngày.
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 và DisplayDateEnd
Việc điều khiển Calendar cho phép thiết lập điểm bắt đầu và kết thúc hiển thị ngày bằng cách sử dụng các thuộc tính DisplayDateStart và DisplayDateEnd. Nếu xem hình 5 trong phần trước, bạn có thể nhận thấy trong tháng dương lịch hiển thị đầu tháng 3 năm 2010 với ngày 01 Tháng ba 2010. Nhưng bây giờ nếu bạn muốn hiển thị chỉ ngày tháng ba 2010? Chúng ta có thể sử dụng các thuộc tính DisplayStartDate và DisplayEndDate để kiểm soát ngày bắt đầu và ngày kết thúc của tháng.
Thuộc tính DisplayDate đại diện cho ngày hiện tại để hiển thị.
Đoạn mã sau thiết lập DisplayDate, DisplayDateStart và DisplayDateEnd thuộc tính của Calendar trong XAML.
<Calendar Name="MonthlyCalendar"
SelectionMode="MultipleRange"
DisplayDate="3/1/2010"
DisplayDateStart="3/1/2010"
DisplayDateEnd="3/31/2010"
/>
Mã được liệt kê bên dưới chắc chắn rằng ngày bắt đầu là ngày 01 tháng 3 năm 2010 và ngày cuối cùng là ngày 31 Tháng Ba, 2010. Ngày được chọn hiện nay là 05 tháng 3.
private void SetDisplayDates()
{
MonthlyCalendar.DisplayDate = new DateTime(2010, 3, 5);
MonthlyCalendar.DisplayDateStart = new DateTime(2010, 3, 1);
MonthlyCalendar.DisplayDateEnd = new DateTime(2010, 3, 31);
}
Lịch mới trông giống như hình 6.
Hình 6
FirstDayOfWeek và IsTodayHighlighted
Theo mặc định, chủ nhật là ngày đầu tiên của tuần. Nếu muốn thay đổi nó, sử dụng thuộc tính FirstDayOfWeek. thuộc tính IsTodayHightlighted được sử dụng để ngày hôm nay được đánh dấu.
Đoạn mã sau thiết đặt FirstDayOfWeek đến thứ ba và ngày hôm nay được đánh dấu.
<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">
Đoạn mã sau thiết đặt FirstDayOfWeek đến thứ ba và làm cho ngày hôm nay nhấn mạnh trong WPF.
MonthlyCalendar.FirstDayOfWeek = DayOfWeek.Tuesday;
MonthlyCalendar.IsTodayHighlighted = true;
Lịch mới trông giống như hình 7, nơi bạn có thể thấy ngày bắt đầu của tuần thứ ba.
Hình 7
Selected Date và Selected Dates
Thuộc tính SelectedDate đại diện cho ngày đã chọn hiện thời. Nếu việc chọn lựa nhiều ngày là đúng, thì thuộc tính SelectedDates đại diện cho tất cả các ngày đã chọn trong Calendar. Đoạn mã sau thiết đặt SelectedDates trong XAML tại design-time.
<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>
Những ngày tháng được chọn trong Calendar trông giống như hình 8, nơi có thể nhìn thấy ngày 05 tháng 3, ngày 15, và ngày 25 có một nền màu xanh nhạt và đại diện cho ngày đã chọn.
Hình 8
Đoạn mã sau thiết đặt thuộc tính SelectedDates trong WPF tại thời gian chạy.
private void AddSelectedDates()
{
MonthlyCalendar.SelectedDates.Add(new DateTime(2010, 3, 5));
MonthlyCalendar.SelectedDates.Add(new DateTime(2010, 3, 15));
MonthlyCalendar.SelectedDates.Add(new DateTime(2010, 3, 25));
}
Lưu ý: Nếu thiết lập ngày được lựa chọn vào bất kỳ ngày blockout, sẽ thấy phân tích cú pháp trong XAML sẽ thông qua một lỗi như hình 9.
Hình 9
Sự kiện Calendar
Bên cạnh các sự kiện điều khiển bình thường, điều khiển Calendar có ba sự kiện lịch liên quan. Những sự kiện này là DisplayDateChanged, DisplayModeChanged, và SelectedDatesChanged. Sự kiện DisplayDateChanged là bắn thuộc tính DisplayDate được thay đổi. Sự kiện DisplayModeChanged phát sinh khi thuộc tính DisplayMode được thay đổi. Sự kiện SelectedDatesChanged phát sinh khi các thuộc tính SelectedDate hoặc SelectedDates đang thay đổi. Đoạn mã sau thiết đặt ba thuộc tính sự kiện.
<Calendar SelectionMode="SingleRange"
Name="MonthlyCalendar"
SelectedDatesChanged="MonthlyCalendar_SelectedDatesChanged"
DisplayDateChanged="MonthlyCalendar_DisplayDateChanged"
DisplayModeChanged="MonthlyCalendar_DisplayModeChanged"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="10,10,0,0">
</Calendar>
Các mã sau cho sự kiện.
private void MonthlyCalendar_SelectedDatesChanged(object sender,
SelectionChangedEventArgs e)
{
}
private void MonthlyCalendar_DisplayDateChanged(object sender,
CalendarDateChangedEventArgs e)
{
}
private void MonthlyCalendar_DisplayModeChanged(object sender,
CalendarModeChangedEventArgs e)
{
}
Thông thường, vào lựa chọn ngày, bạn có thể muốn nắm bắt sự kiện đó và biết những gì ngày được chọn hiện tại. Bây giờ làm thế nào về chúng ta thêm một điều khiển TextBox đến trang và trả về ngày được chọn, chúng ta sẽ thiết lập văn bản của TextBox đến ngày hiện đang được chọn.
Tôi thêm đoạn mã sau vào XAML dưới điều khiển Calendar.
<TextBox Width="200" Height="30"
VerticalAlignment="Bottom"
HorizontalAlignment="Left"
Margin="10,10,10,10"
x:Name="SelectedDateTextBox">
</TextBox>
Trên sự kiện handler SelectedDateChanged, chúng ta thiết lập thuộc tính TextBox. Thuộc tính Text đến thuộc tính SelectedDate của điều khiển Calendar như bạn có thể nhìn thấy từ mã:
private void MonthlyCalendar_SelectedDatesChanged(object sender,
SelectionChangedEventArgs e)
{
SelectedDateTextBox.Text = MonthlyCalendar.SelectedDate.ToString();
}
Bây giờ khi chạy ứng dụng, sẽ thấy đầu ra trông giống như Hình 10. Khi chọn ngày trong Calendar, nó sẽ được hiển thị trong Textbox.
Hình 10
Định dạng Calendar
Thuộc tính BorderBrush của Calendar thiết lập brush để vẽ biên của Calendar. Bạn có thể sử dụng bất kỳ brush để điền vào biên. Đoạn mã sau đây sử dụng brush linear gradient để vẽ biên với sự kết hợp của màu đỏ và màu xanh.
<Calendar.BorderBrush>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1" >
<GradientStop Color="Blue" Offset="0" />
<GradientStop Color="Red" Offset="1.0" />
</LinearGradientBrush>
</Calendar.BorderBrush>
Thuộc tính Background và Foreground của Calendar thiết lập nền và màu nền trước của Calendar. Bạn có thể sử dụng bất kỳ brush để điền vào biên. Đoạn mã sau sử dụng brush linear gradient để vẽ background và foreground của Calendar.
<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>
Lịch mới trông giống như hình 11.
Hình 11
Thiết lập hình ảnh làm nền của Calendar
Để thiết lập hình ảnh như là nền của Calendar, chúng ta có thể thiết lập hình ảnh như là nền của Calendar. Đoạn mã dưới đây thiết lập nền của Calendar đến một hình ảnh. Mã này cũng thiết lập opacity của hình ảnh.
<Calendar.Background>
<ImageBrush ImageSource="Garden.jpg" Opacity="0.3"/>
</Calendar.Background>
Các đầu ra mới trông giống như hình 12.
Hình 12
Tạo Calendar động
Các mã được liệt kê bên dưới tạo ra điều khiển Calendar. Đầu tiên, nó tạo ra một đối tượng Calendar và đặt DisplayMode, SelectedMode, thuộc tính khác và sau đó Calendar sẽ được thêm vào LayoutRoot.
private void CreateDynamicCalendar()
{
Calendar MonthlyCalendar = new Calendar();
MonthlyCalendar.Name = "MonthlyCalendar";
MonthlyCalendar.Width = 300;
MonthlyCalendar.Height = 400;
MonthlyCalendar.Background = Brushes.LightBlue;
MonthlyCalendar.DisplayMode = CalendarMode.Month;
MonthlyCalendar.SelectionMode = CalendarSelectionMode.SingleRange;
MonthlyCalendar.DisplayDateStart = new DateTime(2010, 3, 1);
MonthlyCalendar.DisplayDateEnd = new DateTime(2010, 3, 31);
MonthlyCalendar.SelectedDates.Add(new DateTime(2010, 3, 5));
MonthlyCalendar.SelectedDates.Add(new DateTime(2010, 3, 15));
MonthlyCalendar.SelectedDates.Add(new DateTime(2010, 3, 25));
MonthlyCalendar.FirstDayOfWeek = DayOfWeek.Monday;
MonthlyCalendar.IsTodayHighlighted = true;
LayoutRoot.Children.Add(MonthlyCalendar);
}