Bài giảng Phát triển ứng dụng giao diện - Windows Presentation Foundation (Tiếp theo)

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.

Windows Presentation Foundation (WPF)

(tiếp theo)

Phát triển Ứng dụng Giao diện

Ngôn ngữ XAML

là biến thể của Microsoft XML để mô tả giao diện người dùng (GUI)

HTML (không phụ thuộc vào ngôn ngữ lập trình xử lý)

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)

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

 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)

 XAML

< StackPanel Margin ="10">

< TextBlock Margin ="20"> Welcome to the World of XAML </ TextBlock >

< Button Margin ="10" HorizontalAlignment ="Right"> OK </ Button >

</ StackPanel >

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

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ụ:

<Border BorderBrush ="Blue" BorderThickness ="3,10">

<TextBlock><Run Text ="OK"/></TextBlock>

</Border>

 Ở 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

 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ụ:

< TextBox x : Name ="textBox"/>

< Label Content ="{ Binding Text , ElementName =textBox}"/>

Layout

tiếp cận imperative (áp đặt) như WinForms và

hướng tiếp cận declarative (khai báo) của Web

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)

đồ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 (tt)

 Label

< Label Height ="30" HorizontalAlignment ="Left" Margin ="10,15,0,0"

Name ="label1" VerticalAlignment ="Top" Width ="60"> Nội dung </ Label >

 RadioButton

<RadioButton Height ="22" Margin ="80,99,0,0"

Name ="rbM" VerticalAlignment ="Top"

HorizontalAlignment ="Left" Width ="79" GroupName ="sex"

IsChecked ="True">

Male

</RadioButton>

<RadioButton Height ="22" HorizontalAlignment ="Right"

Margin ="0,99,30,0" Name ="rbF" VerticalAlignment ="Top"

Width ="79" GroupName ="sex">

Female

</RadioButton>

Controls (tt)

 ListBox

Name ="listBox1" VerticalAlignment ="Bottom"

Data Binding

Bài tập

2 Hỗn số với WPF