Cấp bậc tác giả:

DOTNET

Làm việc với WPF Calendar

Được viết bởi webmaster ngày 05/06/2015 lúc 08:36 PM
Điều khiển Calendar được sử dụng để tạo ra lịch trực quan cho phép người dùng chọn ngày và sự kiện chọn ngày tháng. Bài viết này trình bày cách tạo và sử dụng điều khiển Calendar trong WPF sử dụng XAML và C#.
  • 0
  • 11300

Làm việc với WPF Calendar

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. 

WPFCalImg1.jpg
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.

WPFCalImg1.jpg
Hình 2

WPFCalImg3.jpg
Hình 3

Xem theo tháng cũng là giao diện mặc định trông giống như hình 4.

WPFCalImg1.jpg
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 SelectedDatesThiế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.

WPFCalImg5.jpg
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.

WPFCalImg6.jpg
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.

WPFCalImg7.jpg
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.

WPFCalImg8.jpg
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. 

WPFCalImg9.jpg
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.

WPFCalImg10.jpg
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.

WPFCalImg11.jpg
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.

WPFCalImg12.jpg
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);  
}   

Nguồn bài viết: DOTNET.VN

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML