nghiên cứu công nghệ wpt và xây dựng ứng dụng minh họa

Đề Tài: Nghiên Cứu Công Nghệ WPF và Xây Dựng Ứng Dụng Minh Họa
1
Lời Cảm Ơn

Chúng em xin bày tỏ lòng biết ơn sâu sắc đến thầy Trần Sơn Hải, ngƣời đã
hƣớng dẫn tận tình và giúp đỡ chúng em hoàn thành luận văn tốt nghiệp.
Trong thời gian thực hiện luận văn tốt nghiệp, chúng em xin cảm ơn tới tập thể
thầy cô khoa Công Nghệ Thông Tin – Toán Ứng Dụng trƣờng đại học Tôn Đức
Thắng đã truyền đạt cho chúng em những kiến thức và kinh nghiệm bổ ích trong
quá trình học tập và nghiên cứu tại trƣờng.
Sau cùng chúng em xin chân thành cảm ơn trƣờng đại học Tôn Đức Thắng đã
tạo điều kiện giúp đỡ chúng em hoàn thành luận tốt nghiệp.

Thành phố Hồ Chí Minh, ngày 15 tháng 6 năm 2009
Sinh Viên
Nguyễn Quang Nguyên
Trần Văn Khánh
Đề Tài: Nghiên Cứu Công Nghệ WPF và Xây Dựng Ứng Dụng Minh Họa
2
Mục Lục

PHẦN 1 10
NGHIÊN CỨU CÔNG NGHỆ WPF 10
LỜI NÓI ĐẦU 11
CHƢƠNG 1: TỔNG QUAN WPF 13
1.1 Nền tảng thống nhất để xây dựng giao diện ngƣời dùng 13
1.2 Khả năng làm việc chung giữa ngƣời thiết kế giao diện và lập trình viên 15
1.3 Kiến trúc của WPF 18
1.4 Các đặc điểm tạo nên sự khác biệt của WPF: 19
1.5 Các ứng dụng đƣợc xây dựng trên WPF 21
1.6 Các GUI trƣớc WPF 23
1.7 Kết chƣơng 24
CHƢƠNG 2: TỔNG QUAN XAML 25
2.1 Các thành phần XAML 25
2.2 XAML Compilation 25
2.3 Cơ bản XAML 26
2.4 XAML Namespaces 27
2.5 Code-Behind 28
2.6 Cú Pháp XAML 29
2.7 Thiết lập giá trị properties 30
2.8 Content property 31

2.9 Từ Khoá XAML 31
2.10 Kết chƣơng 33
CHƢƠNG 3 : LAYOUT 34
3.1 Giới thiệu chung 34
3.2 Các Panel thông dụng 36
3.2.1 StackPanel 36
3.2.2 WrapPanel 42
3.2.3 DockPanel 42
3.2.4 Canvas 43
3.2.5 Grid 44
3.3 Ví dụ xây dựng Layout trong WPF 51
3.4 A Modular User Interface 53
3.5 Kết chƣơng 54
CHƢƠNG 4: MARKUP EXTENSION VÀ DEPENDENCY PROPERTY 55
4.1 Markup extension 55
4.1.1 Các markup extension đặc tả WPF: 55
4.1.2 Các markup extension đặc tả XAML 56
4.2 Depencty property 57
4.2.1 Resources 58
4.2.2 Data Binding 59
Đề Tài: Nghiên Cứu Công Nghệ WPF và Xây Dựng Ứng Dụng Minh Họa
3
4.2.3 Styles 60
4.2.4 Animations 60
4.2.5 Kế thừa giá trị thuộc tính 60
4.3 Kết chƣơng 61
CHƢƠNG 5 : CONTROL CƠ BẢN 62
5.1 Tổng quan về control trong WPF 62
5.2 Các control cơ bản trong WPF 64
5.2.1 Label 64

5.2.2 TextBox 65
5.2.3 PasswordBox 66
5.2.4 Button 67
5.2.5 CheckBox và RadionButton 68
5.2.6 ListBox 70
5.2.7 ComboBox 71
5.3 Ví dụ xây dựng control trong WPF 73
5.4 Kết chƣơng 77
CHƢƠNG 6 : CONTROL NÂNG CAO 78
6.1 Hộp lựa chọn font chữ - Font Chooser 78
6.2 Hộp danh mục ảnh – Image ListBox 79
6.2.1 Thêm các hình ảnh vào project 80
6.2.2 Xây dựng mã Xaml 80
6.3 Hộp mở rộng - Expander 81
6.4 Hộp soạn thảo đa năng – RichTextBox 84
6.4.1 Chức năng cơ bản 84
6.4.2 Giao diện command 85
6.5 Kết chƣơng 87
CHƢƠNG 7: ROUTED EVENT VÀ COMMAND 88
7.1 Routed event 88
7.1.1 Event Handler 88
7.1.2 Routed Event 91
7.1.3 Routing strategies 93
7.1.4 Sử dụng Routed Event 99
7.2 Lệnh (Command) 100
7.2.1 Lệnh là gì ? 100
7.2.2 Những khái niệm chính trong hệ thống lệnh của WPF 101
7.2.3 Lệnh có định tuyến 101
7.2.4 Ví dụ về việc sử dụng lệnh 102
7.2.5 Lệnh tự tạo 105

7.3 Kết chƣơng 106
CHƢƠNG 8: STYLE VÀ TEMPLATE 108
8.1 Style 108
8.1.1 x:Key 109
8.1.2 BasedOn 109
Đề Tài: Nghiên Cứu Công Nghệ WPF và Xây Dựng Ứng Dụng Minh Họa
4
8.1.3 TargetType 110
8.1.4 Setters 110
8.1.5 Triggers 113
8.2 Template 118
8.2.1 Control Templates 118
8.2.2 DataTemplate 122
8.3 Kết Chƣơng 124
CHƢƠNG 9: DATA BINDING 125
9.1 Thuộc tính Data binding 126
9.3 Thuộc tính Mode 127
9.3 Data binding với XML 128
9.4 Data binding với một đối tƣợng Collection 129
9.5 DataContext 130
9.6 MultiBinding 131
9.7 UpdateSourceTrigger 133
9.8 ObjectDataProvider 135
9.10 Kết chƣơng 138
CHƢƠNG 10 : MENU VÀ TOOLBAR 139
10.1 Xây dựng menu và sử dụng menu trong WPF 139
10.1.1 Xây dựng Menu và các Menu Item đơn giản 140
10.1.2 Menu Item với trạng thái Checked và UnChecked 144
10.1.3 Menu Item với các biểu tƣợng hình ảnh 145
10.2 Xây dựng và sử dụng thanh công cụ - ToolBar 147

10.2.1 Nút công cụ thông thƣờng 148
10.2.2 Nút công cụ có trạng thái 150
10.3 Ví dụ về xây dựng Menu và ToolBar trong WPF 152
10.4 Kết chƣơng 156
CHƢƠNG 11 : CONTEXTMENU VÀ STATUSBAR 157
11.1 Xây dựng và sử dụng thực đơn ngữ cảnh – ContextMenu 158
11.1.1 MenuContext riêng biệt 159
11.1.2 MenuContext chia sẻ - Shared ContextMenu 161
11.2 Xây dựng và sử dụng thanh trạng thái – StatusBar 163
11.2.1 StatusBar với các phần tử văn bản 163
11.2.2 StatusBar với phần tử là thanh tiến trình (Progress Bar) 165
11.2.3 StatusBar với phần tử là hình ảnh 166
11.3 Kết chƣơng 167
CHƢƠNG 12 : GRAPHICS 168
12.1 Các đối tƣợng đồ họa cơ bản trong WPF - Shape 168
12.1.1 Đoạn thẳng – Line 168
12.1.2 Chuỗi đoạn thẳng – Polyline 170
12.1.3 Hình chữ nhật – Rectangle 171
12.1.4 Hình elip và hình tròn – Ellipse – Circle 173
12.1.5 Đa giác – Polygon 175
Đề Tài: Nghiên Cứu Công Nghệ WPF và Xây Dựng Ứng Dụng Minh Họa
5
12.1.6 Đƣờng cong Bezier bằng đối tƣợng Path 176
12.2 Sử dụng chổi tô – Brush 178
12.2.1 Tô màu đồng nhất – Solid Color 179
12.2.2 Tô màu theo định hƣớng tuyến tính – Linear Gradient Color 180
12.2.3 Đổ màu theo bán kinh hình tròn – Radial Gradient 185
12.2.4 Tô màu bằng Bitmap 186
12.2.5 Thiết lập độ mờ của chổi tô – Opacity 189
12.3 Biến đổi hình học – Transform 191

12.4 Kết chƣơng 194
CHƢƠNG 13: ANIMATION 195
13.1 Basic Animation 195
13.2 Các lớp Animation 196
13.3 Animation trong code 197
13.3.1 From 199
13.3.2 To 199
13.3.3 By 199
13.3.4 Duration 200
13.4 Animation kép – Simultaneuos Animations 200
13.5 The Timeline Class 200
13.6 Animation và Storyboards 203
13.6.1 Storyboard 204
13.6.2 Event trigger 204
13.6.3 Điều khiển các kĩ thuật phát lại – Playback 208
13.7 Kiểu Animation Revisited 211
13.7.1 Animation biến đổi (Transforms) 211
CHƢƠNG 14: KẾT LUẬN Error! Bookmark not defined.

Đề Tài: Nghiên Cứu Công Nghệ WPF và Xây Dựng Ứng Dụng Minh Họa
6
Mục lục Hình

Hình 1.1:XAML hỗ trợ lập trình viên và ngƣời thiết kế làm việc chung. 16
Hình 1.2: Visual Studio 2008. 17
Hình 1.3: Microsoft Expression Blend 2. 17
Hình 1.4: Kiến trúc WPF 18
Hình 1.5: Yahoo messager 9 21
Hình 1.6: AMD Live 21
Hình 1.7: Lectra 22

Hình 1.8: BBC Showcase 2007. 22
Hình 1.9: The New York Times 23
Hình 3.1: Kết quả sửa đổi đoạn mã XAML hiển thị hơn một phần tử giao diện con
trong một nút bấm sử dụng StackPanel 36
Hình 3.2: Sắp xếp nhiều control theo thứ tự kế tiếp trên xuống dƣới sử dụng
StackPanel 37
Hình 3.3: Sắp xếp nhiều control theo thứ tự kế tiếp trái sang phải sử dụng
StackPanel 38
Hình 3.4: Hình ví dụ margin 40
Hình 3.5: Canh Margin trong WPF 40
Hình 3.6: Thuộc tính Maximum, Minimum và Explitxit Sizes trong WPF 41
Hình 3.7: Sử dụng WrapPanel 42
Hình 3.8: Sử dụng DockPanel 43
Hình 3.9: Sử dụng Canvas để sắp xếp các phần tử UI 44
Hình 3.10: Ví dụ Grid đơn giản 46
Hình 3.11: Sử dụng Grid để sắp xếp các phần tử UI 47
Hinh 3.12: Các Control với thuộc tính Spanning 48
Hình 3.13: Thay đổi kích thƣớc của Grid bằng thuộc tính Split 49
Hình 3.14: Grid cho phép thay đổi kích thƣớc của 2 vùng ngang và dọc. 50
Hình 3.15: Một dãy các panel trong WrapPanel 53
Hình 3.16: Một vài panel đƣợc ẩn đi 54
Hình 5.1: Một ví dụ về cửa số với các control đơn giản 62
Hình 5.2: Minh họa về label 64
Hình 5.3: Minh họa về TextBox 65
Hình 5.4: Minh họa về nút bấm 67
Hình 5.5: Minh họa về hộp chọn Radio và CheckBox 68
Hình 5.6: Minh họa về hộp chọn ListBox 70
Đề Tài: Nghiên Cứu Công Nghệ WPF và Xây Dựng Ứng Dụng Minh Họa
7
Hình 5.7: Minh họa về hộp chọn ComboBox 72

Hình 6.1: Hộp lựa chọn phông chữ đƣợc xây dựng bằng WPF 79
Hình 6.2: Danh mục đồ uống có kèm ảnh minh hoạ xây dựng bằng WPF 81
Hình 6.3: Tạo lập và sử dụng hộp mở rộng bằng WPF 84
Hình 6.4: Xây dựng hộp soạn thảo đa năng đơn giản với các chức năng thay đổi
kiểu chữ bằng WPF 86
Hình 7.1: Liên kết trực quan. 89
Hình 7.2: Visual tree và logical tree. 93
Hình 7.3: Bubble 94
Hình 7.4: Tunnel. 95
Hình 7.5: Direct 95
Hình 7.6: Đƣờng đi sự kiện. 96
Hình 7.7: Thêm xử lí hander trong mã xaml. 98
Hình 8.1: Kết quả dùng Setter. 112
Hình 8.2: Kết quả ban đầu trong ví dụ khác nhau Trigger và Event Trigger 117
Hình 8.3: Khi chuột đƣợc di chuyển vào button 117
Hình 8.4: Sự kiện khi click chuột. 117
Hình 8.5: Hình kết quả ví dụ control template. 119
Hình 8.6: Hình kết quả định nghĩa hành vi của control template. 121
Hình 8.7: Khi chuột di chuyển qua, màu sắc của Button sẽ thay đổi. 121
Hình 8.8: Khi nhấp chuột vào Button, kích thƣớc sẽ thu nhỏ 122
Hình 8.9: Ví dụ trigger trong data template 124
Hình 8.10: Ví dụ trigger trong data template 124
Hình 9.1: Mô hình Data Binding 126
Hình 9.2: Mô hình thuộc tính mode trong data binding 127
Hình 9.3: Ví dụ các mode trong data binding. 128
Hình 9.4: Ví dụ UpdateSourceTrigger. 134
Hình 10.1: Một ví dụ về cửa số với thanh thực đơn 140
Hình 10.2: Ví dụ về thực đơn cấp dƣới là một Popup Menu 140
Hình 10.3: Công cụ soạn thảo Menu cho ứng dụng WPF trong Visual Studio 2008
141

Hình 10.4: Hộp thoại Quản lý các Menu Item 142
Hình 10.5: Minh họa Menu Item với trạng thái Checked và UnChecked 144
Hình 10.6: Thêm tài nguyên và thiết lập thuộc tính cho tài nguyên ảnh 146
Hình 10.7: Thanh công cụ - Toolbar 147
Hình 10.8: Ví dụ minh họa Toolbar 148
Đề Tài: Nghiên Cứu Công Nghệ WPF và Xây Dựng Ứng Dụng Minh Họa
8
Hình 10.9: Ví dụ minh họa Toolbar với trạng thái Checked và UnCheked 150
Hình 10.10: Ví dụ minh họa tổng hợp về Menu và Toolbar. 153
Hình 11.1: Nút bấm với thực đơn ngữ cảnh (Context Menu) 157
Hình 11.2: Thanh trạng thái gồm ba mục trạng thái khác nhau 157
Hình 11.3: Ví dụ về thực đơn ngữ cảnh riêng biệt của từng điều khiển khác nhau 159
Hình 11.4: Ví dụ về thực đơn ngữ cảnh chia sẻ 161
Hình 11.5: Thanh trạng thái 163
Hình 11.6: Thanh trạng thái với phần tử là thanh tiến trình 165
Hình 11.7: Thanh trạng thái với phần tử là hình ảnh 166
Hình 12.1: Ví dụ về đoạn thẳng 169
Hình 12.2: Ví dụ về Polyline 170
Hình 12.3: Ví dụ về hình chữ nhật 171
Hình 12.4: Ví dụ về hình ellipse Ellipse 173
Hình 12.5: Ví dụ về Polygon 175
Hình 12.6: Ví dụ về Path 177
Hình 12.7: Minh họa một số kiểu tô hình 178
Hình 12.8: Tô theo hƣớng tuyến tính 181
Hình 12.9: Minh họa các điểm chốt 182
Hình 12.10: Trục tô mặc định của tô màu tuyến tính. 183
Hình 12.11: Trục tô màu theo chiều ngang. 183
Hình 12.12: Trục tô màu theo chiều đứng. 184
Hình 12.13: Hình minh họa cách tô đổ màu theo bán kính hình tròn. 185
Hình 12.14: Các mẫu (pattern) 186

Hình 12.15. Minh họa tô một vùng bằng hình ảnh 187
Hình 12.16: Các kết quả của giá trị thuộc tính Stretch. 188
Hình 12.17: Các kết quả của giá trị thuộc tính TileMode. 189
Hình 12.18: Hình ví dụ chổi tô với độ mờ 189
Hình 12.19: Hình minh họa sử dụng phép quay để xoay một hình chữ nhật một góc
45 độ, tâm ở đỉnh hình chữ nhật. 192
Hình 12.20: Hình minh họa sử dụng phép quay để xoay một hình chữ nhật một góc
45 độ. 193
Hình 12.21: Hình ví dụ thuộc tính RenderTransform và RotateTransform. 194

Đề Tài: Nghiên Cứu Công Nghệ WPF và Xây Dựng Ứng Dụng Minh Họa
9
Mục lục Bảng

Bảng 1.1: Thành phần giao diện và những công nghệ cần thiết. 14
Bảng 2.1: Từ khóa XAML 33
Bảng 3.1: Các thuộc tính lớp Panel. 36
Bảng 3.2: Các thuộc tính của StackPanel 39
Bảng 3.3: Các giá trị thuộc tính Visibility 54
Bảng 4.1: Markup extension WPF 55
Bảng 4.2: Markup extension XAML 56
Bảng 9.1: Giá trị thuộc tính Mode 127
Bảng 9.2: Giá trị thuộc tính UpdateSourceTrigger. 133
Bảng 12.1: Một số loại đối tƣợng và thuộc tinh đƣợc dùng để gắn với chổi tô. 179
Bảng 12.2: Một số lớp (class) để hỗ trợ cho công việc biến đổi hình học. 192

Đề Tài: Nghiên Cứu Công Nghệ WPF và Xây Dựng Ứng Dụng Minh Họa
10

PHẦN 1

NGHIÊN CỨU CÔNG
NGHỆ WPF
Đề Tài: Nghiên Cứu Công Nghệ WPF và Xây Dựng Ứng Dụng Minh Họa
11
LỜI NÓI ĐẦU

Khi khoảng cách công nghệ giữa các nhà xản suất không còn quá xa, khi tính
năng giữa các phần mềm không còn nhiều khác biệt thì đó là lúc giao diện nổi lên
nhƣ là một trong những giá trị cạnh tranh cho mỗi sản phẩm phần mềm.
Dù đó là web hay là phần mềm ứng dụng thì một giao diện hấp dẫn, thân thiện
luôn là một điểm nhấn cho mỗi sản phẩm đó.
Window Presentation Foudation (WPF) là một trong những công nghệ mới
với những ƣu điểm nối bật cho công việc thiết kế và lập trình giao diện.

Luận văn nghiên cứu về công nghệ WPF bao gồm các chƣơng sau:
Chƣơng 1: Tổng Quan WPF, vì sao WPF ra đời, WPF phục vụ cho nhu cầu
nào, những ai sẽ sử dụng WPF, các GUI trƣớc đây, kiến trúc WPF, công cụ sử dụng
WPF
Chƣơng 2: Tổng Quan XAML, giới thiệu về ngôn ngữ XAML đƣợc sử dụng
trong WPF, các quy tắc viết mã XAML, cú pháp, từ khóa,…
Chƣơng 4: Markup Extension và Dependency Property, giới thiệu các đánh
dấu mở rộng của XAML và WPF sử dụng cho việc viết mã, thế nào là tài nguyên
tĩnh, tài nguyên động, key,…Giới thiệu Dependency Property một trong những khái
niệm quan trọng trong WPF bắt đầu từ NET Framework 3.5 trở đi.
Chƣơng 7: Routed Event và Command, giới thiệu cách xử lí sự kiện, định

tuyến sự kiện trong WPF, cách tƣơng tác từ XAML tới mã lệnh bên trong có hàm
xử lí sự kiện, tunnel, bubble. Lệnh (command) sử dụng lệnh, lệnh tự tạo.
Chƣơng 8: Styles và Templates, giới thiệu về style (kiểu mẫu) một trong
những thành phần linh động trong XAML, tạo nên sự thể hiện phong phú trong giao
diện của WPF. Giới thiệu về các mẫu (template) gồm: data template, control
template, thể hiện sự phong phú tự do trình bày dữ liệu cũng nhƣ phong phú sự thể
thể điều kiển các phần tử (element).
Chƣơng 9: Data Binding, thành phần quan trong trong WPF, thể hiện sự kết
nối dữ liệu giữa giao diện XAML với mã lệnh, với nhiều loại dữ liệu kết nối nhƣ:
collection, xml,…
Đề Tài: Nghiên Cứu Công Nghệ WPF và Xây Dựng Ứng Dụng Minh Họa
12

Đề Tài: Nghiên Cứu Công Nghệ WPF và Xây Dựng Ứng Dụng Minh Họa
13
CHƢƠNG 1: TỔNG QUAN WPF

WPF là viết tắt của Windows Presentation Foundation, là hệ thống API mới
hỗ trợ việc xây dựng giao diện đồ hoạ trên nền Windows. Đƣợc xem nhƣ thế hệ kế
tiếp của WinForms. WPF tăng cƣờng khả năng lập trình giao diện của lập trình viên
bằng cách cung cấp các API cho phép tận dụng những lợi thế về đa phƣơng tiện
hiện đại. Là một bộ phận của .NET Framework 3.0 và sau này là 3.5, WPF đã đƣợc
sử dụng trong Windows Vista, Windows Server 2008, Windows XP Service Pack 2
và trên các hệ điều hành sau này.
WPF đƣợc xây dựng nhằm vào ba mục tiêu cơ bản:
 Cung cấp một nền tảng thống nhất để xây dựng giao diện ngƣời dùng.
 Cho phép ngƣời lập trình và ngƣời thiết kế giao diện làm việc cùng
nhau một cách dễ dàng.
 Cung cấp một công nghệ chung để xây dựng giao diện ngƣời dùng trên
cả Windows và trình duyệt Web.

Đƣợc xây dựng trên .NET Framework, WPF cung cấp môi trƣờng phát triển
ứng dụng trên hệ điều hành Windows. Lợi thế với những gì có sẵn trong .NET
Framework của Microsoft cho phép các lập trình viên đã làm quen với công nghệ
.NET có thể nhanh chóng phát triển ứng dụng với WPF.
Dù đó là một hình ảnh 3D phức tạp hay một đơn giản cho là một Button bình
thƣờng đƣợc xây dựng cho cả ứng dụng Windows và ứng dụng Web, tất cả chạy
trên Windows platform.
WPF đƣợc coi nhƣ là công nghệ để tạo ra giao diện cho những ứng dụng
Window của thế hệ tiếp theo nhƣ Window 7.

1.1 Nền tảng thống nhất để xây dựng giao diện ngƣời dùng
Trƣớc khi WPF ra đời, việc tạo giao diện ngƣời dùng đòi hỏi sử dụng rất nhiều
công nghệ khác nhau (xem Bảng 1.1). Để tạo form, các control và các tính năng
khác của một giao diện đồ họa Windows, thông thƣờng lập trình viên sẽ chọn
Windows Forms, một phần của .NET Framework. Nếu cần hiển thị văn bản,
Windows Forms có một số tính năng hỗ trợ văn bản trực tiếp hoặc có thể sử dụng
PDF của Adobe để hiển thị văn bản có khuôn dạng cố định. Đối với hình ảnh và đồ
họa 2 chiều, lập trình viên sẽ dùng GDI+, một mô hình lập trình riêng biệt có thể
truy nhập qua Windows Forms. Để hiển thị video hay phát âm thanh, lập trình viên
lại phải sử dụng Windows Media Player và với đồ họa 3 chiều phải thì dùng
Đề Tài: Nghiên Cứu Công Nghệ WPF và Xây Dựng Ứng Dụng Minh Họa
14
Direct3D, một thành phần chuẩn khác của Windows. Tóm lại, quá trình phát triển
giao diện ngƣời dùng theo yêu cầu trở nên phức tạp, đòi hỏi lập trình viên quá nhiều
kỹ năng công nghệ.


Windows
Forms

PDF
Windows
Forms/
GDI+
Windows
Media
Player
Direct3D
WPF
Giao diện
đồ họa
(form và các
control)
x




x
On-screen
Văn bản
x




x
Fixed-
format văn
bản

x



x
Hình ảnh


x


x
Video và
âm thanh



x

x
Đồ họa 2
chiều


x


x
Đồ họa 3

chiều




x
x

Bảng 1.1: Thành phần giao diện và những công nghệ cần thiết.

Tuy nhiên, WPF ra đời không có nghĩa là tất cả những công nghệ nêu trên bị
thay thế. Windows Forms vẫn có giá trị, thậm trí trong WPF, một số ứng dụng mới
vẫn sẽ sử dụng Windows Forms. Windows Media Player vẫn đóng một vai trò công
cụ độc lập để chơi nhạc và trình chiếu video. PDF cho văn bản vẫn tiếp tục đƣợc sử
dụng. Direct3D vẫn là công nghệ quan trọng trong games và các dạng ứng dụng
khác (Trong thực tế, bản thân WPF dựa trên Direct3D để thực hiện mọi biểu diễn
đồ họa).
Việc tạo ra một giao diện ngƣời dùng hiện đại không chỉ là việc hợp nhất các
công nghệ sẵn có khác nhau. Nó còn thể hiện ở việc tận dụng lợi điểm của card đồ
họa hiện đại. Để giải phóng những hạn chế của đồ họa bitmap, WPF dựa hoàn toàn
Đề Tài: Nghiên Cứu Công Nghệ WPF và Xây Dựng Ứng Dụng Minh Họa
15
trên đồ họa vector, cho phép hình ảnh tự động thay đổi kích thƣớc để phù hợp với
kích thƣớc và độ phân giải của màn hình mà nó đƣợc hiển thị.
Bằng việc hợp nhất tất cả các công nghệ cần thiết để tạo ra một giao diện
ngƣời dùng vào một nền tảng đơn nhất, WPF đơn giản hóa đáng kể công việc của
lập trình viên giao diện. Với việc yêu cầu lập trình viên học một môi trƣờng phát
triển duy nhất, WPF góp phần làm giảm chi phí cho việc xây dựng và bảo trì ứng
dụng. Bằng việc cho phép tích hợp đa dạng nhiều cách biểu diễn thông tin trên giao
diện ngƣời dùng, WPF góp phần nâng cao chất lƣợng và theo đó là giá trị công việc

bằng cách thức ngƣời dùng tƣơng tác với ứng dụng trên Windows.

1.2 Khả năng làm việc chung giữa ngƣời thiết kế giao diện và lập trình
viên
Thông thƣờng, ngƣời thiết kế giao diện sử dụng một công cụ đồ họa để tạo ra
những ảnh tĩnh về cách bố trí giao diện trên màn hình. Những hình ảnh này sau đó
đƣợc chuyển tới lập trình viên với nhiệm vụ tạo ra mã để hiện thực hóa giao diện đã
thiết kế. Đôi lúc vẽ ra một giao diện thì đơn giản với ngƣời thiết kế, nhƣng để biến
nó thành hiện thực có thể là khó khăn hoặc bất khả thi với lập trình viên. Hạn chế về
công nghệ, sức ép tiến độ, thiếu kỹ năng, hiểu nhầm hoặc đơn giản là bất đồng quan
điểm có thể khiến lập trình viên không đáp ứng đƣợc đầy đủ yêu cầu từ ngƣời thiết
kế. Do vậy, điều cần thiết ở đây là một cách thức để hai nhóm công tác độc lập này
có thể làm việc với nhau mà không làm thay đổi chất lƣợng của giao diện đã thiết
kế.
Để thực hiện đƣợc điều này, WPF đƣa ra ngôn ngữ đặc tả eXtensible
Application Markup Language (XAML). XAML định ra một tập các phần tử nhƣ
Button, TextBox, Label…, nhằm định nghĩa các đối tƣợng đồ họa tƣơng ứng nhƣ
nút bấm, hộp thoại, nhãn…, và nhờ đó cho phép mô tả chính xác diện mạo của giao
diện ngƣời dùng. Các phần tử XAML cũng chứa các thuộc tính, cho phép thiết lập
nhiều tính chất khác nhau của đối tƣợng đồ họa tƣơng ứng. Ví dụ, đoạn mã sau sẽ
tạo ra một nút bấm màu đỏ có nội dung là “No”.

<Button Background="Red">No</Button>

Mỗi phần tử XAML lại tƣơng ứng với một lớp WPF, và mỗi thuộc tính của
phần tử đó lại tƣơng ứng với thuộc tính hay sự kiện của lớp này. Chẳng hạn, nút
bấm màu đỏ trong ví dụ trên có thể tạo bằng mã lệnh C# nhƣ sau:

Button btn = new Button();
btn.Background = Brushes.Red;

btn.Content = "No";
Đề Tài: Nghiên Cứu Công Nghệ WPF và Xây Dựng Ứng Dụng Minh Họa
16

Nếu nhƣ mọi thứ có thể biểu diễn bằng XAML thì cũng có thể biểu diễn bằng
đoạn mã, thì câu hỏi đặt ra là XAML có ý nghĩa gì? Câu trả lời là việc xây dựng các
ứng dụng và sử dụng các đặc tả bằng XAML dễ dàng hơn nhiều so với xây dựng
một công cụ tƣơng tự làm việc với đoạn mã. Bởi vậy, XAML mở ra một cách thức
tốt hơn để lập trình viên và ngƣời thiết kế làm việc với nhau. Hình 1.1 minh họa quá
trình này.


Hình 1.1:XAML hỗ trợ lập trình viên và ngƣời thiết kế làm việc chung.

XAML cho phép ngƣời thiết kế có thể tạo ra các giao diện độc lập trên các
công cụ thiết kế chuyên biệt nhƣ Microsoft Expression Blend (hình 1.2). Sau đó các
giao diện đó đƣợc xuất ra dƣới dạng mã XAML và ngƣời lập trình chỉ cần mở file
XAML bằng tool nhƣ Visual Studio (hình 1.3) để tạo ra giao diện cho chƣơng trình
của mình. Điều nãy rõ ràng làm giảm đi rất nhiều công sức và độ phức tạp trong quá
trình thiết kế phần mềm. Nó cho phép lập trình viên và ngƣời thiết kế giao diện với
vai trò khác nhau có thể tiến hành song song công việc.

Đề Tài: Nghiên Cứu Công Nghệ WPF và Xây Dựng Ứng Dụng Minh Họa
17

Hình 1.2: Visual Studio 2008.

Hình 1.3: Microsoft Expression Blend 2.
Đề Tài: Nghiên Cứu Công Nghệ WPF và Xây Dựng Ứng Dụng Minh Họa
18

Thay vì lập trình viên phải tái tạo lại giao diện từ đầu dựa trên một ảnh tĩnh
mà ngƣời thiết kế cung cấp, bản thân các đoạn XAML sẽ đƣợc Microsoft Visual
Studio biên dịch để tái tạo thành giao diện đồ họa đúng theo mô tả. Lập trình viên
chỉ tập trung vào việc viết mã trình cho giao diện đƣợc sinh ra, chẳng hạn nhƣ xử lý
các sự kiện, theo những chức năng đề ra của ứng dụng.
Việc cho phép ngƣời thiết kế và lập trình viên làm việc chung nhƣ vậy sẽ hạn
chế những lỗi phát sinh khi hiện thực hóa giao diện từ thiết kế. Thêm vào đó, nó còn
cho phép hai nhóm làm việc song song, khiến mỗi bƣớc lặp trong quy trình phát
triển phần mềm ngắn đi và việc phản hồi đƣợc tốt hơn. Vì cả hai môi trƣờng đều có
khả năng hiểu và sử dụng XAML, ứng dụng WPF có thể chuyển qua lại giữa hai
môi trƣờng phát triển để sửa đổi hay bổ sung giao diện. Với tất cả những lợi điểm
này, vai trò của ngƣời thiết kế trong việc xây dựng giao diện đƣợc đặt lên hàng đầu.

1.3 Kiến trúc của WPF
WPF nằm trong .NET Framework, nên các ứng dụng WPF có thể kết hợp các
thành phần khác có trong thƣ viện lớp của .NET Framework.
WPF sử dụng kiến kiến trúc nhiều tầng (multilayer), tầng trên cùng ứng dụng
tƣơng tác các dịch vụ high-level đƣợc viết hoàn tất bởi đoạn mã quản lí đƣợc
(managed code) nhƣ C#. Sau đó dịch các đối tƣợng .NET thành các kết cấu
Direct3D, sử dụng lower-level là milcore.dll là thành phần unmagened code (sinh ra
mã máy trực tiếp), millcore.dll là unmanaged code bởi vì milcore.dll tƣơng tác chặt
chẽ với Direct3D để tăng hiệu suất xử lí nhanh chóng. Kiến trúc WPF hình 1.4:

Direct3D User32
milcore.dll
PresentationFramework.dll
PresentationCore.dll
WindowsBase.dll

Hình 1.4: Kiến trúc WPF
Đề Tài: Nghiên Cứu Công Nghệ WPF và Xây Dựng Ứng Dụng Minh Họa
19

PresentationFramework.dll gồm các loại WPF top-level nhƣ windows, panel
và các control khác.
PresentationCore.dll nắm các loại nhƣ UIElement và Visual là các hình dạng
và dẫn xuất ra các control
WindowBase.dll nắm giữ các thành phần cơ bản để có khả năng bên ngoài sử
dụng lại WPF nhƣ DispatcherObject và DependencyObject.
milcore.dll là nhân của hệ thống trình diễn (render) WPF, mặc dù là thành
phần của WPF, milcore còn là thành phần cốt yếu của Window Vista.
Direct3D là API low-level mang tất cả các đồ họa trong WPF đƣợc trình diễn
ra.

1.4 Các đặc điểm tạo nên sự khác biệt của WPF:
Đồ họa phong phú: Thay vì làm việc với những điểm ảnh, bạn đƣợc có thể làm
việc trực tiếp với những đối tƣợng hình học cơ bản: hình chữ nhật, hình ellipese.
Bạn cũng có những đặc điểm mới nhƣ điều khiển độ trong suốt, độ mờ, cùng các
hiệu ứng 3D.
Hiển thị văn bản linh hoạt: WPF có khả năng cung cấp những khả năng để
hiện thị văn bản một cách phong phú ở bất cứ đâu. Bạn có thể kết hợp văn bản với
các đối tƣợng khác, hay có thể sử dụng các đặc điểm mới để hiện thị một lƣợng lớn
văn bản một cách dễ đọc nhất.
Các hiệu ứng Animation: Bạn có thể sử dụng bộ tính thời gian timer để vẽ lại
hình, nhƣng với WPF đặc điểm đã đƣợc tích hợp thành một phần của Framework,
từ đó bạn có thể định nghĩa những hiệu ứng chuyện động cho các đối tƣợng đồ họa
khác nhau.

Hỗ trợ video, audio: Không giống nhƣ các công nghệ trƣớc đó nhƣ Winform
có sự hạn chế trong việc hỗ trợ để chạy các file Audio và Video. WPF hỗ trợ chạy
tất các file mà Window Meida Player có thể đọc đƣợc và cho phép bạn có thể chạy
đồng thời một hoặc nhiều file. Đặc biệt WPF cung cấp các tool cho phép bạn tích
hợp các các nội dung video vào giao diện và cả các hiệu ứng 3D (ví dụ hiển thị
video trên các mặt của hình hộp 3D).
Độ phân giải độc lập: cũng là một trong những đặc điểm khác tạo ra sự khác
biệt cho công nghệ WPF. Nếu nhƣ các giao diện đƣợc thiết kế bằng các công nghệ
trƣớc nhƣ Winform vốn dựa trên GDI/GDI+ sẽ gặp nhiều phiền phức khi làm việc
với những màn hình có độ phân giải khác nhau, hình vẽ sẽ lớn hơn với các màn
hình có độ phân giải thập hay nhỏ đi với khi độ phân giải màn hình cao. Nhƣng
Đề Tài: Nghiên Cứu Công Nghệ WPF và Xây Dựng Ứng Dụng Minh Họa
20
trong WPF điều đó không còn là vấn đề quan ngại với những ngƣời thiết kế bởi
WPF cho phép hiện thị các đối tƣợng với đúng kích cỡ khi thiết kế dƣới các độ
phân giải khác nhau của màn hình.WPF sử dụng chính DirectX làm nền tảng cho
bất cứ giao diện nào đƣợc tạo, hiện thị text thì nó cũng đƣợc tạo thông qua DirectX.
Điều đó đồng nghĩa với việc những ứng dụng thông thƣờng cũng có thể có đƣợc
những hiệu ứng đồ họa phực tạp, ví dụ nhƣ các hiệu ứng trong suốt, đổ bóng và
cũng nhờ thể mà có thể tăng tốc xử lý đồ họa thông qua sự tƣơng tác giữa DirectX
và card màn hình.
Hiển thị ảnh vector thay vì ảnh bitmap mang lại cho công nghệ WPF khả năng
hiện thị linh hoạt với nhiều kích thƣớc khác nhau mà không lo làm “vỡ” hình ảnh
những đối tƣợng đồ họa.
Sự độc lập giữa thiết kế và lập trình là một trong những bƣớc tiến mà WPF
mang lại. Các đối tƣợng đồ họa trong WPF đƣợc thể hiện thông qua một loại mã
đơn giản là XAML (Extention MakeUp Language). Đó là một loại mã đơn giản gần
giống nhƣ XML dùng để tạo và tinh chỉnh các đối tƣợng đồ họa. Đó là một bƣớc
tiến lớn trong quá trình thiết kế và lập trình giao diện.
Còn rất nhiều đặc điểm mạnh mẽ khác mà WPF cung cấp để hỗ trợ quá trình

thiết kế và lập trình nhƣ : Stypes and Template, Command, Page Application….
Đề Tài: Nghiên Cứu Công Nghệ WPF và Xây Dựng Ứng Dụng Minh Họa
21
1.5 Các ứng dụng đƣợc xây dựng trên WPF

Hình 1.5: Yahoo messager 9


Hình 1.6: AMD Live
Đề Tài: Nghiên Cứu Công Nghệ WPF và Xây Dựng Ứng Dụng Minh Họa
22

Hình 1.7: Lectra


Hình 1.8: BBC Showcase 2007.

Đề Tài: Nghiên Cứu Công Nghệ WPF và Xây Dựng Ứng Dụng Minh Họa
23

Hình 1.9: The New York Times

1.6 Các GUI trƣớc WPF
Với công nghệ giao diện cũ, không có cách nào dễ dàng để tách nội dung của
phần đồ họa khỏi mã lệnh. Vấn đề chính với ứng dụng Windows Form là mỗi form
ngƣời dùng tạo ra đƣợc định nghĩa hoàn toàn bằng code C#. Khi bạn kéo thả các
control vào giao diện thiết kế và cấu hình chúng thì Visual studio lặng lẽ điều chỉnh
các code tƣơng ứng từ các class. Không có công cụ thiết kế (design) nào làm việc
với mã C#. Các nhà thiết kế phải đƣa kết quả của mình export thành định dạng
bitmap, những bitmap này sẽ đƣợc dùng làm skin cho các window, button và các

control khác. Với cách làm việc này hiệu quả cho giao diện đơn giản mà không mất
nhiều thời gian, nhƣng có giới hạn trong vài trƣờng hợp, một số giới hạn:
Mỗi một yếu tố nhƣ background, button,… cần đƣợc export nhƣ một bitmap
riêng biệt, hạn chế khả năng kết hợp các bitmap và sử dụng các hiệu ứng
động nhƣ antialiasing (khử răng cƣa), transparency (trong suốt) và shadows
(đổ bóng).
Giao diện đƣợc nhúng vào trong code bởi các lập trình viên và điều chỉnh nó
nhƣ kích cỡ button, vị trí, hiệu ứng chuột di chuyển, animation. Các nhà thiết
kế đồ hoạ không thể kiếm soát đƣợc bất kì chi tiết nào.
Đề Tài: Nghiên Cứu Công Nghệ WPF và Xây Dựng Ứng Dụng Minh Họa
24
Không có sự kết nối thực sự các yếu tố đồ họa với nhau, dễ dàng dẫn tới kết
quả không mong muốn của toàn bộ tập hợp các hình ảnh. Việc theo dõi tất cả
các item đƣợc thêm vào rất phức tạp.
Bitmap không thể thay đổi kích thƣớc mà không ảnh hƣởng tới chất lƣợng,
vì lí do đó, một bitmap trên UI có độ phân giải phụ thuộc, có nghĩa không thể
điều tiết các màn hình có kích thƣớc lớn hay có độ phân giải cao, đây là sự
khó khăn trong thiết kế giao diện

1.7 Kết chƣơng
Qua chƣơng 1, chúng em đã tìm hiểu cách WPF giải quyết những vấn đề về
giao diện với XAML, khi đang thiết kế một ứng dụng WPF trong Visual Studio,
cửa sổ đang thiết kế sẽ không sinh ra trong mã lệnh, thay vào đó, nó đƣợc sắp xếp
vào trong tập các tag XAML. Khi chạy ứng dụng, những tag này đƣợc sử dụng để
tạo ra các đối tƣợng để tạo thành giao diện của ứng dụng.
Hoàn thiện hơn luôn là một trong những khao khát của con ngƣời và làm cho
sản phẩm ngày một hoàn thiện hơn, hấp dẫn hơn với một giao diện tinh tế hấp dẫn
luôn mong muốn của bất cứ nhà thiết kế phần mềm nào. Nối tiếp theo thời gian
hàng loạt công nghệ đã ra đời để tạo ra ngày càng nhiều công cụ, phƣơng thức hỗ
trợ mạnh mẽ hơn, tạo nhiều sự tiện lợi cho ngƣời lập trình và nhà thiết kế. WPF là

công nghệ mới, đầy tiềm năng và sức mạnh, WPF mới chỉ ở bƣớc khởi đầu nhƣng
sẽ là công nghệ cho ngày mai.

Đề Tài: Nghiên Cứu Công Nghệ WPF và Xây Dựng Ứng Dụng Minh Họa
25
CHƢƠNG 2: TỔNG QUAN XAML

XAML (viết tắt của Extensible Application Markup Language và đƣợc phát
âm là "zammel") là một ngôn ngữ đánh dấu đƣợc sử dụng để hiện thực các đối
tƣợng .NET. Mặc dù XAML là một công nghệ có thể đƣợc áp dụng cho nhiều vấn
đề khác nhau nhƣng nó có vai trò chính trong xây dựng giao diện WPF. Nói cách
khác, XAML xác định cách sắp xếp các panel, các button (nút nhấn) và control tạo
thành các Window trong một ứng dụng WPF.
Với XAML bạn có thể thiết kế bằng việc viết từng dòng lệnh, tuy nhiên có thể
sử dụng công cụ chuyên nghiệp là Microsoft Expression Blend nếu bạn là một nhà
thiết kế đồ hoạ, hoặc nếu bạn là một lập trình viên thì dùng Visual Studio 2008, sử
dụng kết hợp hai công cụ trên bằng cách, một nhà thiết kế giao diện hoàn tất giao
diện ứng dụng với Expression Blend, lập trình viên sử dụng giao diện này và lập
trình ứng dụng trên Studio.

2.1 Các thành phần XAML
Có nhiều thành phần khác trong XAML:
WPF XAML: bao gồm các yếu tố mô tả nội dung WPF, ví dụ nhƣ vecto
đồ họa, control và các tài liệu, là những ứng dụng quan trọng của XAML.
XPS XAML: là một phần của WPF XAML cái định nghĩa một thể hiện
XML cho các tài liệu điện tử đƣợc định dạng XML. Nó đƣợc xuất bản bởi
tiêu chuẩn XML Paper Specification (XPS) riêng biệt.
Silverlight XAML là một nhóm của WPF XAML đó là dành cho các ứng
dụng Silverlight. Silverlight là một plug-in trình duyệt cross-platform cho
phép tạo các trang web phong phú nội dung với hai chiều đồ họa, hình ảnh

động, âm thanh và video. Tham khảo tại website .
WF XAML bao gồm các yếu tố mô tả nội dung Windows Workflow
Foundation (WF). Website về WF tại .

2.2 XAML Compilation
Những nhà tạo ra WPF biết rằng XAML không chỉ cần thiết để giải quyết vấn
đề về thiết kế nó cũng cần phải nhanh và mặc dù dựa trên định dạng XML linh hoạt
và dễ dàng chuyển đổi qua các công cụ khác, các nền tảng nhƣng chúng không phải
lúc nào cũng hiệu quả nhất. XML đƣợc thiết kế để có thể hợp lý, đọc, không phức
tạp.