Tài liệu 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 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 1 Đề Tài: Nghiên Cứu Công Nghệ WPF và Xây Dựng Ứng Dụng Minh Họa 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 2 Đề Tài: Nghiên Cứu Công Nghệ WPF và Xây Dựng Ứng Dụng Minh Họa 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 3 Đề Tài: Nghiên Cứu Công Nghệ WPF và Xây Dựng Ứng Dụng Minh Họa 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 4 Đề Tài: Nghiên Cứu Công Nghệ WPF và Xây Dựng Ứng Dụng Minh Họa 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. 5 Đề Tài: Nghiên Cứu Công Nghệ WPF và Xây Dựng Ứng Dụng Minh Họa 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 6 Đề Tài: Nghiên Cứu Công Nghệ WPF và Xây Dựng Ứng Dụng Minh Họa 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 7 Đề Tài: Nghiên Cứu Công Nghệ WPF và Xây Dựng Ứng Dụng Minh Họa 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 8 Đề Tài: Nghiên Cứu Công Nghệ WPF và Xây Dựng Ứng Dụng Minh Họa 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 9 Đề Tài: Nghiên Cứu Công Nghệ WPF và Xây Dựng Ứng Dụng Minh Họa PHẦN 1 NGHIÊN CỨU CÔNG NGHỆ WPF 10 Đề Tài: Nghiên Cứu Công Nghệ WPF và Xây Dựng Ứng Dụng Minh Họa 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,… 11 Đề 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 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 13 Đề Tài: Nghiên Cứu Công Nghệ WPF và Xây Dựng Ứng Dụng Minh Họa 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 PDF Forms Giao diện x đồ họa (form và các control) On-screen x Văn bản Fixedformat văn bản Hình ảnh Video và âm thanh Đồ họa 2 chiều Đồ họa 3 chiều Windows Windows Forms/ Media GDI+ Player Direct3D WPF x x x x x x x x x x 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 14 Đề Tài: Nghiên Cứu Công Nghệ WPF và Xây Dựng Ứng Dụng Minh Họa 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”. No 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"; 15 Đề Tài: Nghiên Cứu Công Nghệ WPF và Xây Dựng Ứng Dụng Minh Họa 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. 16 Đề Tài: Nghiên Cứu Công Nghệ WPF và Xây Dựng Ứng Dụng Minh Họa Hình 1.2: Visual Studio 2008. Hình 1.3: Microsoft Expression Blend 2. 17 Đề Tài: Nghiên Cứu Công Nghệ WPF và Xây Dựng Ứng Dụng Minh Họa 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: PresentationFramework.dll WindowsBase.dll PresentationCore.dll milcore.dll Direct3D User32 Hình 1.4: Kiến trúc WPF 18 Đề Tài: Nghiên Cứu Công Nghệ WPF và Xây Dựng Ứng Dụng Minh Họa 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 19 Đề Tài: Nghiên Cứu Công Nghệ WPF và Xây Dựng Ứng Dụng Minh Họa 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…. 20