Đề 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.


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

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

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 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 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
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.

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

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

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
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.

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

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