Phát triển ứng dụng giao diện - Ngôn ngữ Xaml

Windows Presentation Foundation (WPF) (tiếp theo) Phát triển Ứng dụng Giao diện Nội dung  Ngôn ngữ XAML  Layout  Controls  Data Binding Ngôn ngữ XAML  XAML (eXtensible Application Markup Language) là biến thể của Microsoft XML để mô tả giao diện người dùng (GUI).  Giúp cho dễ dàng viết và 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 nay XAML được sử dụng để tạo giao diện người dùng trong WPF, Siverlight, đặc tả workflows trong WF và cho electronic paper trong tiêu chuẩn XPS. Ngôn ngữ XAML (tt)  Tất cả những gì có thể làm với XAML thì có thể hoàn thành với code. XAML là một cách khác để khai báo và 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 thì ngắn gọn và dễ đọc.  Phân tách rõ giữa mã thiết kế và logic.  Các công cụ chuyên thiết kế giao diện như Microsoft Blend sử dụng XAML.  Việc tách biệt mã thiết kế và logic giúp tách biệt rõ ràng vai trò của nhà thiết kế và lập trình viên. Ngôn ngữ XAML (tt)  So sánh giữa XAML với code thuần túy  XAML Welcome to the World of XAML OK Ngôn ngữ XAML (tt)  Code thuần // tạo bộ chứa StackPanel stackPanel = new StackPanel(); this.Content = stackPanel; // tạo hiện 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 bởi các Elements (yếu tố, phần tử XML). Điều này giúp cho việc tạo các đố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): đây là một kiến trúc mạnh mẽ của WPF. Chúng được thực hiện ngầm hoàn toàn.  Ví dụ:  Ở trên thì Blue chỉ là một chuỗi sẽ được 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ó rất nhiều loại chuyển đổi ngầm định sẵn. Tuy thế vẫn có thể tự tạo kiểu chuyển đổi riêng. Ngôn ngữ XAML (tt)  Case Sensitive (phân biệt hoa thường) và khoảng trắng.  Trong XAML luôn phân biệt hoa thường với các thành phần Object Element, Property, Property Element....  Riêng với giá trị trong XAML có thể không phân biệt hoa thường vì phụ thuộc vào bộ chuyển đổi kiểu ngầm định.  Ví dụ: có thể viết “true” hay “True” đều được.  Ngoài ra XAML tự loại bỏ các khoảng trắng dư thừa. Ngôn ngữ XAML (tt)  Markup Extensions (Phần đánh dấu mở rộng) là một khái niệm của XAML, nó là dynamic placeholders cho giá trị thuộc tính trong XAML. Nó quyết định giá trị property vào thời điểm chạy (runtime).  WPF tích hợp một vài Markup Extensions như:  Binding: để ràng buộc giá trị của 2 properties khác nhau.  StaticResource: resource không cập nhật.  DynamicResource: resource có cập nhật.  TemplateBinding: để ràng buộc property của control template với dependency property của control.  x:Static: quyết định giá trị của một static property.  x:Null: trả về giá trị null.  Ví dụ: Layout  Layout (bố cục) trong WPF xây dựng theo hướng tiếp cận imperative (áp đặt) như WinForms và hướng tiếp cận declarative (khai báo) của Web.  Layout trong WPF dựa trên khái niệm Panel.  Phần lớn các thầnh phần UI trong WPF chỉ chứa duy nhất một phần tử con. Muốn chứa nhiều phần tử con thì phải được bao gọn trong Panel. Layout – Các loại Panel thông dụng  StackPanel bố trí các phần tử con nằm trong nó bằng cách sắp xếp chúng theo thứ tự trước sau. Các phần tử sẽ xuất hiện theo thứ tự mà chúng được khai báo trong file XAML theo chiều dọc (ngầm định) hoặc theo chiều ngang.  Ví dụ: Layout – Các loại Panel thông dụng (tt)  WrapPanel cho phép sắp xếp các phần tử từ trái sang phải. Khi một dòng phần tử đã điền đầy khoảng không gian cho phép theo chiều ngang, WrapPanel sẽ cuốn phần tử tiếp theo xuống đầu dòng tiếp theo (tương tự như việc cuốn text).  Ví dụ: Layout – Các loại Panel thông dụng (tt)  DockPanel cho phép các phần tử bám lên các cạnh của panel DockPanel bao chứa chúng, tương tự như khái niệm Docking trong Windows Forms. Nếu như có nhiều phần tử cùng bám về một cạnh, chúng sẽ tuân theo thứ tự mà chúng được khai báo trong file XAML.  Ví dụ: Layout – Các loại Panel thông dụng (tt)  Canvas sử dụng phương thức sắp xếp các phần tử UI theo vị trí tuyệt đối bằng cách đặt thuộc tính Top (đỉnh) và Left (bên trái) của chúng. Thêm vào đó, thay vì đặt thuộc tính Top, Left, ta có thể đặt thuộc tính Bottom (đáy), Right (bên phải). Nếu ta đặt đồng thời thuộc tính Left và Right, thuộc tính Right sẽ bị bỏ qua. Phần tử UI sẽ không thay đổi kích thước để thỏa mãn 2 thuộc tính trên cùng một lúc. Tương tự thuộc tính Top sẽ được ưu tiên hơn thuộc tính Bottom.  Các phần tử được khai báo sớm hơn trong file XAML sẽ có thể bị che khuất phía dưới các phần tử được khai báo muộn hơn nếu vị trí của chúng xếp chồng lên nhau. 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 là dạng panel hết sức linh hoạt, và có thể sử dụng để đạt được gần như tất cả khả năng mà các dạng panel khác có thể làm được, mặc dù mức độ khó dễ không giống nhau.  Grid cho phép ta phân định các dòng và cột theo dạng một lưới kẻ ô, và sau đó sẽ sắp đặt các phần tử UI vào các ô tùy ý. Grid sẽ tự động chia đều các dòng và cột (dựa trên kích thước của phần nội dung).  Sử dụng dấu sao (*) để phân định kích thước theo tỉ lệ hoặc phân định giá trị tuyệt đối về chiều cao hoặc chiều rộng cho hàng và cột. Layout – Các loại Panel thông dụng (tt)  Ví dụ Controls  Các controls cơ bản tương tự WinForms  TextBlock  Label  TextBox  Button  CheckBox  RadioButton  ListBox  ComboBox  Các thuộc tính mặc định chính là content của control. Controls (tt)  Ví dụ  Label <Label Height="30" HorizontalAlignment="Left" Margin="10,15,0,0" Name="label1" VerticalAlignment="Top" Width="60">Nội dung  RadioButton <RadioButton Height="22" Margin="80,99,0,0" Name="rbM" VerticalAlignment="Top" HorizontalAlignment="Left" Width="79" GroupName="sex" IsChecked="True"> Male <RadioButton Height="22" HorizontalAlignment="Right" Margin="0,99,30,0" Name="rbF" VerticalAlignment="Top" Width="79" GroupName="sex"> Female Controls (tt)  Ví dụ  ListBox <ListBox Height="68" Margin="80,0,33,77" Name="listBox1" VerticalAlignment="Bottom" SelectedIndex="0"> 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 (+, -, *, /) 2 Hỗn số với WPF.