Bài 5 THỰC ĐƠN NGỮ CẢNH (CONTEXT MENU) VÀ THANH TRẠNG THÁI (STATUS BAR) Thực đơn ngữ cảnh (Context Menu) là loại thực đơn gắn với một điều khiển cụ thể nào đó, chẳng hạn như một nút bấm hay một hộp soạn thảo,... Khi người dùng nhấn chuột phải vào điều khiển có gắn thực đơn ngữ cảnh thì thực đơn ngữ cảnh của điều khiển đó sẽ hiện ra và cho phép người dùng chọn công việc mong muốn từ thực đơn. ...
Bài THỰC ĐƠN NGỮ CẢNH (CONTEXT MENU) VÀ THANH TRẠNG THÁI (STATUS BAR) Thực đơn ngữ cảnh (Context Menu) loại thực đơn gắn với điều khiển cụ thể đó, chẳng hạn nút bấm hay hộp soạn thảo, Khi người dùng nhấn chuột phải vào điều khiển có gắn thực đơn ngữ cảnh thực đơn ngữ cảnh điều khiển cho phép người dùng chọn công việc mong muốn từ thực đơn Hình 5.1 minh họa thực đơn ngữ cảnh gắn với nút bấm Nút bấm trạng thái bình thường, chưa nhấn chuột phải Thực đơn ngữ cảnh xuất nhấn chuột phải lên nút bấm Hình 5.1 Nút bấm với thực đơn ngữ cảnh (Context Menu) Thanh trạng thái nằm ngang đáy cửa sổ hiển thị thông tin trạng thái hoạt động ứng dụng Một trạng thái có nhiều mục trạng thái (StatusBar Item) khác nhau, mục thể loại thông tin tới người dùng Mục trạng thái Mục trạng thái Mục trạng thái Hình 5.2 Thanh trạng thái gồm ba mục trạng thái khác Bài giới thiệu sử dụng thực đơn ngữ cảnh trạng thái ngôn ngữ XAML Xây dựng thực đơn ngữ cảnh Tương tự thực đơn (Menu) thông thường đề cập trước, thực đơn ngữ cảnh (Context Menu) gồm nhiều phần tử thực đơn tổ chức dạng phân cấp Mỗi phẩn tử thực đơn Command Menu Item (được gắn trực tiếp với quản lý kiện - Event handler) hay Popup Menu Item (chứa phần tử thực đơn cấp dưới) Tuy nhiên, thực đơn ngữ cảnh khơng nằm đỉnh cửa sổ, gắn với điều khiển xuất người dùng nhấn chuột phải lên điều khiển tương ứng Hai đoạn code dây minh họa dựng thực đơn ngữ cảnh minh họa hình 5.1 mã lệnh XAML ngôn ngữ C# để tiện so sánh Đoạn mã trình xây dựng thực đơn ngữ cảnh XAML: Nút bấm với thực đơn ngữ cảnh Đoạn mã trình xây dựng thực đơn ngữ cảnh C#: //Tạo nút bấm btn = new Button(); btn.Content = "Nút bấm với thực đơn ngữ cảnh"; //Tạo thực đơn ngữ cảnh contextmenu = new ContextMenu(); //Gán thực đơn ngữ cảnh cho nút bấm btn.ContextMenu = contextmenu; //Tạo phần tử thực đơn cho thực đơn ngữ cảnh mi = new MenuItem(); mi.Header = "Thực đơn ngữ cảnh"; mi1 = new MenuItem(); mi1.Header = "Menu 1"; mi.Items.Add(mi1); mi2 = new MenuItem(); mi2.Header = "Menu 2"; mi.Items.Add(mi2); mib3 = new MenuItem(); mib3.Header = "Menu 3"; mib.Items.Add(mib3); mib31 = new MenuItem(); mib31.Header = "Menu 31"; mib3.Items.Add(mib31); mib32 = new MenuItem(); mib32.Header = "Menu 32"; mib3.Items.Add(mib32); //Đưa phần tử thực đơn vào thực đơn ngữ cảnh contextmenu.Items.Add(mi); Thực đơn ngữ cảnh loại thực đơn ngữ cảnh riêng biệt, gắn với điều cụ thể, loại thực đơn ngữ cảnh chia sẻ cho nhiều điều khiển dùng chung (Shared ContexMenu) 1.1 Xây dựng thực đơn ngữ cảnh riêng biệt Thực đơn ngữ cảnh riêng biệt thực đơn ngữ cảnh gắn với điều khiển cụ thể, trạng thái menu dành riêng cho điều khiển chứa sử dụng Mã lệnh tạo thực đơn ngữ cảnh loại đặt trực tiếp bên cặp thẻ điểu khiển chứa (như minh họa đoạn mã XAML trên) Xem ví dụ minh họa hình 5.3, minh họa hai nút bấm, nút có thực đơn ngữ cảnh riêng Khi chọn Menu “Đậm” nút nội dung nút hiển thị dạng chữ đậm đồng thời Menu tương ứng trạng thái Checked ngược lại Trạng thái Checked mục “Đậm” menu ngữ cảnh thuộc nút bấm không ảnh hưởng tới thực đơn nút bấm 2 Menu “Đậm” Nút bấm trạng thái Checked Menu “Đậm” Nút bấm trạng thái UnChecked Hình 5.3 Ví dụ thực đơn ngữ cảnh riêng biệt điều khiển khác Mã lệnh XAML ví dụ sau Đoạn mã trình Menu tạo thực đơn ngữ cảnh XAML: Nút bấm Nút bấm Trong đoạn mã trên, ta có hai nút bấm với nhãn “Nút bấm 1” “Nút bấm 2”, nút bấm có thực đơn ngữ cảnh riêng Thực đơn ngữ cảnh nút bấm bắt đầu kết thúc Trong cặp thẻ cặp thẻ Trong cặp thẻ chứa thẻ định nghĩa mục thực đơn Các mục thực đơn thực đơn ngữ cảnh hoạt động tương tự thư đơn thông thường đề cập trước Dưới đoạn mã trình C# khai báo hàm xử lý xự kiện nhấn vào mục thực đơn namespace ContextMenuApp1 { /// /// Interaction logic for Window1.xaml /// public partial class Window1 : Window { public Window1() { InitializeComponent(); } private void Bold_Checked1(object sender, RoutedEventArgs e) { cmButton1.FontWeight = FontWeights.Bold; } private void Bold_Unchecked1(object sender, RoutedEventArgs e) { cmButton1.FontWeight = FontWeights.Normal; } private void Message1(object sender, RoutedEventArgs e) { MessageBox.Show("Bạn chọn thực đơn nút bấm 1"); } private void Bold_Checked2(object sender, RoutedEventArgs e) { cmButton2.FontWeight = FontWeights.Bold; } private void Bold_Unchecked2(object sender, RoutedEventArgs e) { cmButton2.FontWeight = FontWeights.Normal; } private void Message2(object sender, RoutedEventArgs e) { MessageBox.Show("Bạn chọn thực đơn nút bấm 2"); } } } 1.2 Thực đơn ngữ cảnh chia sẻ (Shared Context Menu) Thực đơn ngữ cảnh chia sẻ loại thực đơn ngữ cảnh gắn với nhiều điều khiển khác Khi mục thực đơn ngữ cảnh điều khiện Checked tất điều khiển khác chia sẻ trạng thái Ví dụ sau minh họa bốn điều khiển gồm hai Button hai CheckBox chia sẻ chung thực đơn ngữ cảnh, Check vào mục thực đơn ngữ cảnh Button hay CheckBox mục tương ứng thực đơn ngữ cảnh Button hay CheckBox khác có trạng thái Check tương ứng Hình 5.4 Ví dụ thực đơn ngữ cảnh chia sẻ Đoạn mã sau minh họa mã lệnh XAML ví dụ Shared ContextMenu Có bốn điều khiển chia sẻ thực đơn ngữ cảnh x:Shared gắn giá trị True, phép điều khiển chia sẻ ContextMenu Bạn thử cách check vào mục thực đơn điều khiển sau mở thực đơn ngữ cảnh điều khiển khác để xem trạng thái mục thực đơn ngữ cảnh Khác với thực đơn ngữ cảnh thơng thường, vị trí câu lện tạo thực đơn ngữ cảnh không nằm cặp thẻ điều khiển chứa mà khai báo dạng tài nguyên chung Window Thuộc tính x:Key dùng để khai báo tên ContextMenu, dùng để gán cho điều khiển muốn sử dụng ContextMenu Các điều khiển gắn ContextMenu nhờ thuộc tính ContextMenu="{DynamicResource ContextMenuChiase}" Chú ý, phải đặt giá trị cho x:Shared="True" ContextMenu chia sẻ cho điều khiển Nếu đặt x:Shared="False" điều khiển sử dụng MenuContext này, điều khiển có thể riêng ContextMenu (không chia sẻ chung) Xây dựng sử dụng trạng thái (StatusBar) Thanh công trạng thái nằm ngang, bên đáy cửa sổ, gồm nhiều phần tử nhằm thể thông tin trạng thái hoạt động ứng dụng Mỗi phần tử văn bản, biểu tượng hay tiến trình (Minh họa hình 5.5) Thanh trạng thái Phần tử dạng văn Phần tử dạng tiến trình Phần tử dạng ảnh Hình 5.5 Thanh trạng thái 2.1 Thanh trạng thái với phần tử văn Để bắt đầu tìm hiểu bước xây dựng trạng thái, ta tìm hiểu mã lệnh XAML tạo trạng thái đơn giản với phần tử dạng văn Thanh trạng thái đơn giản, gồm phần tử dạng văn Thanh trạng thái đuợc xây dựng đoạn mã XAML sau: < StatusBar Grid.Row="1"> Ready Thanh trạng thái gồm nhiều phần tử Ví dụ, trạng thái gồm hai mục Ready Set < StatusBar Grid.Row="1"> Ready Set Ở ví dụ phần tử thứ hai nằm bên cạnh phần tử thứ nhất, muốn phần tử thứ có rộng lớn phần tử thứ hai bên phải cửa sổ cho thuận tiện (như hình dưới) ta phải sử dụng kỹ thuật tạo layout (bố cục) trạng thái để phân chi trạng thái thành vùng mong muốn đặt phần tử cần thiết vào vùng tương ứng Ready Set Ở đoạn mã XAML ta sử dụng thẻ để định nghĩa bố cục phần tử trạng thái Trong cặp thẻ Kế tiếp, sử dụng thẻ để định nghĩa vùng hiển thị kiểu lưới Trong ví dụ này, lưới bao gồm dòng hai cột Cột thứ có độ dài tự co dã đễ chiếm tồn khơng gian trống nhờ thuộc tính Width="*" Cột thứ hai có độ dài độ dài nội dung mà chứa nhờ thuộc tính Width="Auto" Phần tử thứ gắn với cột thứ lưới (Grid.Column="0") Ready Cột thứ hai gắn với cột thứ hai lưới (Grid.Column="1") Set 2.2 Thanh trạng thái với phần tử tiến trình (Progress Bar) Đơi khi, trạng thái ta muốn thể trạng thái thực cơng việc đó, ta đưa tiến trình vào phần tử trạng thái (minh họa hình 5.6) Thanh tiến trình Hình 5.6 Thanh trạng thái với phần tử tiến trình Mã lệnh minh họa trạng thái sau: Ready Set Ở ví dụ trên, ta đặt trạng thái vào mục thứ hai trạng thái 2.3 Thanh trạng thái với phần tử hình ảnh Hình 57 Minh họa phần tử trạng thái hình ảnh biểu tượng Phần tử trạng thái hình ảnh Hình 5.7 Thanh trạng thái với phần tử hình ảnh Mã lệnh minh họa trạng thái sau: Ready Set Ở ví dụ trên, ta đặt trạng thái vào mục thứ tư trạng thái 2.4 Mã lệnh tổng hợp trạng thái Ví dụ minh họa đặt phần tử trạng thái Mỗi phần tử văn bản, ảnh hay tiến trình Ready Set Câu hỏi ôn tập Context Menu xuất nhấn chuột lên điều khiển? A Chuột trái B Chuột phải Câu trả lời: B Context Menu chứa Command Menu Item Popup Menu Item? A Đúng B Sai Câu trả lời: A Câu lệnh XAML định nghĩa thực đơn ngữ cảnh phải nằm cặp thẻ định nghĩa điều khiển chứa thực đơn? A Đúng B Sai 10 Câu trả lời: B Thực đơn ngữ cảnh chia sẻ cho nhiều điều khiển dùng chung? A Đúng B Sai Câu trả lời: A Thanh trạng thái phép chứa phần tử trạng thái: A Đúng B Sai Câu trả lời: B Thanh trạng thái chứa phần tử thuộc loại nào? A Văn B Hình ảnh C Các điều khiển khác Button, ProgressBar, D Cả ba loại Câu trả lời: D Tài liệu tham khảo Windows Presentation Foundation, URL: http://msdn.microsoft.com/en-us/library/ms754130.aspx MSDN – Context Menu, URL: http://msdn.microsoft.com/en-us/library/ms743670.aspx MSDN – Context Menu sample, URL: http://msdn.microsoft.com/en-us/library/ms771470(VS.85).aspx MSDN – StatusBar, URL: http://msdn.microsoft.com/en-us/library/ms752075.aspx MSDN – StatusBar sample, URL: http://msdn.microsoft.com/en-us/library/ms771396.aspx The Perfect WPF StatusBar, URL: http://kentb.blogspot.com/2007/10/perfect-wpf-statusbar.html 11 ... mib3.Items.Add(mib32); //Đưa phần tử thực đơn vào thực đơn ngữ cảnh contextmenu.Items.Add(mi); Thực đơn ngữ cảnh loại thực đơn ngữ cảnh riêng biệt, gắn với điều cụ thể, loại thực đơn ngữ cảnh chia sẻ cho nhiều... chọn thực đơn nút bấm 2"); } } } 1.2 Thực đơn ngữ cảnh chia sẻ (Shared Context Menu) Thực đơn ngữ cảnh chia sẻ loại thực đơn ngữ cảnh gắn với nhiều điều khiển khác Khi mục thực đơn ngữ cảnh điều... ContexMenu) 1.1 Xây dựng thực đơn ngữ cảnh riêng biệt Thực đơn ngữ cảnh riêng biệt thực đơn ngữ cảnh gắn với điều khiển cụ thể, trạng thái menu dành riêng cho điều khiển chứa sử dụng Mã lệnh tạo thực