Bài giảng Phát triển ứng dụng giao diện - Windows Presentation Foundation (Tiếp theo) sau đây sẽ giới thiệu tới các bạn về ngôn ngữ XAML; Layout; Controls; Data Binding. Mời các bạn tham khảo bài giảng để bổ sung thêm kiến thức về lĩnh vực này.
Phát triển Ứng dụng Giao diện Windows Presentation Foundation (WPF) (tiếp theo) Nội dung Ngôn ngữ XAML Layout Controls Data Binding Ngôn ngữ XAML XAML (eXtensible Application Markup Language) biến thể Microsoft XML để mô tả giao diện người dùng (GUI) Giúp cho dễ dàng viết chỉnh sửa giao diện giống HTML (khơng phụ thuộc vào ngơn ngữ lập trình xử lý) Ngày XAML sử dụng để tạo giao diện người dùng WPF, Siverlight, đặc tả workflows WF cho electronic paper tiêu chuẩn XPS Ngơn ngữ XAML (tt) Tất làm với XAML hồn thành với code XAML cách khác để khai báo khởi tạo đối tượng Có thể sử dụng WPF mà khơng cần XAML Sử dụng XAML có ưu điểm sau XAML ngắn gọn dễ đọc Phân tách rõ mã thiết kế logic Các công cụ chuyên thiết kế giao diện Microsoft Blend sử dụng XAML Việc tách biệt mã thiết kế logic giúp tách biệt rõ ràng vai trò nhà thiết kế lập trình viên Ngơn ngữ XAML (tt) So sánh XAML với code túy XAML Welcome to the World of XAML OK Ngôn ngữ XAML (tt) Code // tạo chứa StackPanel stackPanel = new StackPanel(); this.Content = stackPanel; // tạo chuỗi TextBlock textBlock = new TextBlock(); textBlock.Margin = new Thickness(10); textBlock.Text = "Welcome to the World of XAML"; stackPanel.Children.Add(textBlock); // tạo button Button button = new Button(); button.Margin = new Thickness(20); button.Content = "OK"; stackPanel.Children.Add(button); Ngôn ngữ XAML (tt) Sử dụng thiết lập properties Elements (yếu tố, phần tử XML) Điều giúp cho việc tạo đối tượng phức hợp (complex object) dễ dàng Ví dụ: Ngôn ngữ XAML (tt) Chuyển đổi kiểu ngầm định (implicit): kiến trúc mạnh mẽ WPF Chúng thực ngầm hồn tồn Ví dụ: Ở Blue chuỗi BrushConverter chuyển đổi ngầm định thành System.Windows.Media.Brushes.Blue Tương tự với đối tượng Thickness Trong WPF có nhiều loại chuyển đổi ngầm định sẵn Tuy tự tạo kiểu chuyển đổi riêng Ngôn ngữ XAML (tt) Case Sensitive (phân biệt hoa thường) khoảng trắng Trong XAML phân biệt hoa thường với thành phần Object Element, Property, Property Element Riêng với giá trị XAML khơng phân biệt hoa thường phụ thuộc vào chuyển đổi kiểu ngầm định Ví dụ: viết “true” hay “True” Ngoài XAML tự loại bỏ khoảng trắng dư thừa Ngôn ngữ XAML (tt) Markup Extensions (Phần đánh dấu mở rộng) khái niệm XAML, dynamic placeholders cho giá trị thuộc tính XAML Nó định giá trị property vào thời điểm chạy (runtime) WPF tích hợp vài Markup Extensions như: Binding: để ràng buộc giá trị properties khác StaticResource: resource khơng cập nhật DynamicResource: resource có cập nhật TemplateBinding: để ràng buộc property control template với dependency property control x:Static: định giá trị static property x:Null: trả giá trị null Ví dụ: Layout Layout (bố cục) WPF xây dựng theo hướng tiếp cận imperative (áp đặt) WinForms hướng tiếp cận declarative (khai báo) Web Layout WPF dựa khái niệm Panel Phần lớn thầnh phần UI WPF chứa phần tử Muốn chứa nhiều phần tử phải bao gọn Panel Layout – Các loại Panel thông dụng StackPanel bố trí phần tử nằm cách xếp chúng theo thứ tự trước sau Các phần tử xuất theo thứ tự mà chúng khai báo file XAML theo chiều dọc (ngầm định) theo chiều ngang Ví dụ: Layout – Các loại Panel thông dụng (tt) WrapPanel cho phép xếp phần tử từ trái sang phải Khi dịng phần tử điền đầy khoảng khơng gian cho phép theo chiều ngang, WrapPanel phần tử xuống đầu dòng (tương tự việc text) Ví dụ: Layout – Các loại Panel thông dụng (tt) DockPanel cho phép phần tử bám lên cạnh panel DockPanel bao chứa chúng, tương tự khái niệm Docking Windows Forms Nếu có nhiều phần tử bám cạnh, chúng tuân theo thứ tự mà chúng khai báo file XAML Ví dụ: Layout – Các loại Panel thông dụng (tt) Canvas sử dụng phương thức xếp phần tử UI theo vị trí tuyệt đối cách đặt thuộc tính Top (đỉnh) Left (bên trái) chúng Thêm vào đó, thay đặt thuộc tính Top, Left, ta đặt thuộc tính Bottom (đáy), Right (bên phải) Nếu ta đặt đồng thời thuộc tính Left Right, thuộc tính Right bị bỏ qua Phần tử UI không thay đổi kích thước để thỏa mãn thuộc tính lúc Tương tự thuộc tính Top ưu tiên thuộc tính Bottom Các phần tử khai báo sớm file XAML bị che khuất phía phần tử khai báo muộn vị trí chúng xếp chồng lên Layout – Các loại Panel thông dụng (tt) Ví dụ Layout – Các loại Panel thơng dụng (tt) Grid dạng panel linh hoạt, sử dụng để đạt gần tất khả mà dạng panel khác làm được, mức độ khó dễ khơng giống Grid cho phép ta phân định dịng cột theo dạng lưới kẻ ơ, sau đặt phần tử UI vào ô tùy ý Grid tự động chia dịng cột (dựa kích thước phần nội dung) Sử dụng dấu (*) để phân định kích thước theo tỉ lệ phân định giá trị tuyệt đối chiều cao chiều rộng cho hàng cột Layout – Các loại Panel thông dụng (tt) Ví dụ Controls Các controls tương tự WinForms TextBlock Label TextBox Button CheckBox RadioButton ListBox ComboBox Các thuộc tính mặc định content control Controls (tt) Ví dụ Label Nội dung RadioButton Male Female Controls (tt) Ví dụ ListBox Hà nội TP Hồ Chí Minh Hải Phịng Đà Nẵng Data Binding Ví dụ: Bài tập Xây dựng chương trình máy tính đơn giản (+, -, *, /) Hỗn số với WPF ... Microsoft XML để mô tả giao diện người dùng (GUI) Giúp cho dễ dàng viết chỉnh sửa giao diện giống HTML (không phụ thuộc vào ngơn ngữ lập trình xử lý) Ngày XAML sử dụng để tạo giao diện người dùng... Có thể sử dụng WPF mà khơng cần XAML Sử dụng XAML có ưu điểm sau XAML ngắn gọn dễ đọc Phân tách rõ mã thiết kế logic Các công cụ chuyên thiết kế giao diện Microsoft Blend sử dụng XAML... chúng xếp chồng lên Layout – Các loại Panel thơng dụng (tt) Ví dụ Layout – Các loại Panel thông dụng (tt) Grid dạng panel linh hoạt, sử dụng để đạt gần tất khả mà dạng panel khác làm được,