TỰ HỌC WPF ĐẠI HỌC CÔNG NGHỆ THÔNG TIN THÁI NGUYÊN
Trang 1Hoc WPF 4 trong m6t tuan — Ngay 1: Bat da (Getting Started)
Microsoft®
yy aundation) phién ban 4, di kém cing b6 visual studio 2010 Muc tiéu của bài viết để ra la trong mét wan ng&n ngui chung ta cé thé nam bat duoc những khái niệm quan trọng đến những vấn để phức tập Tôi hy vọng, tôi cũng như các bạn
có thể nắm bat một công nghệ mới thật nhanh trên cơ sở những kiến thức nền tảng về C# đã
co
Nỗi dung trong khuôn khổ ngày đầu tiên của chúng như sau: - Giới thiệu về WPF (Windows Presentation Foundation)
- Cài đặt công cụ phát triển (install the development tools)
- Tìm hiểu các khái niệm co ban cUa WPF (Leam the basic concepts of WPF)
- Tạo một ứng dụng WPF dau tién (Create your first WPF application)
- Tim hiểu WPE đã thay đổi thể nào trong công cụ phát trién (Learn how WPF changed the
development workflow)
Còn chờ øì nữa Chúng ta bắt đẩu
1 Giới thiệu về Windows Presentation Eoundation
a Giới thiêu khái quát
- WPF (Windows Presentation Eoundation) của Microsoft là thế hệ tiếp theo của giao diện
khung người dùng (User Interface Framework) để tạo ra các ứng đụng với trải nghiệm người dùng phong phú Nó là một phần trong Net 3.0 và các phiên bản cao hơn
- WPFE LII(User Interface) kết hợp ứng dụng đổ họa 2D, 3D, văn bản và multimesia vào tron khuôn khổ đuy nhất Nó là vector cơ sở để diễn hoạt và tăng tốc phấn cứng của các card d họa hiện đại Điểu này làm cho giao diện người dùng nhanh hơn Tạo khả năng mở rộng và độ phân giải độc lập
- Hình minh họa dưới đây cung cấp cho bạn một một khái quát vẾ các tính năng mới của
Trang 2
Databinding re 30
Timeli Composable
b Tach bế ngoài và sư vận hành:
WPF phân biệt sư xuất hiện của một giao diện người dùng từ hành vi của nó (šiao điện thường được thường được quy định trong ngôn ngữ đánh dấu ứng dụng (XAML - eXtensible
Application Marlcup Language), các sự kiện được thực hiện nhờ ngôn ngữ lập trình như C# hay Visual Basic Hai bộ phận được kết nối với nhau bởi databinding, các sự kiện và lệnh Việc tách biệt giữa giao diện và cách thức xử lý các sự kiện của chương trình mang lại những lợi ích nhƯ:
- Giao diện wà hành vi (các xử lý của chương trình} được liên kết với nhau
- Các nhà thiết kế (Dœsigners) và các nhà phát triển (Developers) có thể làm việc với mô hình riêng biệt
- Công cụ thiết kế đổ họa có thể làm trên các tài liệu XML đơn giản thay vì phải phân tích code
c Thanh phấn phong phú
Cac Control trong WPF là rất tuyệt vời, bạn cõ thể xác định gần như bất kỳ các control và nội
dung khác nhau Mặc dù rất linh hoạt trong những thiết kế âm thanh cho các nhà thiết kế, đây
là một tính năng rất mạnh mẽ nếu bạn sử dụng tích hợp Đặt một hình ảnh vào button để tạo
ra một image button, loặc đặt một danh sách các video vào danh sách để chọn một tập tin video sá)) Play Sound | <Button> <StackPanel Orientation="Hdorizontal">
«Image Source="speaker png" Streteh="Uniforn"/>
<TextBlock Text="Play Sound" />
Trang 3</Button>
d Tùy biến nang cao (Highly Customizable)
Do sự tách biệt nghiêm ngặt giữa giao diện và hành vi, nên bạn cố thể dễ đàng thay đổi giao
diện điều khiển Các khái niệm về các style, skin controls gẩn giống như CSS trong HTML
Các Template cho cho phép bạn thay thế giao diện của các control một cách sinh động và bắt
mắt hơn
Vi dụ sau day là một button mặc định và một button tùy chinh wong WPF
=- @
e Quyết đỉnh độc lập:
Tất cả các tiêu chuẩn trong WPF là những đơn vị hợp lý - không phải là điểm ảnh Một đơn
vị hợp lý là 1/96 của một inch Nếu bạn tăng độ phân giải màn hình của bạn, giao diện người
dùng vẫn có cùng kích thước Kể từ khi wPF được xây dựng trên một vector cơ sở thì sự diễn hoạt của nó rất dễ dàng để xây dựng và mở rộng giao diện người dùng
ze«= lý] CheckBox
2 Download va cai dat cong cul phat trién:
- Microsoft cung cấp 2 công cụ phát triển cho các ứng dụng WPF Một là Visual Studio dành cho các nhà phát triển (Developers), va Expression Blend dành cho các nhà thiết kế (Designs) - Trong khi Visual studio là tốt hỡn code và chỉnh sửa XAML, nhưng nõ lại ít hỗ trợ với đổ
họa như gradients, biên tập mẫu, diễn hoạt Đấy chính là những diém ma Expression Blend
hướng đến Blend hỗ trợ tốt cho phần đổ họa nhưng nó vẫn còn ít hỗ trợ cho code và biên tập XAML
Vi vay, chiing ta can cd Visual Studio lan Expression Blend
a Microsoft Studio 2010
Visual studio 2010 là công cụ mới nhất hiện nay cho các nhà phát triển các Ứng dụng WPE Nó
bao gổm một thiết kế 46 hoa cho WPF kể từ phién ban Visual studio 2008 Néu ban dang st
dung Visual studio 2005 bạn có thể cài thêm một add-on cho phép bạn phát triển các 'ứng dụng
WPF
Microsoft cung cấp miễn phí phiên bẩn Visual studio 2010 express bao g6m thiét ké WPF Bạn có thể tải về từ địa chỉ sau đây
Download Microsoft Visual C # 2010 — Express Edition
Trang 4.~ tee i ' lÝ
b Microsoft Expression Blend 3 + Sketch Flow
Expression Blend là một công cụ để thiết kế, nó là một phần của Express studio, một bộ công cụ mới từ MIicrosoft đặc biệt tạo ra cho các nhà thiết kế trải nghiệm Blendl bao gổm tất cả
các tính năng còn thiếu của thiết kế Visual Studio như styling, khuôn mẫu, điển hoạt, đổ họa
3D, resources và gradients
Trong phiên bản mới nhất, nó cũng bao gồm một công cụ tạo mẫu mạnh mẽ được gọi là SketchElow Expressien Blend có thể mở các file so lution được tạo bởi Visual Studio Bạn có thể tải Expnession Blend theo đường link bên dưới
Download Microsoft Expression Blend 3 c Những công cụ hữu ích khác e (WPE Inspector
se Snoop (Inspect the Visual Tree of running WPF applications) e Mole (Data Visualizer for Visual Studio
¢ XAML Power Toys
e WPF Performance Suite
Trang 5
Đây là một trong những cuốn sách tốt nhất về WPE 4 của tác giả Adam Nathan Cuốn sách được in với đầy đủ màu sẵc, tất các các mã lệnh đểu có cú pháp tô sáng Nó bao gổm những
lời giải thích tốt nhất về phiên bản 3 và bao gốm cả những chương mới vế cảm ứng đa điểm, XAML 2009, VSM, cải thiện việc biểu diễn văn bản, và còn nhiều thông tin đáng để
chúng ta tìm hiểu Click vào đây để dowload
b Pro WPF in C# 2010
Một cuốn sách nổi tiếng khi viết về lập trình WPE 4 trên ngôn ngữ C#
Nếu thực sự bạn làm được những gì trong cuốn sách này chỉ ra Bạn thực sự đã đạt đẳng cấp pro trong lập trình W PE
Cuổn sách được Apress xuất bản tháng 3 năm 2010
Ngôn ngữ tiếng Anh,
Click vao day dé download
c Windows Presentation Foundation — Unleashed
5entat
Q(1131AatIOI
Đây là một cuốn sách tuyệt vời viết về WPE Nó bao gổm tất cả các chủ để quan trọng, bao gốm cả lập trình 3D Tất cả các mã lệnh và cú pháp được tô sáng Có phần nâng cao phục vụ
cho các lập trình viên cao cấp
Trang 6Trên đây là những cuốn sách hay nhất viết về WPF 4 Nếu bạn thực sự thích lập trình với
WPF ban hay download va chinh phuc no
4.'Tao môt ứng dựng WPE đơn giản đầu tiên
- Bây giờ bạn hãy mở Visual Studio lên, vào menu File —> New —> Project Chon WPF
Application Chọn đường dẫn chứa thư mục project và OK
Lˆ — 4
| petaiiog Gemmpietes ý : Type vhudde
Ven dows bors Appbcat om vu C8
Faust C~e Wardens Preveacatien Fosndec ce rent
+ Other Lamquege: spcbcgtesn
Weite« T VÉ{ ^cgfxebecn mua c8 4 WssgiC# dd se “9 C¿*2+14 Aggltat+e uu § Web Otc ® ASP.NET Veet Agpcatoe varus C2 Ctaxø s Raponing wi Class Library mu C4 wrarePont wivertgt 2 ASD NET MVC 2 Web Appheasen vers C8 lex : Tag sz Stvergnt Apple ation vu, Ca ve.alls 7 a Other f Types a) Siverfqgyt Class Liteary dHuw C# Database: ‘ = ———Z <5 ST” —
Name Cie g Stoted
Locebsenc CJU5ezi Thách Cưang! Dccemecetz (xu el S% sáo 208273 acctz, - Ercwxe |
Solon name Gein Seted a Create ductor for sobstion
| Abd te seuarce contret
Visual Studio 2010 sẽ tạo ra praject và tự động thêm một số tập tin cần thiết vào Solution Explorer MOt File App.xaml, m6t MainWindow.xaml
2d} Sokition ‘Getting Started’ (1 project) 4 2 Getting Started 3 Properties oy References ©, App.xami oe: MainWindow.xe mi
Cấu trúc này trông khá giống với Windows Form, ngoại trừ tap tin Window 1 designer.cs Bay
giờ nó được khai báo trong tập tin MainWindow.xami với code ít hơn
Trang 7
ø 28) WPF Cortech 'Qu ae, 2) Buin
le Peter Oiedow «rCleso="Getting Íte*trúd.“GửớGGxán”
wee lrce Wttp://cabemat ec creosote com/wieta) et J veel (2 te¿@vtäf (%7 K4
c ples ie" http: / J achewes wicrosaft com ednfa/300¢6/ x00)"
@ Ben Tithe~"Mairinger” Helget="s59" nddtre"S25"> ø
or Caer - (i bt
©) Cowes Button Content}="Helie! * Seigit>"23" Morigerts Aligeeret-"Lete” Mergine"54),162,0,0° ⁄e%=TWwtteed” Vertical
: = <festiom reight]"1s" merlioabaligoserte"ieft” mergime"115,125,8,0° Nenee"textOeqa” vercicalélignsents" Top" w«( OsackBex tớ ld› ST Comsses € ˆs\ sđ 3 WOM - *' ” ‘ - Bây giờ chúng ta viết code sử lý sự kiện click cho button viừa kếo vào Bằng cách chọn sự “Hf Propemes * Events Search x CRM ContetMenu conc
kién của nó bên trong cửa sổ Properties (Nhấp vào bi ểu
tượng sét nhỏ màu vàng) DoubleClick vào sự kiện click Để tạo ra mỘt phương thức trong Codebehind được gọi khi người dùng nhấp chuột vào button
- Lưu ý: nếu bạn không tìm thấ y biểu tượng sét nhỏ màu vàng, bạn phải cài đật Server Pack 1 cho Visual Studio của mình Hoặc bạn có thể click đúp vào button để được kết quả tương tự
Visual studio 2010 sẽ tạo ra một phưỡng thỨc trong tập tin codebehind để gội khi button được click Bạn thử viết một dòng cade để khi clicl button sẽ hiện ra đoạn text mà chúng ta cần
hiển thị như đoạn code dưới đây:
prävate void buttoni Că¡ck(object sender, RoutedEventArgs ¢){ textBox1.Text = “Hello Lam Thanh
Cường! " }
Trang 8Hello Lam Thanh Cudmg
ì
Hãy cảm nhận thành quả đầu tiên cỦa mình!
5 WPE đã Làm thay đổi như thế nào trong công việc phát triể
Quy trình thiết kế Trải nghiệm người dùng
a Trải nghiệm người dùng sẽ trở thành môt nhân tố trong chìa khóa thành công
Trong quá khứ, chúng ta tập trung vào xây dựng sản phẩm và hoàn thành các yêu cầu chức
năng cỦa người ding, khi đó trải nghiệm người dùng được phát triển chậm chap Nhung
ngày nay, những người dùng yêu cầu nhiểu hơn một sản phẩm chỉ làm việc Cung cấp các
tính năng phù hợp vẫn là điểu kiện tiên quyết cho một sản phẩm tốt Nhưng để biến nó thành một cái gì đồ bất thường, bạn cần một trải nghiệm người dùng tốt
Cung cấp một trải nghiệm người dùng phong phú không phải là một cái gì may mắn Nó cần
được quy hoặch, thiết kế và tích hợp vào sự phát triển của sản phẩm Thiết kế trải nghiệm
người dùng phong phú không chỉ tạo nên giao diện người dùng của bạn bằng một số đổ họa và gradient — khái niệm của nó rộng hơn nhiều ĐỂ tạo ra một kết nối cảm tình của người
dùng Nó làm ch người dùng cảm thấy tốt và thích thú khi sử dụng phấn mềm đó,
b Công cụ mới cho cấc nhà thiết kế
Trang 9Kxprsssltows wvVetb Creste and Design Web Pages —i Expression Desegn ` -
Edm and Coewert Vector Leupression Bicad
Groptecs Create Utter ltertaces and Design
Microsoft cũng bố, cung cấp cho các nhóm phất triển mỘÖt cổng cự mạnh để tạo ra trải
nghiệm người dùng phong phú và cần nhiều công cụ hỗ trợ đổ họa hơn Visual Studio Vì vậy
hợ quyết định tạo ra mộỘt bộ công cụ mới cho các nhà thiết kế Đó là bộ công cụ Microsoft Expression bao g6m:
- Expression BÌend: được xây dựng để tạo ra các giao diện ngudi ding trong WPF va
Silverlight Nó xãy dựng cầu nối giữa thiết kế và phát triển, nó có thế mở răng các giải pháp
của Visual Studio
- Expression Design: là một phiên bản nặng ký của Adobe Illustrator để tạo vào chỉnh sửa đổ
hợa vector
- Expression Media: được xây dựng để mã hóa, cắt, nối, làm phong phú thêm các file video và
t6i Lu hoa chiing cho Silverlight stream
- Expression Web: là một thế hệ kế tiếp của trình soạn thảo HTML và Iavascript Được dùng để thay thế cho ErontPage trước đây
Trang 10
2 integrator converts Mlustrator file to XAML and makes it available as a resource
c Phát triển công việc của một WPF project:
Tổ 1 Visual Designer creates vector image
Ca in Adobe Illustrator
= Ke,
3 Developer can use the
resource trom code
Phát triển một ứng dựng WPF với trải nghiệm người dùng phong phú đòi hỏi kỹ năng nhi ếu
hơn mỘt nhà phân tích chỉ được yêu cầu xác định một danh sách các trường hợp sử dụng, phát triển và thực hiện các phần mềm Chúng ta phải tìm ra những gì mà người dùng thực sự cần Điểu này có thể được thực hiện bằng cách làm theo một cách tiếp cận với trọng tâm là người dùng =- 1 Elicit Requirements Requirements Engineer iteratively a= 32 s= 7 Test Software So*ware Tester 2 Create arid validate Ui Prototype interaction Oesgner a :
kè J ln plement Business Log
end create Raw-User Interface Custonwer Software Deweloper Wy 4 integrate Graptnical Design Graphic at Besigne:
c.1 Gơi ra những yêu cầu:
Trang 11dựng (trừu tượng) hoặc các kịch bản của người dùng (minh họa) Nhiệm vụ này khá quan
trọng và đôi khi phải lặp đi lặp lại và nó được thực hiện bởi các các kỹ sư yêu cầu (requirements engineer)
c.2 Tao phién bản dùng thử cho người dùng:
Tạo một mẫu giao diễn người clùng là một bước quan trọng sao cho những ý tưởng chia sẽ giỮa người dùng và các ky su có thể tạo ra một hiểu biết chung về thiết kế tương tác Nhiệm
vụ này được thực hiện bởi nhà thiết kế tương tác (interaction designer) Nó rất hữu ích để chỉ
phát thảo giao diện người dùng, Có nhiều kỹ thuật và công cụ để làm điểu này, một trong số
đó là:
- Paper Prototype (giấy nguyên mẫu): sử dụng giấy và bút chì để phát thảo sỡ bộ về giao
diện người dùng của bạn Không có các công cụ và cơ sở hạ tầng cần thiết MỌi người chỉ
có thể phác họa ÿ tưởng cỦa họ trên giấy
- WireFrames: thường được sử dụng để phác thảo cách hố trí một trang Nó được gọi là
wireframes bởi vì bạn chỉ cần vẽ những phác thảo về các control và hình ảnh Điều đó có thể được thực hiện bởi cấc công cụ như PowerPoint hay Visõ
- Expression Blend 3 — Sketch Flow: Sketch Flow là một tính năng mới thú vị để tạo ra các
mẫu tương tác trực tiếp trong WPE Bạn có thể sử dụng tích hợp “Wiggly style” để làm nó trở vẫn tắt Nguyên mẫu này có thể chạy trong một máy phát độc lập và một cơ chế phần hối
thích hợp
- Interactive Prototype(Tương tác thử nghiệm): đắt tiến nhưng là phương pháp tiếp cận thực
tế nhất là tạo ra một thể (tái sử dụng) nguyên mẫu đó là các công việc như các ng dụng
thực tế nhưng với dữ liệu giả
Nói chưng quy trình thiết kế trải nghiệm người dùng là khá rộng Với góc độ là một developer
thì chúng ta chỉ tim hiểu đến đây là ổn