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

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)

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
<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.
 Ví dụ:
<Button>
<Button.Content>
<Image Source="Images/OK.png" Width="50" Height="50" />

</Button.Content>
</Button>


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.


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

<TextBox x:Name="textBox"/>
<Label Content="{Binding Text, ElementName=textBox}"/>


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
Name="label1" VerticalAlignment="Top" Width="60">Nội dung</Label>

 RadioButton
Name="rbM" VerticalAlignment="Top"
HorizontalAlignment="Left" Width="79" GroupName="sex"
IsChecked="True">
Male
</RadioButton>
Margin="0,99,30,0" Name="rbF" VerticalAlignment="Top"
Width="79" GroupName="sex">
Female
</RadioButton>


Controls (tt)
 Ví dụ
 ListBox

Name="listBox1" VerticalAlignment="Bottom"

SelectedIndex="0">
<ListBoxItem>Hà nội</ListBoxItem>
<ListBoxItem>TP. Hồ Chí
Minh</ListBoxItem>
<ListBoxItem>Hải Phòng</ListBoxItem>
<ListBoxItem>Đà Nẵng</ListBoxItem>
</ListBox>


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.