Bi m u TNG QUAN V WINDOWS REPRESENTATION FOUNDATION

Bi ny gii thiu tng quan v cng ngh Windows Presentation Foundation (WPF). Phn u ni v nhng thch thc trong vic xy dng giao din ngi dng hin i, t dn n s ra i ca cng ngh WPF, cng ngh xy dng giao din mi ca Microsoft. Sau s gii thiu nhng khi nim, mc tiu cn bn v cc thnh phn quan trng ca WPF. Phn cui s gii thiu cc cng c cn thit pht trin ng dng WPF v gip hc vin lm quen vi WPF bng vic hng dn pht trin mt ng dng n gin c th.

Giao din ngi dng hin i v nhng thch thc

Trong cc ng dng hin i, giao din ngi dng trc quan chim v tr ht sc quan trng. Vic trnh din ng thng tin, theo ng cch v vo ng thi im c th em li nhng gi tr kinh t x hi ng k. Vi nhng ng dng thng mi, chng hn mt ng dng bn hng trc tuyn, vic cung cp mt giao din ngi dng mnh c th to nn s khc bit gia mt cng ty vi cc i th cnh tranh, gp phn lm tng tng doanh s v gi tr thng hiu ca hng ny so vi hng khc. c c mt giao din ngi dng nh vy, vic tch hp ha, media, vn bn v cc thnh phn trc quan khc nh mt th thng nht ng ng vai tr mu cht. Hy xem xt mt ng dng c th trong qun l v theo di bnh nhn ca mt bnh vin no . Vi s pht trin ca cng ngh a phng tin hin nay, yu cu v giao din ngi dng cho h thng mi ny s bao gm: - Hin th hnh nh v text v bnh nhn. - Hin th v cp nht hnh nh 2 chiu cho bit trng thi ca bnh nhn nh nhp tim, huyt p. - Cung cp hnh nh chng lp 3 chiu v thng tin ca ngi bnh. - Trnh din nhng on video siu m v nhng chn on khc, trong , cho php bc s hay y t thm vo cc ghi ch. - Cho php nhn vin bnh vin c v ghi ch trn nhng ti liu m t v bnh nhn v tnh trng ca ngi .

- C kh nng hot ng nh mt ng dng Windows, trong , cc nhn vin bnh vin u c s dng y cc tnh nng, ng thi c th chy trn trnh duyt Web c gii hn v an ninh, cho php cc bc s truy nhp c hn ch t xa qua mng Internet. Vi cng ngh t trc nm 2006, mt giao din nh vy trn Windows c th xy dng c, tuy nhin, s gp khng t kh khn bi mt s nguyn nhn chnh sau: - C rt nhiu cng ngh khc nhau c s dng lm vic vi hnh nh m thanh v video. Tm c nhng lp trnh vin c kh nng s dng tt nhiu cng ngh nh vy khng d v chi ph cao cho c qu trnh pht trin cng nh bo tr ng dng. - Thit k mt giao din biu din c hiu qu tt c nhng tnh nng nh vy cng l mt thch thc. N i hi phi c nhng ngi thit k giao din chuyn nghip, bi lp trnh vin phn mm n thun s khng c cc k nng cn thit. iu ny li dn ti nhng kh khn pht sinh khi ngi thit k v ngi lp trnh lm vic chung. - Vic cung cp mt giao din y tnh nng, hot ng c nh mt ng dng Windows ring bit trn my desktop, ng thi c th c truy nhp thng qua trnh duyt c th i hi phi xy dng hai phin bn c lp s dng hai cng ngh khc nhau. ng dng Windows trn desktop s dng Windows Forms v cc cng ngh thun Windows khc, trong khi ng dng trn trnh duyt li s dng HTML v JavaScript. Do , cn phi c hai nhm pht trin vi hai phn k nng khc nhau.

WPF ra i chnh l xy dng mt nn tng chung gii quyt nhng thch thc nu trn.

WPF l g?
WPF, vit tt ca Windows Presentation Foundation, l h thng API mi h tr vic xy dng giao din ho trn nn Windows. c xem nh th h k tip ca WinForms, WPF tng cng kh nng lp trnh giao din ca lp trnh vin bng cch cung cp cc API cho php tn dng nhng li th v a phng tin hin i. L mt b phn ca .NET Framework 3.0, WPF sn c trong Windows Vista v Windows Server 2008. ng thi, WPF cng c th hot ng trn nn Windows XP Service Pack 2 hoc mi hn, v c Windows Server 2003. WPF c xy dng nhm vo ba mc tiu c bn: 1) Cung cp mt nn tng thng nht xy dng giao din ngi dng; 2) Cho php ngi lp trnh v ngi thit k giao din lm vic cng nhau mt cch d dng; 3) Cung cp mt cng ngh chung xy dng giao din ngi dng trn c Windows v trnh duyt Web.

Microsoft Vietnam DPE Team |WPF Bi m u: Tng quan v WPF

1.1

Nn tng thng nht xy dng giao din ngi dng

Trc khi WPF ra i, vic to giao din ngi dng theo nhng yu cu m t v d trn i hi s dng rt nhiu cng ngh khc nhau (xem Bng 2.1). to form, cc control v cc tnh nng kinh in khc ca mt giao din ha Windows, thng thng lp trnh vin s chn Windows Forms, mt phn ca .NET Framework. Nu cn hin th vn bn, Windows Forms c mt s tnh nng h tr vn bn trc tip hoc c th s dng Adobes PDF hin th vn bn c khun dng c nh. i vi hnh nh v ha 2 chiu, lp trnh vin s dng GDI+, mt m hnh lp trnh ring bit c th truy nhp qua Windows Forms. hin th video hay pht m thanh, lp trnh vin li phi s dng Windows Media Player, v vi ha 3 chiu, anh ta li phi dng Direct3D, mt thnh phn chun khc ca Windows. Tm li, qu trnh pht trin giao din ngi dng theo yu cu tr nn phc tp, i hi lp trnh vin qu nhiu k nng cng ngh. Windows Forms Giao din ha (form v cc control) On-screen vn bn Fixed-format vn bn Hnh nh Video v m thanh ha 2 chiu ha 3 chiu x x x x x x x x x x x x PDF Windows Forms/ GDI+ x Windows Media Player x Direct3D WPF

Bng 0.1 Thnh phn giao din theo yu cu v nhng cng ngh chuyn bit cn thit to chng. WPF l gii php hp nht nhm gii quyt tt c nhng vn cng ngh nu trn, hay ni cch khc, WPF cung cp nhiu tnh nng lp trnh giao din trong cng mt cng ngh n nht. iu ny gip cho qu trnh to giao din ngi dng tr nn d dng hn ng k. Hnh 2.2 cho thy mt giao din qun l v theo di bnh nhn c s kt hp ca hnh nh, text, ha 2 chiu/3 chiu v nhiu

Microsoft Vietnam DPE Team |WPF Bi m u: Tng quan v WPF

thng tin trc quan khc. Tt c u c to ra bng WPF lp trnh vin khng cn vit code s dng cc cng ngh chuyn bit nh GDI+ hay Direct3D.

Hnh 0.1 Mt giao din ngi dng qun l v theo di bnh nhn s dng WPF c th kt hp hnh nh, text, ha 2 chiu/3chiu v nhiu tnh nng trc quan khc Tuy nhin, WPF ra i khng c ngha l tt c nhng cng ngh nu trn b thay th. Windows Forms vn c gi tr, thm tr trong WPF, mt s ng dng mi vn s s dng Windows Forms. Windows Media Player vn ng mt vai tr cng c c lp chi nhc v trnh chiu video. PDF cho vn bn vn tip tc c s dng. Direct3D vn l cng ngh quan trng trong games v cc dng ng dng khc (Trong thc t, bn thn WPF da trn Direct3D thc hin mi biu din ha). Vic to ra mt giao din ngi dng hin i khng ch l vic hp nht cc cng ngh sn c khc nhau. N cn th hin vic tn dng li im ca card ha hin i. gii phng nhng hn ch ca ha bitmap, WPF da hon ton trn ha vector, cho php hnh nh t ng thay i kch thc ph hp vi kch thc v phn gii ca mn hnh m n c hin th. Bng vic hp nht tt c cc cng ngh cn thit to ra mt giao din ngi dng vo mt nn tng n nht, WPF n gin ha ng k cng vic ca lp trnh vin giao din. Vi vic yu cu lp trnh vin hc mt mi trng pht trin duy nht, WPF gp phn lm gim chi ph cho vic xy dng v bo tr ng dng. V bng vic cho php tch hp a dng nhiu cch biu din thng tin trn

Microsoft Vietnam DPE Team |WPF Bi m u: Tng quan v WPF

giao din ngi dng, WPF gp phn nng cao cht lng, v theo l gi tr cng vic, ca cch thc ngi dng tng tc vi ng dng trn Windows.

1.2

Kh nng lm vic chung gia ngi thit k giao din

v lp trnh vin
Trong thc t, vic xy dng mt giao din ngi dng phc hp nh trong v d v ng dng qun l bnh nhn trn i hi nhng k nng t thy nhng lp trnh vin n thun, m ch c th tm thy nhng ngi thit k giao din chuyn nghip. Nhng cu hi t ra l lm sao ngi thit k v lp trnh vin c th lm vic cng nhau? Thng thng, ngi thit k giao din s dng mt cng c ha to ra nhng nh tnh v cch b tr giao din trn mn hnh. Nhng hnh nh ny sau c chuyn ti lp trnh vin vi nhim v to ra m trnh hin thc ha giao din thit k. i lc v ra mt giao din th n gin vi ngi thit k, nhng bin n thnh hin thc c th l kh khn hoc bt kh thi vi lp trnh vin. Hn ch v cng ngh, sc p tin , thiu k nng, hiu nhm hoc n gin l bt ng quan im c th khin lp trnh vin khng p ng c y yu cu t ngi thit k. Do vy, iu cn thit y l mt cch thc hai nhm cng tc c lp ny c th lm vic vi nhau m khng lm thay i cht lng ca giao din thit k. thc hin c iu ny, WPF a ra ngn ng c t eXtensible Application Markup Language (XAML). XAML nh ra mt tp cc phn t XML nh Button, TextBox, Label, nhm nh ngha cc i tng ha tng ng nh nt bm, hp thoi, nhn, v nh cho php m t chnh xc din mo ca giao din ngi dng. Cc phn t XAML cng cha cc thuc tnh, cho php thit lp nhiu tnh cht khc nhau ca i tng ha tng ng. V d, on m sau s to ra mt nt bm mu c nhan B qua.
<Button Background="Red">No</Button>

Mi phn t XAML li tng ng vi mt lp WPF, v mi thuc tnh ca phn t li tng ng vi thuc tnh hay s kin ca lp ny. Chng hn, nt bm mu trong v d trn c th to bng C# code nh sau:
Button btn = new Button(); btn.Background = Brushes.Red; btn.Content = "No";

Nu nh mi th c th biu din bng XAML th cng c th biu din bng on m, th cu hi t ra l XAML c ngha g? Cu tr li l vic xy dng cc cng c sinh v s dng cc c t

Microsoft Vietnam DPE Team |WPF Bi m u: Tng quan v WPF

bng XML d dng hn nhiu so vi xy dng mt cng c tng t lm vic vi on m. Bi vy, XAML m ra mt cch thc tt hn lp trnh vin v ngi thit k lm vic vi nhau. Hnh 2.3 minh ha qu trnh ny.

Hnh 0.2 XAML h tr lp trnh vin v ngi thit k lm vic chung. Ngi thit k c th m t giao din ngi dng v tng tc vi n thng qua mt cng c, chng hn nh Microsoft Expression Interactive Designer. Ch tp trung vo vic nh ra din mo v cm quan cho giao din ha WPF, cng c ny sinh cc on m t giao din th hin qua ngn ng XAML. Lp trnh vin sau s nhp on m t XAML vo mi trng lp trnh, chng hn nh Microsoft Visual Studio. Thay v lp trnh vin phi ti to li giao din t u da trn mt nh tnh m ngi thit k cung cp, bn thn cc on XAML ny s c Microsoft Visual Studio bin dch ti to thnh giao din ha ng theo m t. Lp trnh vin ch tp trung vo vic vit m trnh cho giao din c sinh ra, chng hn nh x l cc s kin, theo nhng chc nng ra ca ng dng. Vic cho php ngi thit k v lp trnh vin lm vic chung nh vy s hn ch nhng li pht sinh khi hin thc ha giao din t thit k. Thm vo , n cn cho php hai nhm cng tc ny lm vic song song, khin mi bc lp trong quy trnh pht trin phn mm ngn i v vic phn hi c tt hn. V c hai mi trng u c kh nng hiu v s dng XAML, ng dng WPF c th chuyn qua li gia hai mi trng pht trin sa i hay b sung giao din. Vi tt c nhng li im ny, vai tr ca ngi thit k trong vic xy dng giao din c t ln hng u.

1.3

Cng ngh chung cho giao din trn Windows v trn

trnh duyt Web

Trong thi i bng n ca Internet, cc ng dng Web ngy mt pht trin. Vic trang b giao din ngi dng vi y tnh nng nh mt ng dng desktop s thu ht nhiu ngi s dng;, v do

Microsoft Vietnam DPE Team |WPF Bi m u: Tng quan v WPF

 gp phn lm tng gi tr doanh nghip. Tuy nhin, nh nu trong phn u, vi nhng cng ngh truyn thng, pht trin mt giao din ha va hot ng trn desktop va trn trnh duyt Web, i hi phi s dng nhng cng ngh hon ton khc nhau, ging nh vic xy dng hai giao din hon ton c lp. iu ny to ra chi ph khng cn thit pht trin giao din. WPF l mt gii php cho vn ny. Lp trnh vin c th to ra mt ng dng trnh duyt XAML (XBAP) s dng WPF chy trn Internet Explore. Trn thc t, cng on code ny c th c dng sinh ng dng WPF chy c lp trn Windows. Hnh 0.4 minh ha mt ng dng dch v ti chnh hot ng nh mt ng dng WPF c lp. Trong khi , hnh 0.4 minh ha giao din ca cng ng dng chy trn Internet Explore di dng XBAP.

Hnh 0.3. ng dng WPF c lp cung cp dch v ti chnh chy trong ca s ring.

Microsoft Vietnam DPE Team |WPF Bi m u: Tng quan v WPF

Hnh 0.4. Giao din ca cng ng dng nu trn di dng mt XBAP chy trn Internet Explore. Nh thy trong Hnh 0.4, phn giao din ca ng dng dng XBAP c trnh duyt chia thnh cc frame thay v chy trn cc ca s ring, ngoi ra, cc chc nng u c bo ton. Cng mt on m c s dng chung cho c hai trng hp s lm gim khi lng cng vic cn thit pht trin hai dng giao din. Thm vo , s dng cng mt on m cng c ngha l s dng cng k nng ca lp trnh vin. Do , lp trnh vin ch cn c hc mt kin thc chung l c th s dng trong c hai trng hp. Mt li im na ca vic dng chung cng ngh cho c giao din Windows v giao din Web l ngi xy dng ng dng khng nht thit phi quyt nh trc loi giao din no c s dng. Min l my client p ng c nhng yu cu h thng chy XBAP, mt ng dng c th cung cp c giao din Windows v giao din Web, m ch s dng phn ln nhng on m ging nhau. Mi ng dng XBAP c download khi cn t mt Web server, nn n phi tun theo nhng yu cu v an ninh kht khe hn i vi mt ng dng Windows c lp. Theo , XBAP chy trong phm vi sandbox an ninh do h thng an ninh truy nhp m ca .NET Framework cung cp. XBAP ch chy vi cc h thng Windows c ci t WPF v ch vi Internet Explore phin bn 6 v 7 tr ln.

Microsoft Vietnam DPE Team |WPF Bi m u: Tng quan v WPF

3. Cc thnh phn ca WPF

Ging nh cc thnh phn khc ca .NET Framework, WPF t chc cc chc nng theo mt nhm namespace cng trc thuc namespace System.Windows. Bt k chc nng no c s dng, cu trc c bn ca mi ng dng WPF u gn nh nhau. L ng dng Windows c lp hay l mt XBAP, mt ng dng WPF in hnh bao gi cng gm mt tp cc trang XAML v phn code tng ng c vit bng C# hoc Visual Basic, cn gi l cc file code-behind. Tt c cc ng dng u k tha t lp chun Application ca WPF. Lp ny cung cp nhng dch v chung cho mi ng dng, chng hn nh cc bin lu tr trng thi ca ng dng, cc phng thc chun kch hot hay kt thc ng dng. Mc d WPF cung cp mt nn tng thng nht to giao din ngi dng, nhng cng ngh m WPF cha ng c th phn chia thnh nhng thnh phn c lp. Nhn ca WPF l c ch to sinh ha da trn vector v c lp vi phn gii nhm tn dng nhng li th ca phn cng ha hin i. WPF c m rng vi cc tp tnh nng pht trin ng dng bao gm XAML, cc control, c ch mc ni d liu, layout, ha 2 chiu, ba chiu, hot ha, style, khun dng mu, vn bn, media, text v in n. WPF nm trong .NET Framework, nn ngoi ra, ng dng WPF c th kt hp cc thnh

DOCUMENT SERVICES XPS Documents

USER INTERFACE SERVICES Application Services Controls Databinding

Windows Presentation Foundation

Packaging Services

Deployment Services

Layout

XPS Viewer

MEDIA INTEGRATION LAYER Imaging 2D Text Effects 3D Video Audio

BASE SERVICES XAML

Accessibility

Animation

Input & Eventing

Composition Engine

Property System

phn khc c trong th vin lp ca .NET Framework. Hnh 0.5. Cc thnh phn c bn ca WPF

Microsoft Vietnam DPE Team |WPF Bi m u: Tng quan v WPF

Phn tip theo s gii thiu s lc nhng thnh phn v khi nim quan trng ca WPF.

3.1

Layout v Control

sp t cc thnh phn khc nhau trn giao din, ng dng WPF s dng panel. Mi panel c th cha cc thnh phn con, bao gm cc control nh nt bm hay hp thoi, hay bn than nhng panel khc. Nhng loi panel khc nhau cho php sp xp thnh phn con theo nhng cch khc nhau. V d, DockPanel cho php cc thnh phn con c th c t dc theo cnh ca panel , trong khi Grid cho php sp t cc thnh phn con ca n trn mt li ta . Ging nh bt k mt cng ngh giao din ngi dng no, WPF cung cp mt s lng ln cc control. Ngoi ra, ngi dng c th ty nh ngha cc control theo mnh. Cc control chun gm Button, Label, TextBox, ListBox, Menu, Slider, hay phc tp hn c SpellCheck, PasswordBox Cc s kin do ngi dng to ra, nh di chuyn chut hay n phm, c th c cc control nm bt v x l. Trong khi cc control v cc thnh phn giao din khc c th c c t y bng XAML, cc s kin bt buc phi c x l bng m trnh.

3.2

Style v Template

Ging nh s dng Cascading Style Sheets (CSS) i vi HTML, vic nh ra thuc tnh ha cho cc i tng giao din mt ln, ri sau p dng li cho cc i tng khc cng loi thng rt tin li. WPF cng cung cp tnh nng tng t bng vic s dng thnh phn Style ca XAML. V d, kiu ButtonStyle c th c nh ngha nh sau:
<Style x:Key="ButtonStyle"> <Setter Property="Control.Background" Value="Red"/> <Setter Property="Control.FontSize" Value="16"/> </Style>

Bt k nt bm no s dng kiu ny s c nn mu v s dng font ch kch thc 16. V d:

<Button Style="{StaticResource ButtonStyle}"> Click Here </Button>

Mt Style c th c dn xut t mt Style khc, tha k hoc chng ln nhng thuc tnh thit lp. Mi style c th nh ngha cc trigger cho php to ra nhng hiu ng tng tc c bit, chng hn nh khi lt chut qua nt bm, nt bm chuyn thnh mu vng.

Microsoft Vietnam DPE Team |WPF Bi m u: Tng quan v WPF

10

WPF cng h tr s dng template. Mi template tng t nh mt style, v hai dng: Template cho d liu: s dng thnh phn DataTemplate ca XAML thit Template cho control: s dng thnh phn ControlTemplate ca XAML

lp mt nhm thuc tnh hin th ca d liu nh mu sc, phng thc cn l... nh ra din mo ca mt control.

3.3

Text

Giao din ngi dng t nhiu u hin th ch hay text. i vi phn ln mi ngi, c text trn mn hnh thng kh hn c trn giy in. l do cht lng hin th text trn mn hnh km hn so vi khi in ra giy. WPF tp trung gii quyt vn ny, lm cht lng text hin th trn mn hnh tng ng trn giy in. C th, WPF h tr cc font ch OpenType chun, cho php s dng cc th vin font c. WPF cng h tr cng ngh font ch mi ClearType, cho php hin th cc k t mn hn i vi mt ngi, c bit l trn mn hnh tinh th lng (LCD). nng cao hn na cht lng hin th text, WPF cho php mt s cng ngh khc nh ch ghp, theo mt nhm k t c thay th bng mt nh n nht, to tm l thoi mi hn khi c i vi ngi dng.

3.4

Vn bn

WPF h tr ba dng vn bn: vn bn c nh (fixed), vn bn thch nghi (flow/adaptive) v vn bn XPS (XML Paper Specification). Km theo , WPF cng cung cp cc dch v to, xem, qun l, ghi ch, ng gi v in n vn bn. Vn bn c nh trng khng i bt k chng c hin th trn mn hnh hay in ra my in. Trong WPF, nhng vn bn dng ny c nh ngha bng phn t FixedDocument trong XAML v c hin th bng control DocumentViewer. Trong khi , vn bn thch nghi thng ch dng c trn mn hnh, v c kh nng t ng thay i cc thuc tnh hin th nh v text cho ph hp vi kch thc ca s hay cc yu t mi trng khc nhm nng cao cht lng c cho ngi dng. Vn bn thch nghi c nh ngha bng phn t FlowDocument. hin th vn bn thch nghi, WPF s dng mt s control khc nhau, chng hn nh FlowDocumentPageViewer, FlowDocumentScrollViewer, FlowDocumentReader

Microsoft Vietnam DPE Team |WPF Bi m u: Tng quan v WPF

11

Hnh 0.6. Mt minh ha v vn bn thch nghi trong WPF. Vn bn XPS xy dng trn c s vn bn bt ng ca WPF. XPS l mt nh dng m theo c t XML, c kh nng s dng trn nhiu nn tng khc nhau, c thit k nhm to thun li cho vic xy dng, chia s, in n v lu tr vn bn. Cng nh vn bn c nh, vn bn XPS c hin th bng DocumentViewer.

Hnh 0.7. Mt minh ha v vn bn XPS trong WPF.

3.5

Hnh nh

Trong WPF, hnh nh c hin th nh control Image, v d:

<Image Width="200" Source="C:\Documents Pictures\Ava.jpg" /> and Settings\All Users\Documents\My

Microsoft Vietnam DPE Team |WPF Bi m u: Tng quan v WPF

12

Control Image c th hin th hnh nh lu tr di nhiu khun dng khc nhau, bao gm JPEG, BMP, TIFF, GIF v PNG. N cng c th hin th hnh nh dng Windows Media Photo mi c s dng trong Windows Vista. Bt k khun dng no, WPF s dng Windows Imaging Component (WIC) to ra hnh nh. Cng vi cc codec dng cho cc khun dng nh k trn, WIC cng cung cp mt nn tng chung b sung codec khc.

3.6

Video v m thanh

Khi tc ca cc b x l v truyn thng mng ngy mt nng cao, video tr thnh mt phn tng tc ln ca ngi dng vi phn mm. Ngi dng cng s dng nhiu thi gian nghe nhc v cc dng m thanh khc trn my tnh. Do , WPF cung cp tnh nng h tr c hai dng media ny thng qua phn t MediaElement. Control ny c th chi cc nh dng video WMV, MPEG v AVI, v nhiu nh dng m thanh khc nhau. Vic lp trnh chy mt on video tr nn kh n gin, nh trong v d sau:
<MediaElement Source="C:\Documents and Settings\All Users\Documents\ My Videos\Ruby.wmv" />

3.7

ha hai chiu

Trong 20 nm gn y, vic to ra ha hai chiu trn Windows da trn Graphics Device Interface (GDI) v phin bn sau ca n GDI+. Cc ng dng Windows Forms phi s dng chc nng ny thng qua mt namespace khc hon ton, bi bn thn Windows Forms khng tch hp ha 2 chiu. i vi ha 3 chiu th cng ti hn, Windows Forms phi da trn cng ngh hon ton bit lp l Direct3D. Vi WPF, vn tr nn n gin hn nhiu. C ha 2 chiu v 3 chiu u c th c to ra trc tip trong XAML hoc trong code s dng th vin WPF tng ng. i vi ha 2 chiu, WPF nh ra nhm control ca cc khun hnh (shapes) m ng dng c th s dng to nn hnh nh, gm:

Line: v ng thng qua 2 im. Elllipse: v ellipse. Rectangle: v ch nht. Polygon: v a gic. Polyline: v a gic m. Path: v hnh theo mt ng bt k.

Microsoft Vietnam DPE Team |WPF Bi m u: Tng quan v WPF

13

Mi khun hnh u c cc thuc tnh phong ph cho php hin th vi nhiu tnh cht khc nhau: mu nn, mu bin Mt c im quan trng trong WPF l: v mi th u c xy dng trn mt nn chung, vic kt hp cc c tnh v i tng khc nhau, chng hn, lng mt nh vo mt hnh ch nht, tr nn n gin. im th v na l cc i tng hnh hc ny cn c th thu nhn cc s kin t pha ngi dng nh mt control, chng hn s kin nhp chut. Ngoi ra, WPF cng cung cp mt nhm chc nng hnh hc khc, gi l geometries, lm vic vi ha hai chiu, nh LineGeometry, RectangleGeometry, EllipseGeometry, v PathGeometry. Dng hnh hc ny c nhiu thuc tnh v chc nng tng t nh cc khun hnh nu trn. im khc bit quan trng nht l cc geometries khng c dng hin th, chng c dng ch yu tnh ton hnh hc, v d nh nh ra cc vng min, theo di v tr bm chut... Thm vo , WPF cung cp lp Transform cho php thc hin cc bin i hnh hc nh xoay, dch chuyn, co gin i tng ha; hoc cho php thc hin cc hiu ng hot ha theo thi gian thng qua cc lp Animation v Timing.

3.8

ha ba chiu

WPF h tr ha 3 chiu bng vic gi cc li gi API ca Direct3D, v do vy, vic s dng chng tr nn thng nht v n gin hn ng k. hin th ha ba chiu, ng dng WPF s dng control Viewport3D. to ra cc cnh ba chiu, lp trnh vin m t mt hay nhiu m hnh, sau , phn nh cch thc cc m hnh ny c chiu sng hay hin th. Nh thng l, iu ny c thc hin bng XAML, bng code hay trn c hai. m t m hnh, WPF cung cp lp GeometryModel3D to ra hnh dng ca m hnh. Khi m hnh c nh hnh, din mo bn ngoi ca n c th c iu khin bng vic ph ln cc vt liu (material). Chng hn, lp SpecularMaterial cho php to bng trn b mt m hnh. Bt k c lm t vt liu g, mt m hnh c th c chiu sng theo nhiu cch. Lp DirectionalLight cho php nh sng ti t mt hng xc nh, trong khi lp AmbientLight to ra nh sng ng u trn mi vt trong cnh. Cui cng, nh ra cch nhn cnh, lp trnh vin phi nh ra mt camera. V d, PerspectiveCamera cho php phn nh khong cch t v tr nhn ti vt th v kiu nhn phi cnh (tun theo lut gn xa).

Microsoft Vietnam DPE Team |WPF Bi m u: Tng quan v WPF

14

Hnh 0.8. To lp i tng ha ba chiu vi WPF. Xy dng cnh ba chiu trc tip bng XAML hay m trnh u khng n gin. Do , ch nn dng ng dng WPF hin th cnh ba chiu, vic xy dng cnh nn c thc hin bng nhng cng c ha chuyn bit.

3.9

Mc ni d liu

Phn ln cc ng dng c to ra u cung cp cho ngi dng phng tin xem v sa i d liu. Trong cc ng dng WPF, vic lu tr v truy xut d liu c thc hin bi cc cng ngh nh Microsoft SQL Server v ADO.NET. Sau khi d liu c truy xut v ti vo cc i tng qun l d liu trn ng dng, phn vic kh khn ca ng dng WPF mi bt u. V c bn, c hai cng vic phi thc hin: 1) Sao chp d liu t cc i tng qun l d liu vo cc control trn giao din, m bo rng nhng thay i trn d liu t cc control c cp nht tr li

qua , d liu c th c hin th hay sa i. 2) cc i tng qun l d liu. n gin ha qu trnh pht trin ng dng, WPF cung cp mt c ch mc ni d liu thc hin t ng nhng bc ny. Phn nhn ca c ch mc ni d liu l lp Binding m nhim v ca n l lin kt control trn giao din (ch) vi i tng qun l d liu (ngun). Mi quan h ny c minh ha trong hnh di y:

Microsoft Vietnam DPE Team |WPF Bi m u: Tng quan v WPF

15

Hnh 0.9. Quan h gia i tng d liu v i tng ph thuc. Vic h tr mc ni d liu c xy dng ngay t nhn ca WPF. Tt c cc i tng ha trong WPF u k tha t DependencyObject, chng l cc i tng ph thuc. Chc nng m lp c s ny h tr cho php thc hin hiu ng hot ha, to kiu mu (styling) v mc ni d liu. Cc i tng ny u mang mt thuc tnh c bit gi l DependencyProperty, thuc tnh ph thuc. Phn ln cc thuc tnh hay dng nh Text, Content, Width, Height, vn vn u l cc thuc tnh ph thuc. Tt c cc thuc tnh ph thuc u c th to hiu ng hot ha, to kiu v kt ni d liu. C ch mc ni d liu trong WPF cn cung cp thm nhng tnh nng nh xc thc tnh hp l, sp xp, lc v phn nhm d liu. Thm vo , tnh nng mc ni d liu cng h tr s dng khun mu d liu (data template) to ra cc i tng giao din ty bin c kt ni d liu, khi cc control chun khng ph hp. Mc ni d liu v khun dng d liu c th c coi l tnh nng mnh nht ca WPF.

4. Cng c pht trin WPF

Nh trnh by trn, WPF cung cp rt nhiu tnh nng cho nhng lp trnh vin. Tuy nhin, mt cng ngh d c hu dng n u cng cn mt cng c v mi trng tt pht huy nhng li im ca n. i vi WPF, Microsoft cung cp mt cng c chuyn dng cho lp trnh vin, v mt cng c khc phc v ngi thit k giao din. Phn di y cp ngn gn v nhng cng c ny.

4.1

Microsoft Visual Studio - Cng c cho lp trnh vin

Visual Studio l cng c ch o ca Microsoft dnh cho lp trnh vin phn mm. Microsoft cung cp thnh phn m rng cho Visual Studio 2005 cho php lp trnh vin c th to ra cc ng dng WPF. Phin bn tip theo ca Visual Studio (2008) c b sung thm cc tnh nng pht trin ng dng WPF, trong bao gm Visual Designer, mi trng thit k giao din cho WPF. S dng cng c ny, lp trnh vin c th to ra giao din WPF mt cch trc quan, trong khi sn sinh cc c t XAML tng ng mt cch t ng.

Microsoft Vietnam DPE Team |WPF Bi m u: Tng quan v WPF

16

4.2 k

Microsoft Expression Design Cng c cho ngi thit

Nh gii thiu trong phn trc, mc tiu c bn ca WPF l nng cao v th ca ngi thit k trong vic to giao din ngi dng. t mc tiu ny, ngoi XAML l cng ngh ct li, Microsoft cng a ra mt cng c mi cho php ngi thit k lm vic thun tin hn, l Microsoft Expression Design (Hnh 0.10).

Hnh 0.10. Giao din ca cng c Microsoft Expression Design. Microsoft Expression Design cung cp nhng tnh nng truyn thng ca mt cng c thit k, cho php ngi dng lm vic theo cch quen thuc. Ngoi ra, cng c ny c bit tp trung vo vic h tr to giao din cho cc ng dng WPF. Tt c cc tnh nng WPF m t trn u sn c trong mi trng thit k ny, v cho php ngi dng thit k mt cch trc quan. Kt qu thit k c biu din di dng file XAML do cng c ny sinh ra, v sau c th c nhp vo mi trng Visual Studio.

Microsoft Vietnam DPE Team |WPF Bi m u: Tng quan v WPF

17

5. ng dng u tin vi WPF Hello World

Phn ny gip cc bn lm quen vi lp trnh WPF thng qua mt v d kinh in: Hello World. ng dng ch bao gm mt nt bm c nhn ban u l Hello World. Khi nhp chut vo nt, nt s i tn thnh From Hanoi, Vietnam. Mi trng lp trnh y l b Visual Studio 2008 vi .NET Framework 3.5. Quy trnh thc hin nh sau:

5.1

To ng dng WPF

y, ta ch chn .Net Framework 3.5. Giao din thit k ng dng:

Microsoft Vietnam DPE Team |WPF Bi m u: Tng quan v WPF

18

Chng ta s lm 2 phng php, mt l vit code C# trc tip trong ng dng, hai l vit bng m XAML.

5.2

To ng dng Hello World bng code C#

Khai bo Button trong lp Window1. Lp Button c to ra t namespace: System.Windows.Controls;

namespace Helloworld { public partial class Window1:Window { // khai bo 1 button Button button; public Window1() { InitializeComponent(); } } }

phng thc khi to, ta s ln lt t thuc tnh cho nt bm:

Microsoft Vietnam DPE Team |WPF Bi m u: Tng quan v WPF

19

//to mi button button = new Button(); //xc nh thuc tnh cho button button.Content = "Hello World"; button.LayoutTransform = new ScaleTransform(3, 3); button.Margin = new System.Windows.Thickness(10); //thm phng thc x l s kin Click cho button button.Click += new RoutedEventHandler(button_Click); //a button vao Window this.Content = button;

to phng thc x l s kin Click cho button, chng ta ch thm lnh button.Click +=
v nhn Tab 2 ln. Code t sinh ra nh sau: void button_Click(object sender, RoutedEventArgs e) { // x l button khi ngi dng click }

Trong phng thc ny, ta thm vo dng lnh:

button.Content = "From Hanoi, Vietnam";//i ni dung (caption) ca button

Nhn F5 bin dch project v chy kt qu.

5.3

To ng dng Hello World bng XAML

WPF h tr trn nn tng XAML nn ta c th to i tng hon ton bng ngn ng XAML. Lu , vi cng project trn, mun vit c t bng XAML tng ng ta cn xa b phn m trnh C# c i, v C# v XAML khng th cng sinh mt i tng. Cch thc hin: M file Window1.xaml tng ng vi file code Window1.xaml.cs trn.

Thm on m c t XAML tng ng sau:

<Window x:Class="Helloworld.Window1" xmlns="http:://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schema.microsoft.com/winfx/2006/xaml" Title="Window1" Height="300" Width="300"> <Button Name="button" Margin="10"> <Button.LayoutTransform>

Microsoft Vietnam DPE Team |WPF Bi m u: Tng quan v WPF

20

<ScaleTransform </ScaleTransform>

ScaleX="3" ScaleY="3">

</Button.LayoutTransform> Hello World </Button> </Window>

Gi ta gn tn phng thc x l s kin Click cho nt bm ny:

F5 chy ng dng. Ta s thu c kt qu tng t nh phn 5.2.

Cu hi n tp
1. WPF l g?

WPF, vit tt ca Windows Presentation Foundation, l h thng API mi h tr vic xy dng giao din ho trn nn Windows. WPF tng cng kh nng lp trnh giao din ca lp trnh vin bng cch cung cp cc API cho php tch hp nhiu dch v trc quan trn cng mt ng dng: cc form, control, hnh nh 2 chiu, 3 chiu, vn bn c nh v thch nghi, in n, ha vector, hot ha, mc ni d liu, m thanh v video. Thm vo , cc ng dng WPF cn c kh nng trin khai nh mt chng trnh c lp hoc trn trnh duyt Web m khng phi thay i code giao din. S dng ngn ng markup XAML c bn cht XML, WPF to c s lm vic chung gia ngi thit k giao din v ngi lp trnh. L mt b phn ca .NET Framework 3.0, WPF sn c trong Windows Vista v Windows Server 2008. ng thi, WPF cng c th hot ng trn nn Windows XP Service Pack 2 hoc mi hn, v c Windows Server 2003.

Microsoft Vietnam DPE Team |WPF Bi m u: Tng quan v WPF

21

2.

Mc tiu c bn ca WPF l g? A. B. Cung cp mt nn tng thng nht xy dng giao din ngi dng. Cho php ngi lp trnh v ngi thit k giao din lm vic cng nhau

mt cch d dng. C. Cung cp mt cng ngh chung xy dng giao din ngi dng trn

c Windows v trnh duyt Web. D. Cu tr li: D 3. XAML l g? C ba mc tiu trn.

XAML, vit tt ca Extensible Application Markup Language, l ngn ng c t da trn XML c dng nh ngha cc i tng v thuc tnh ca chng, mi quan h cng nh s tng tc. XAML c bit c dng trong cc cng ngh ca .NET Framework 3.0 (trong c WPF) nh ngn ng c t giao din ngi dng (user interface - UI) nhm m t cu trc v c tnh ca cc phn t UI, s lin kt d liu, cc s kin v cc c tnh khc. XAML l m hnh c tnh t ph trong lnh vc tnh ton trn Internet c chp nhn rng ri trong nhiu h thng v bi nhiu nh cung cp phn mm. 4. Vai tr ca XAML trong vic to mi trng lm vic chung gia ngi thit

k giao din v ngi lp trnh. XAML ng vai tr mt ngn ng chung gia mi trng thit k giao din v mi trng lp trnh. i vi ngi thit k, XAML khng nhng cho php ngi thit k d dng m t, chnh sa cc i tng UI v cc c tnh ca chng, m cn cho php h tng tc vi cc i tng ny mc nht nh. Do vy, tng kh nng cm quan ca ngi thit k i vi giao din. Ngoi ra, n cng gip ngi thit k hn ch nhng tng ha khng kh thi khi lp trnh. i vi ngi lp trnh, nh mt mi trng lp trnh c kh nng t ng ti to giao din thit k da trn file c t bng XAML do ngi thit k chuyn sang, ngi lp trnh khng cn t mnh ti to li giao din. iu ny gim i nhiu cng sc v thi gian pht trin giao din, cng nh trnh nhng sai lch gia giao din do ngi thit k v giao din do ngi lp trnh ti to. V c mi trng thit k v lp trnh u c kh nng hiu v s dng XAML, ng dng WPF c th chuyn qua li gia hai mi trng pht trin sa i hay b sung giao din mt

Microsoft Vietnam DPE Team |WPF Bi m u: Tng quan v WPF

22

cch d dng. Vi tt c nhng li im ny, v th ca ngi thit k trong vic xy dng giao din c nng cao. 5. Trong ng dng WPF, phn giao din ngi dng c th c vit bng: A. B. C. Cu tr li: C 6. Trong ng dng WPF, vic x l cc s kin c th c vit bng: A. B. C. Cu tr li: B XAML M trnh (C# hoc Visual Basic) C A v B XAML M trnh (C# hoc Visual Basic) C A v B

Ti liu tham kho

1. Windows Presentation Foundation, URL: http://msdn.microsoft.com/enus/library/ms754130.aspx. 2. Introducing Windows Presentation Foundation, URL: http://msdn.microsoft.com/enus/library/aa663364.aspx. 3. WPF Architecture, URL: http://msdn.microsoft.com/en-us/library/ms750441.aspx. 4. WPF Tutorial, URL: http://dotnetslackers.com/articles/silverlight/WPFTutorial.aspx. 5. WPF Tutorials, URL: http://www.wpftutorial.net/.

Microsoft Vietnam DPE Team |WPF Bi m u: Tng quan v WPF

23