Thực đơn (Menu) và thanh công cụ (Toolbar) là một trong những thành phần quan trọng của cửa sổ, chúng chứa đựng các chức năng chính của chương trình mà người dùng có thể thực hiện.
Bài THỰC ĐƠN (MENU) VÀ THANH CÔNG CỤ (TOOLBAR) - WPF Thực đơn (Menu) công cụ (Toolbar) thành phần quan trọng cửa sổ, chúng chứa đựng chức chương trình mà người dùng thực Thanh thực đơn chứa hầu hết tất chức chương trình, tổ chức theo dạng phân cấp, công cụ thường chứa số chức thiết yếu mà người dùng hay quan tâm dạng biểu tượng hình ảnh để người dùng thao tác cách nhanh chóng Hình 4.1 minh họa cửa sổ chương trình với thực đơn cơng cụ Bài giới thiệu phương pháp xây dựng sử dụng Thực đơn Thanh công cụ ngôn ngữ XAML ứng dụng WPF từ ví dụ đơn giản mục menu (Menu Item) thông thường (khơng có biểu tượng trạng thái) đến ví Menu Item với biểu tượng hình ảnh (Icon) trạng thái (Checked UnChecked) Thanh công cụ với biểu tượng hình ảnh Thực đơn Hình 4.1 Một ví dụ cửa số với thực đơn công cụ Xây dựng thực đơn sử dụng thực đơn Thực đơn (Menu) điều khiển gồm nhiều phần tử tổ chức dạng phân cấp Thanh thực đơn thường nằm đỉnh cửa số (dưới tiêu đề) Các phẩn tử thực đơn (Menu Item) xuất thực đơn gọi Menu Item mức đỉnh Mỗi Menu Item mức đỉnh chứa nhiều Menu Item cấp (Sub Menu) gắn trực tiếp với quản lý kiện (Event handler) kiện Click hay lệnh hệ thống xây dựng sẵn (như Copy, Cut, Paste, ) Tương tự vậy, Menu Item cấp lại chứa nhiều Menu Item cấp Khi Menu Item chứa Menu Item cấp thường gọi Popup Menu, Menu Item cấp xuất người dùng nhấn chuột lên Popup Menu Nếu Menu Item gắn trực tiếp với với quản lý kiện hay lệnh hệ thống gọi Command Menu, thực thi câu lệnh mong muốn người dùng nhấn chuột nhấn phím tắt (ký tự bàn phím gắn với Menu Item) để chọn Ta tìm hiểu bước xây dựng sử dụng menu Menu với Menu Item đơn giản, tiếp đến Menu Item có trạng thái (Checked, UnChecked) Menu Item có biểu tượng hình ảnh 1.1 Xây dựng thực đơn với Menu Item đơn giản Trong phần ta tìm hiểu bước xây dựng menu đơn giản gồm Menu Item mức đỉnh Thực đơn 1, Thực đơn Thực đơn Trong đó, Thực đơn Thực đơn Menu Popup (có chứa menu con), Thực đơn loại Command Menu Item, khơng chứa Menu mà thực thi câu lệnh ta nhấn chuột vào minh họa Hình 4.2 Thực đơn Popup Menu Các menu Item mức đỉnh Thực đơn Command Menu Hình 4.2 Một ví dụ cửa số với thực đơn Hình 4.3 minh họa Thực đơn có hai Menu Item cấp Thực đơn 21 Thực đơn 22 Trong đó, Thực đơn 21 Popup Menu chứa hai thực đơn cấp Thực đơn 211 Thực đơn 212, Thực đơn 22 Command Menu Item Thực đơn Popup Menu Thực đơn 22 Command Menu Thực đơn 21 Popup Menu Hình 4.3 Ví dụ thực đơn cấp Popup Menu Ta tạo menu cơng cụ trực quan gõ trực tiếp mã lệnh XAML Tạo Menu cơng cụ trực quan Xem hình 4.4 minh họa công cụ tạo Menu cho ứng dụng WPF Visual Studio 2008 Chọn menu từ ToolBox, sau Nhấn chuột lên cửa sổ để tạo Menu Tiếp đến nhấn nút Menu để mở hộp thoại quản lý Menu Item hình 4.5 Properties Tiêu đề Menu Chọn mục Menu từ Toolbox Thêm Menu Item cấp Hình 4.4 Cơng cụ soạn thảo Menu cho ứng dụng WPF Visual Studio 2008 Hình 4.5 hộp thoại quản lý Menu Item, nhấn nút để thêm Menu Item nhập tiêu đề cho Menu Item mục Header Nếu muốn thêm Menu Item cấp Menu Item tại, nhấn nút Thêm Menu Item Thêm Menu Item cấp Tiêu đề Menu Item Hình 4.5 Hộp thoại Quản lý Menu Item Sử dụng mã XAML để tạo thực đơn Đoạn mã trình Menu XAML: Thanh Menu bắt đầu thẻ kết thúc thẻ đóng Có nhiều thuộc tính thẻ này, ví dụ Height="22" : Chiều cao menu 22 pixel Name="menu1" : Tên menu menu1 Tên menu mã trình C# sử dụng để quản lý VerticalAlignment="Top" : Menu để nằm bên Grid chứa Các Popup Menu tạo thẻ kết thúc thẻ đóng Giữa cặp thẻ thẻ khác để tạo nên Menu Item cấp Các Command Menu tạo thẻ , khơng có thẻ đóng Một số thuộc tính Menu Item bao gồm Header="Thực đơn _1": Tiêu đề hay nhãn Menu Item Dấu gạch đặt trước ký tự sử dụng làm phím tắt kết hợp với phím Alt để gọi Menu Item bàn phím Trong ví dụ ký tự dùng làm phím tắt cho Menu Item “Thực đơn 1”, ký tự dùng làm phím tắt hiển thị với dấu gạch chân người dùng nhấn phím Alt để mở Menu Name="Menu1": Tên Menu Item, cần thiết cho mã trình C# can thiệp vào Menu Item ToolTip="Cắt văn bản": Lời thích cho Menu Item di chuột qua Đối với Command Menu, có hai chế thực thi lệnh chọn Menu Nếu muốn gắn Command Menu với lệnh có sẵn hệ thống như: Copy, Cut, Paste, ta sử dụng thuộc tính Command Menu Item Ví dụ, lệnh làm cho Menu Item Copy thực cơng việc copy dịng văn chọn cửa sổ vào nhớ đệm Chú ý, lệnh hệ thống bắt đầu ApplicationCommands Nếu muốn gắn Command Menu với hàm xử lý kiện tự định nghĩa sử dụng thuộc tính Click Menu Item Ví dụ, để yêu cầu chọn "Thực đơn 211" gọi hàm MenuItem211_Click Dưới đoạn mã trình C# khai báo hàm xử lý kiện nhấn vào Menu khai báo XAML Khi menu chọn hàm tương ứng khai báo thuộc tính Click gọi làm nhiệm vụ đơn giản làm hiển thị hộp thông báo namespace WpfApplication1 { /// /// Interaction logic for Window1.xaml /// public partial class Window1 : Window { public Window1() { InitializeComponent(); } //Hàm xử lý kiện nhấn Menu "Thực đơn 211" private void MenuItem211_Click(object sender, RoutedEventArgs e) { MessageBox.Show("Bạn chọn Menu 211"); } //Hàm xử lý kiện nhấn Menu "Thực đơn 212" private void MenuItem212_Click(object sender, RoutedEventArgs e) { MessageBox.Show("Bạn chọn Menu 212"); } //Hàm xử lý kiện nhấn Menu "Thực đơn 22" private void MenuItem22_Click(object sender, RoutedEventArgs e) { MessageBox.Show("Bạn chọn Menu 22"); } //Hàm xử lý kiện nhấn Menu "Thực đơn 3" private void MenuItem3_Click(object sender, RoutedEventArgs e) { MessageBox.Show(" Bạn chọn Menu 3"); } } } 1.2 Menu Item với trạng thái Checked Unchecked Khi làm việc với Menu, đơi ta có chức với đặc thù có hai trạng thái On/Off Ví dụ chương cần có Menu Item để làm cho Textbox hiển thị dạng chữ đậm chữ thường, người dùng mong muốn Menu Item thể trạng thái On/Off tương ứng với kiểu chữ (chữ đậm/chữ thường) Textbox Điều khiển Menu WPF cung cấp cho loại Menu Item với hai trạng thái Checked UnChecked Khi thực đơn không chọn khơng có biểu tượng Khi thực đơn khơng chọn có biểu tượng Hình 4.6 Minh họa Menu Item với trạng thái Checked UnChecked Để tạo Menu Item có trạng thái, ta sử dụng thuộc tính IsCheckable="True" Menu Item Mã lệnh tạo "Thực đơn 23" sau: 22" Click="MenuItem22_Click" /> Checked UnChecked > 23" IsCheckable="True" Checked="Menu23_Checked" Đối với Menu Item có trạng thái, Menu chọn phát sinh hai kiện Checked Uncheked tương ứng Ta sử dụng thuộc tính Checked Unchecked để gắn hàm xử lý kiện cần thực thi Ở ví dụ trên, hàm Menu23_Checked gọi Menu "Thực đơn 23" đánh dấu, hàm Menu23_Unchecked gọi Menu "Thực đơn 23" bỏ dấu chọn Mã nguồn minh họa hai hàm sau: public partial class Window1 : Window { public Window1() { InitializeComponent(); } // //Hàm xử lý kiện Menu "Thực đơn 23" đánh dấu chọn private void Menu23_Checked(object sender, RoutedEventArgs e) { //Thiết lập thuộc tính chữ đậm cho textBox1 textBox1.FontWeight = FontWeights.Bold; } //Hàm xử lý kiện Menu "Thực đơn 23" bỏ dấu chọn private void Menu23_Unchecked(object sender, RoutedEventArgs e) { //Thiết lập thuộc tính chữ thường cho textBox1 textBox1.FontWeight = FontWeights.Normal; } } 1.3 Menu Item với biểu tượng hình ảnh Với ứng dụng xây dựng Net 2.0, công việc xây dựng Thực đơn Thanh cơng cụ với biểu tượng hình đơn giản, sử dụng cơng cụ thiết kế giao diện trực quan Ví dụ, muốn tạo menu có biểu tượng hình ảnh (icon), thêm Menu Trip vào form, sau thêm mục cho thực đơn (Menu Item) Nhấn chuột phải lên mục chọn “Set Image” thành công Tuy nhiên, xây dựng ứng dụng WPF, khơng có mục chọn “Set Image” nhấn chuột phải vào mục thực đơn Chúng ta phải nạp tệp hình ảnh, biểu tượng tài nguyên (Resource) ứng dụng viết số lệnh XAML để gắn biểu tượng cho Menu Item Nạp tệp hình ảnh, biểu tượng vào tài nguyên ứng dụng i Trên thực đơn Visual Studio, chọn Project → Properties bảng cài đặt thông số cài đặt cho ứng dụng ii Chọn mục resources iii Trong mục Add Resource chọn Add Existing File có sẵn File biểu tượng hình ảnh máy chọn New Images hay Add New Icon tùy ý iv Chú ý, sau thêm File hình ảnh biểu tượng vào tài nguyên, để điều khiển cửa sổ Menu, Toolbar sử dụng chúng, ta phải thiết lập thuộc tính 'Build Action : Resource' 'Copy to Output Directory : Do not copy' Thiết lập thuộc tính cho tài ngun hình ảnh Hình 4.7 Thêm tài nguyên thiết lập thuộc tính cho tài nguyên ảnh Viết mã lệnh XAML gắn biểu tượng cho Menu Item Chú cào cào nhỏ, ngồi đám cỏ Như vậy, xây dựng thành công menu với biểu tượng đẹp mắt hay menu với trạng thái Checked/UnChecked biết cách gắn hàm xử lý kiện cho menu Phần ta tìm hiểu công cụ Xây dựng sử dụng công cụ (Toolbar) Thanh công cụ (Toolbar) chứa chức dạng dãy hình ảnh biểu tượng, biểu tượng gắn với mục chức cụ thể Thông thường Toolbar chứa chức thiết yếu mà người dùng hay quan tâm nhất, Toolbar có ưu điểm dễ dàng thao tác Một cửa số có nhiều Toolbar Trong phần ta tìm hiểu phương pháp xây dựng Toolbar với nút chức thơng thường nút chức có trạng thái (Checked/UnChecked) Toolbar nằm ngang Toolbar nằm dọc Hình 4.8.Thanh công cụ - Toolbar 2.1 Nút công cụ thông thường Chúng ta bắt đầu tìm hiểu bước xây dựng Toolbar với nút bấm đơn giản ví dụ minh họa hình 4.9 Thanh cơng cụ bao gồm năm nút: Copy , Cut, Paste thực chức có sẵn hệ thống, Nút A a gắn với hàm xử lý kiện tự xây dựng, làm nhiệm vụ tăng/giảm cỡ chữ Textbox bên Copy Giảm cỡ chữ Cut Tăng cỡ chữ Paste Hình 4.9 Ví dụ minh họa Toolbar Thanh cơng cụ xây dựng đoạn mã XAML sau: Mã XAML tạo công cụ được bắt đầu thẻ kết thúc thẻ đóng Các nút lệnh (Button) công cụ tạo thẻ kết thúc thẻ đóng Name=" button1": Tên Button, cần thiết cho mã trình C# can thiệp vào Button ToolTip="Copy văn ": Lời thích cho Button di chuột qua Có hai chế thực thi lệnh chọn nút lệnh Toolbar Nếu muốn gắn nút lệnh với lệnh có sẵn hệ thống như: Copy, Cut, Paste, ta sử dụng thuộc tính Command Button Ví dụ, lệnh làm cho nút lệnh Copy thực cơng việc copy dịng văn chọn cửa sổ vào nhớ đệm Chú ý, lệnh hệ thống bắt đầu ApplicationCommands Nếu muốn gắn nút lệnh với hàm xử lý kiện tự định nghĩa sử dụng thuộc tính Click Button Ví dụ, để yêu cầu chọn "button4" gọi hàm IncreaseFont_Click Giữa cặp thẻ thẻ để định nghĩa hình ảnh biểu tượng nút bấm Thẻ dùng để tạo vạch phân cách cách nút bấm Mã nguồn minh họa hai hàm xử lý kiện nhấn nút button4và button5như sau: public partial class Window1 : Window { public Window1() { InitializeComponent(); } // //Hàm xử lý kiện button4 nhấn private void IncreaseFont_Click(object sender, RoutedEventArgs { if (textBox1.FontSize < 18) { textBox1.FontSize += 2;//Tăng cỡ font chữ textBox1 } } //Hàm xử lý kiện button5 nhấn private void DecreaseFont_Click(object sender, RoutedEventArgs { if (textBox1.FontSize > 10) { textBox1.FontSize -= 2;//Giảm cỡ font chữ textBox1 } } e) lên đơn vị e) lên đơn vị } 2.2 Nút cơng cụ có trạng thái Ngồi nút bấm thơng thường, cơng cụ cịn cho phép tạo nút bấm có trạng thái, trang thái chọn (Checked) có màu khác có đường viền để người dùng nhận biết trạng thái nút (xem minh họa hình 4.10) Nút B trạng thái Checked Nút I trạng thái UnChecked Hình 4.10 Ví dụ minh họa Toolbar với trạng thái Checked UnCheked Thanh cơng cụ với nút có trạng thái xây dựng đoạn mã XAML sau: 10 Khác với nút lệnh thông thường tạo thẻ kết thúc thẻ đóng , nút lệnh có trạng thái tạo nên thẻ kết thúc thẻ đóng Nút lệnh có trạng thái phát sinh hai kiện Checked Unchecked,tương ứng với trạng thái nút chọn hay bỏ chọn người dùng nhấn nút Trong ví dụ trên, nút check1 chọn hàm Bold_Checked gọi nút check1bỏ chọn hàm Bold_Unchecked gọi Hai hàm ta tự xây dựng với mã lệnh sau Mã nguồn minh họa hai hàm xử lý kiện nhấn nút check1: public partial class Window1 : Window { public Window1() { InitializeComponent(); } // private void Bold_Checked(object sender, RoutedEventArgs e) { //Thiết lập thuộc tính chữ đậm cho textBox1 textBox1.FontWeight = FontWeights.Bold; } private void Bold_Unchecked(object sender, RoutedEventArgs e) { //Thiết lập thuộc tính chữ thường cho textBox1 textBox1.FontWeight = FontWeights.Normal; } private void Italic_Checked(object sender, RoutedEventArgs e) { //Thiết lập thuộc tính chữ nghiêng cho textBox1 textBox1.FontStyle = FontStyles.Italic; } private void Italic_Unchecked(object sender, RoutedEventArgs e) { //Thiết lập thuộc tính chữ thẳng đứng cho textBox1 textBox1.FontStyle = FontStyles.Normal; } } Ngồi nút bấm có trạng thái kiểu này, cơng cụ cịn cho phép tạo nút bấm có trạng thái loại trừ cách sử dụng thẻ để tạo nút bẩm Như vậy, hoàn tất học xây dựng quản lý Thực đơn công cụ Tiếp theo ví dụ tổng hợp lại kiến thức Ví dụ tổng hợp xây dựng Menu Toolbar Xây dựng cửa sổ bao gồm thực đơn, công cụ hộp soạn thảo minh họa hình 4.11 11 Hình 4.11 Ví dụ minh họa tổng hợp Menu Toolbar Các bước thực sau: 3.1 Tạo ứng dụng WPF 12 Ở đây, ta ý chọn Net Framework 3.5 3.2 Mã XAML giao diện Mở file Window1.xaml tương ứng với file code Window1.xaml.cs 13 Chú cào cào nhỏ, ngồi đám cỏ 3.3 Mã lệnh C# xử lý kiện using using using using using using using using using using using System; System.Collections.Generic; System.Text; System.Windows; System.Windows.Controls; System.Windows.Data; System.Windows.Documents; System.Windows.Input; System.Windows.Media; System.Windows.Media.Imaging; System.Windows.Shapes; namespace WpfMenuAndToolbar { /// /// Interaction logic for Window1.xaml /// public partial class Window1 : System.Windows.Window { public Window1() { InitializeComponent(); } private void Bold_Checked(object sender, RoutedEventArgs e) { textBox1.FontWeight = FontWeights.Bold; check1.IsChecked = true; 14 Menu21.IsChecked = true; } private void Bold_Unchecked(object sender, RoutedEventArgs e) { textBox1.FontWeight = FontWeights.Normal; check1.IsChecked = false; Menu21.IsChecked = false; } private void Italic_Checked(object sender, RoutedEventArgs e) { textBox1.FontStyle = FontStyles.Italic; check2.IsChecked = true; Menu22.IsChecked = true; } private void Italic_Unchecked(object sender, RoutedEventArgs e) { textBox1.FontStyle = FontStyles.Normal; check2.IsChecked = false; Menu22.IsChecked = false; } private void IncreaseFont_Click(object sender, RoutedEventArgs e) { if (textBox1.FontSize < 18) { textBox1.FontSize += 2; } } private void DecreaseFont_Click(object sender, RoutedEventArgs e) { if (textBox1.FontSize > 10) { textBox1.FontSize -= 2; } } } } F5 để chạy ứng dụng Ta thu kết tương tự yêu cầu Câu hỏi ôn tập Trên Menu, Menu Item mức đỉnh Popup Menu ? A Đúng B Sai Câu trả lời: B Menu Item mức Popup Menu Popup Menu? A Đúng B Sai Câu trả lời: A Thuộc tính sau Menu dùng để gán nhãn (tiêu đề) cho Menu? A Title B Header C Text D Tooltip 15 Câu trả lời: B Các thuộc tính được sử dụng để gán lệnh cho Menu Item (Chọn nhiều) A Command B Click C OnClick D Checked UnChecked Câu trả lời: A, B D Thanh công cụ phép nằm vị trí cửa sổ A Nằm ngang B Nằm dọc C Được phép nằm theo chiều dọc chiều ngang Câu trả lời: C Những thẻ sau dùng để tạo nút thực đơn (Chọn nhiều): A B C Câu trả lời: A B Tài liệu tham khảo Windows Presentation Foundation, URL: http://msdn.microsoft.com/en-us/library/ms754130.aspx WPF - XAML Introduction, URL: http://homepage.ntlworld.com/herring1/xamlintro.html Menu Icons in WPF, URL: http://anuraj.wordpress.com/2008/06/23/menu-icons-in-wpf/ WPF Sample Series, URL: http://karlshifflett.wordpress.com/2008/01/23/wpf-sample-series-stretchtoolbar-width-of-window/ 16 ... Thực đơn 21 Popup Menu chứa hai thực đơn cấp Thực đơn 211 Thực đơn 212, Thực đơn 22 Command Menu Item Thực đơn Popup Menu Thực đơn 22 Command Menu Thực đơn 21 Popup Menu Hình 4.3 Ví dụ thực đơn. . .Thực đơn Popup Menu Các menu Item mức đỉnh Thực đơn Command Menu Hình 4.2 Một ví dụ cửa số với thực đơn Hình 4.3 minh họa Thực đơn có hai Menu Item cấp Thực đơn 21 Thực đơn 22 Trong đó, Thực. .. lệnh tạo "Thực đơn 23" sau: