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 [...]... 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... 1.6: AMD Live 21 Đề Tài: Nghiên Cứu Công Nghệ WPF và Xây Dựng Ứng Dụng Minh Họa Hình 1.7: Lectra Hình 1.8: BBC Showcase 2007 22 Đề Tài: Nghiên Cứu Công Nghệ WPF và Xây Dựng Ứng Dụng Minh Họa 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... 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... đồ 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 Đề Tài: Nghiên Cứu Công Nghệ WPF và Xây Dựng Ứng Dụng Minh Họa 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 21 Đề Tài: Nghiên Cứu Công. .. 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 24 Đề Tài: Nghiên Cứu Công Nghệ WPF và Xây Dựng Ứng Dụng Minh Họa CHƢƠNG 2: TỔNG QUAN XAML XAML (viết tắt... 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... đ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... chỉ có 2 element, một là top-level element Window và hai là Grid nơi đặt tất cả các control bên trong Top-level element gồm có: Window Page (tƣơng tự nhƣ Window nhƣng đƣợc sử dụng trong các ứng dụng navigation) Application (thƣờng dùng định nghĩa tài nguyên của ứng dụng và thiết lập startup) 26 Đề Tài: Nghiên Cứu Công Nghệ WPF và Xây Dựng Ứng Dụng Minh Họa Mặc định đuôi file mở rộng của XAML là (.xaml),... 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... 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 25 Đề Tài: Nghiên Cứu Công Nghệ WPF và Xây Dựng Ứng Dụng Minh Họa Các thẻ của WPF sử dụng BAML (Binary Application Markup Language) BAML là một thể hiện nhị phân của XAML Khi biên dịch một WPF ứng dụng trong Visual Studio, tất cả file XAML đƣợc chuyển đổi thành BAML và . 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 . 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. 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