Tìm hiểu công nghệ windows presentation foundation và xây dựng ứng dụng

V 6i kiSn truc Client - Server ph6 biSn hi~n nay, WPF la rn>tgiai phap rn6i, h~p d~n, nen dugc xern xet trong vi~c xay dVng giao di~n tuang tac nguai dung tren Client... Khong phai la WP

GIAo VlEN Hu'ONG DAN:

THS.NGUYEN PHUOC D~I

0511013 0511102

Nhan day chung em xin gui lai cam an dSn to~m thS b:;tnbe va nguai than dfiben c:;tnh chung em trong su6t thai gian qua £>~c bi~t chung em xin gui laicam an chan thanh nhfit dSn th~y Nguy~n Phuac £>:;ti,th~y dfi t?n tinh huangd~n va giai dap mQi th~c m~c giup chung em hiSu ro han vS dS an va chung

em xin cam an nhung lai gop y chan thanh cua th~y dfi giup chung em d~nd~n hoan thi~n dS an cua minh han

Ben c:;tnh do chung em cling khong quen gui lai cam an dSn t?P thS giangvien khoa CNTT cua truang Ngo:;tiNgu - Tin HQc TP.H6 Chi Minh dfi truySnd:;ttnhung kiSn thuc qui bau giup chung em co duQ'c mQt nSn tang dS buacvao dai va dfi t:;tomQi dSu ki~n t6t nhfit giup chung em hoan thclnh dS an th\Ict?P t6t nghi~p

Chung em xin chan thanh cam an

Nhom sinh vien thvc hien

Ly Ai BinhM:;tcThi H6ng £>ao

3.1.2 Ma hinh diSu huang (Navigation) trong WPF 46

Ml}C Ll}C 4

•

.•

3.5 1 Trans forms 783.5.2 Khac nhau gifra Rendertransform va Layouttransform 79

3.6.6 ThuQc tinh FILLBEHAVIOR va REPEATBEHAVIOR 95

3 6 9 I:'\';'uleu kh';:'len m9At A'nlma Iont' .99

pHAN 2: BAo cAo UNG Dl)NG QUAN LY UAT TIEC CVd! 104

Ml)C Ll)C 6

,

I

CWONG 6: GIAO DI$N UNG DlJNG QuAN LV DAT TIl;:C CVOI 142

Len GIro THItU

LaI GIOI THIEU•

M(>tling d\lng WPF co thS dugc triSn khai tren desktop ho~c tren 1 thiSt

bi thong qua trinh duy~t web Han thS nlia, no con h6 trg nhi~u control, thiSt

kS va phat triSn giao di~n than thi~n, tIVc quan ben ngoai cua chuangtrinh windows No hu6ng dSn sv hgp nh~t cua 1 ling d\lng dich V\l bao gbrn:giao di~n nguai dung, db h<;>a2D va 3D, cac van ban cd dinh va d(>ng,cac mohinh db h<;>anang cao, db h<;>avector, hinh anh d(>ng, Data Binding, Audio vaVideo

Microsoft Sliverlight la rn(>tn~n tang web cua WPF ho?t d(>ng nhu rn(>td?ng

Flash va cac ling d\lng mobiles v6i cac rno hinh chuang trinh tuang tv nhu la

1 ling d\lng NET Tinh nang 3D khong dugc h6 trg, tuy nhien XPS va ca sa

db h<;>avector da dugc tich hgp

V 6i kiSn truc Client - Server ph6 biSn hi~n nay, WPF la rn(>tgiai phap

rn6i, h~p d~n, nen dugc xern xet trong vi~c xay dVng giao di~n tuang tac

nguai dung tren Client

CHUaNG 1: TONG QUAN VE WPF

CHUONG 1: TONG QUAN VE WPF

1.1 WPF LA Gi ?WPF bao g6m rfrt nhiSu ph~n dugc n6i kSt v6i nhau Co th~ tra lai cho cauhoi nay nhu sau: WPF la m(>t API (giao di~n l?p triOO ling d1;1ng)dung chovi~c xay dVng giao di~n d6 hQa nguai dung (user interface - UI) cho cac lingd1;1ngtren may tiOOdesktop (d~ ban) tren nSn NET Framework

WPF la viSt t~t cua Window Presentation Foundation Tren ly thuySt, no lam(>tb(>cac assembly va cac cong C1;1h6 trg. No dung d~ cung cfrp m(>tb(>cacham API dung cho thiSt kS cac giao di~n nguai dung phlic t~p tren Windows

XP va Windows Vista

WPF kSt hgp nhiSu thli hi~u qua trong phat tri~n web nhu la style va m(>tngon ngfr daOOdfru dung d~ diOOnghia cac UI, cung v6i cac ling d1;1ngRichInternet Application OOula d6 hQa vector, animation (ho~t hiOO)va media (h6

trg am thanh va hiOOaOO).Trong WPF nhfrng khai ni~m nay dugc cling c6 vahgp nhfrt Nhfrng thli nay khong phai la tfrt ca so v6i qui mo cua WPF No cokhia c~oo khac nhu h6 trg d6 hQa 3D, in ~n cao c~p, va cac tai li~u tuang tvnhuPDF

CHUONG 1: TONG QUAN VE WPF 9

Nhu dff noi WPF la m(>tt~p hqp cac ham API hqp nhelt Chung ta co the lamnhi~u thu vai WPF Tuy nhien vi~c lam chung trong m(>ttrng d\1ng la qrc kikho Khong phai la WPF se cho phep chung ta nhom cac tinh nang khac nhaul?i, nhung no se cung celp cho chung ta cac API thich hqp de lam di~u do

Co the noi WPF chi la m(>tph~n nh6 cua m(>tbuc tranh Ian Ba thu vi~n b6sung sau day dugc cung celp nhu la m(>tph~n cua NET 3.0 Ca b6n thu vi~nd~u co cong c\1ng cung celp cac API thich hgp, hgp nhelt Them vao do, vi~ck~t hgp belt cu cai nao trong b6n thu vi~n tren trong m(>t ung d\1ng co themang l?i k~t qua reltelntugng

./ WCF (Window Communication Foundation): day la API dangian hoa telt ca cac tac V\1thong tin No g6m mQi thu tu web serviced~n di~u khi~n P2P va nhi~u thu khac

./ WF: m(>tthu vi~n m?nh me cho vi~c xay d\fng dong cong vi~ctrong cac ung d\1ng kha thi

./ CardSpace: cung celp m(>t h~ th6ng dinh danh ph6 bi~n dugcdung tren cac desktop application hay website

Ti~n than cua WPF la Windows Forms, d6 hQa API cua no cho phep phattrien tren n~n NET 2.0 va cli han Windows Forms thi cung celp S\f quan lytruy xuelt cac ham d6 hQa cua Windows API truy~n th6ng V~ Co' ban WPFkhong gi6ng nhu th~ no xay d\fng tren Co' sa DirectX DirectX API truac h~t

la diem h(>it\1 cua l~p trinh game va da phuang ti~n Chung ta co the lamnhi~u thu m(>tcach thu~n 19i rna di~u do khong the th\fC hi~n trong WindowsForms Co nghla la WPF se co th~ t~n d\1ng t6c d(>va kha nang ph~n cung.WPF cling co di~m tuang t\f nhu Windows Forms (va ca ASP.NET WebForms) Microsoft cung celp m(>tthu vi~n cac control Co' ban nhu textbox va

CHUaNG 1: TONG QUAN VE WPF 10

• button Chung ta cling co th~ b~t g~p OOUngdiOO nghla tuang t\f OOu data

binding va cac t~p tin code-behind

1.2 KIEN TRUe eVA WPF

.NET 3.0 Stack

KiSn truc cua WPF rna rQng cho ca 2 thaOO phftn Managed Code va NativeCode, tuy OOien, cac ham API thong dVng di~u d~t trong Managed Code.Trang khi do, phftn Ian cac (mg dVng WPF d~u la Managed Code, cac thanhphftn v~n haOOd~ d\fng len 1 ung dVng WPF la Native code No co ten la laptich hqp da phuang ti~n (Media Integration Layer: MIL) va duqc dong goitrang thu vi~n mi1core.dll Giao tiSp nay tuang tac tf\fC tiSp vai DirecX va cac

T5.t ca ung dVng WPF b~t dftu vai 2 lu6ng cong vi~c: mQt cho quan ly giaodi~n ngmJi dung (UI) va mQt lu6ng khac cho cac ung dVng n~n h6 trq d\fnghiOO va giao di~n D\IDg hinh va triOO bay l~i giao di~n duqc quan ly b~ngchinh WPF, khong cftn b5.t cu 1 can thi~p nao cua nguai phat tri~n T~p hqp

cac lu6ng UI la Dispatcher (thong qua 1 th\fc th~ cua DispatcherObject), vai

CHUaNG 1: TONG QUAN vi:WPF 11

thuQc tinh lien quan dSn nQi dung mai d~ dap l~i trng d\mg; nQi dung mai df!

dugc sinh ra ho~c m~t di trong mQtthread n€n

1.3 eAe TiNH NANG eVA WPF1.3.1 Declarative VI

WPF cho phep chung ta thiSt kS giao di~n b~ng cach sir d\lng mQt ngon ngudanh d~u g9i la XAML Chung ta df! tung lam vi~c vai HTML va XAMLcling co dirth nghia gin nhu tuong ttl. XAML la ngon ngu danh d~u da d~nghan HTML nhung it nh?P nh~ng han HTML Cac IDE nhu Visual Studio,Expression co kha nang sinh XAML tv dQng XAML con cung c~p mQtmoi truang ph6 biSn tuang tac vai cac designer

1.3.2 Intelligent LayoutVi~c s~p xSp cac component trong mQt ung d\lng tren man hinh co thS dtphuc t~p WPF cung c~p mQt h~ th6ng layout co thS rna rQng cho vi~c b6 tricac element Clla mQt VI No co thS mQt thay d6i kich thuac va tlJ di€u chinhmQt cach thong minh, ph\! thuQc vao cach rna chung ta dinh nghia layout.1.3.3 Scalable Graphics

D6 h9a trong WPF la d6 h9a vector, trai ngugc vai d6 h9a bitmap D6 h9avector v6n co kha nang thay d6i va d~c trung Clla no la doi hoi it khong gian

CHlfONG 1: TONG QUAN VE WPF 12

luu tru han mQt t~m anh d:,:mgbitmap WPF vftn co nhiSu h6 trg vai d6 h9a bitmap, nhung se tuy~t vai han khi xay dlfng giao di~n vai cac vector.

£>6 h9a vector da: tr6 nen r~t ph6 biSn tren web, do S\f ph6 biSn Clla AdobeFlash

KSt qua la phat tri~n ling dVng vai WPF se t?O ra cac trng dVng ~n tugng rnakhong c~n giam ch~t lugng hinh anh

1.3.4 Templates

Vai WPF chung ta co th~ d~ dang t?O cac element rna co th~ dung l?i chonhiSu VI clla chung tao Co hai lo?i template trong WPF: control templates vadata templates Control template cho phep chung ta dinh nghia l?i dang ve Cllacac control Ching h?n nSu chung ta mu6n ling dVng Clla chung ta co nhunglistbox vai nSn xanh va viSn do thi chung ta se dinh nghia l?i giao di~n Cllanhung listbox nay b~ng cach dung control template Va su dVng control

template cling se lam cho vi~c thiSt kS ling d\ll1gtr6 nen dS dang han.

Data template thi cling tuang t\1', nhung thay vi dinh nghia dang ve cho

control, data template dinh nghia cach rna mQt lo?i dfr li~u nao do dugc th~hi~n Thu hinh dung chung ta co mQt ling dVng noi dSn con nguai, chung tath~ hi~n mQt nguai nao do trong code thong qua cac instance Clla mQt lapPerson Chung ta se t?O mQt data template dinh nghia cach rna instance Cllalap Person se dugc th~ hi~n len tren VI Ching h?n nhu instance Clla mQtPerson thi co th~ th~ hi~n thanh mQt t~m danh thiSp vai anh, ten, s6 di~ntho?i NSu chung ta dung data template, khi rna mQt instance Clla lap Person

dugc "g~n" cho cac VI element, WPF se su dVng data template tuang ling.

CHlfONG 1: TONG QUAN VE WPF 13

1.3.6 Styling

WPF th~t S\1'toa sang khi no mang d~n cac cach thuc t?O ra nhung ung d\lngv6i giao di~n C\1'Cki ~n tuqng Chung ta co th~ lam OOi~uthu OOuthay d6imau n~n cua mQt textbox hay bao bQc mQt button b&ng mQt border v6i mQtki~u nao do cling OOumau s~c nao do Style trong WPF cling tuO'ng t\1'OOutrong CSS (Cascading Style Sheets) dung trong HTML WPF Style r~t dad?ng (richer) va r~t ra rang Chung bao g6m cac d~c tiOO"visual" (th~ hi~nra) rna chung ta mong dqi OOu la padding, margin, position, color, va nhi~uthu khac Nhung b?n cling co th~ dung cac style d~ khai bao OOungthuQc tiOO

"nonvisual" (~n)

Chung ta dS dang tai sir d\lng l?i cac style, va khi chung ta k~t hqp chung v6itemplate chung ta co th~ lam duqc OOi~uthu C\1'Cki ~n tuqng

1.3.7 Triggers

C:i template va style trong WPF d~u h6 trq khai ni~m trigger (kich ho?t) MQt

trigger cho phep chung ta "noi" v6i WPF "hay lam cai gi do" gi6ng OOuth~nay: "Khi tro chuQt duqc re len button, hay lam background cua button comau do" Noi cach khac, cac trigger cho phep chung ta di~u khi~n OOungthayd6i tr?ng thai Va chung th~t S\1'hfru d\lng trong vi~c kich ho?t cac animation

CHUONG 1: TONG QUAN VE WPF

1.3.9 3DWPF cho phep chung ta t~o nhung rna hinh 3D Co'bim va thiSt l?p animationcho chung WPF khang th?t s\1't~o ra nhung lIng d\lng 3D cao c~p, diSu rnaMicrosoft Tuy nhien, cac tinh nang 3D r~t dS dang tich hgp vao trong b~t ki

VI nao

1.4 LY DO sirDUNG WPF

WPF cling v6i cac thu vi~n cua no dugc xu~t bim cling v6i NET 3.0 la nhungySu t6 c6t loi va nhung ham API nh~t quan Chung th6ng nh~t nhiSu khaini~m l?p trinh va lam cho vi~c phat triSn nhung lIng d\lng phlIC t~p trO'nen dSdang han Tuy nhien, WPF khang phili la l\1'achQn hgp ly cho b~t ClI projectnao MQt s6 lIng d\lng tren desktop se dS dang dugc xay d\1'ngva bao tri trenWindows Forms Nhung chung ta se co nhiSu thu?n 19i khi lam vi~c v6iWPF B~t ClInguai l?p trinh Windows nao cling se hQc WPF vi cu6i cling thi

no cling se hoan toan thay thS Windows Forms

Chung ta cling dil diSm qua mQt s6 tinh nang cua WPF a ph~n tren va th?t rorang la WPF t~o ra r~t nhiSu thu?n 19i trong vi~c phat triSn lIng d\lng Ngoai

ra, mQt s6 truang hgp sau cling se cho th~y WPF th?t S\1't6a sang:

CHlJONG 1: TONG QUANvI!:WPF 15

•

•

~ Project cua chung ta d6i hoi phai cQng tac v6i cac designer (nguai thiStkS) SU d\mg XAML va nhfrng cong C\lh6 trg cua no co thS giup chung ta

thoat khoi r~c r6i nay Sau khi devoloper (nguai l~p trinh) va designer tra

nen quen thuQc v6i nhfrng cong C\ldo, nang xu~t cua nhom phat triSn lingd\lng se tang g~p bQi

~ Vng d\lng cua chung ta la mQt ling d\lng lien quan dSn media NSuchung ta c~n tich hgp video va audio vao trong ung d\lng, thi chung ta semu6n nghi dSn WPF

~ Ph~n cung dung cho ung d\lllg cua chung ta da: h6 trg DirectX 9 ho~chan WPF thi dugc dVng tren n~n DirectX va ling d\lng cua chung ta t~nd\lng dugc suc m:;\nhcua ph~n ct'rng

~ V ng d\lng cua chung ta c~n h6 trg vi~c in ~n cao c~p WPF co sv h6 trg

OpenType va nhi~u tinh nang khac rna khong co trong Windows Forms.1.5 NDifNG CONG CD DO TRO WPF

Chung ta co thS xay dVng t'rng d\lng WPF v6i Visual Studio 2005, tuy nhienchung ta c~n cai d~t them cac extention cua WPF( d6i v6i phien ban VisualStudio 2008 thi khong c~n)

SharpDevelop cling la mQt open-source IDE h6 trg xay dVng ung d\lng WPFtrong NET 3.0 Nhung no khong 16n, va no kho co thS so sanh v~ muc dQ h6

trg WPF v6i Visual Studio

Cong C\l chinh ySu thu hai dung cho vi~c t:;\o dVng ung d\lng WPF cuaMicrosoft la Expression Blend Blend t~p trung v~ thiSt kS giao di~n han lal~p trinh No lam vi~c v6i nhung t~p tin gi6ng nhu Visual Studio, vi v~ydesigner co thS su d\lng Blend va developer co thS dung Visual Studio va h<;>

co thS lam vi~c cung nhau tren cung mQt project Blend co thS so sanh v6i

CHlfONG 1: TONG QUANVE WPF 16

mQt IDE dfmh cho Adobe Flash B~n co thS tim th~y cac cong C\l ve,animation timelines, palette (bang mfm), va OOung tiOOnang ph\lc V\lthiSt kSkhac Du khong t~p trung vao Blend OOung OOfrngdeveloper cling nen lamquen va su d\lng thaOO th~o cong C\l nay Va no cling chiOO la mQt trongnhung san ph:1m d~u tien duqc viSt b~ng WPF

MQt san ph:1m cua hang thli ba la Aurora viSt boi Mobiform Software Nocung c~p mQt bQ cac tinh nang tuang tv OOuExpression Blend

Expression Design la mQt san ph:1m khac cua Microsoft No duqc dung dStiOO chiOO OOfrng nQi dung d6 hQa vector, tuang tv OOu Adobe Illustrator.Expression Design co thS duqc dung dS t~o logo, icon, v6i WPF No xu~tcac t~p tin d6 hQa tv dQng d~ng XAML, va co thS duqc kSt hqp tnJc tiSp vaotrong WPF Expression Design khac v6i Blend, Blend la cong C\l t~p trungtiOOtinh UI la chu ySu

NhiSu ling d\lng t~o dVng cac mo hiOO 2D, 3D ngay nay co thS co OOungplug-in xu~t kSt qua cua chung vao trong XAML Ch~ng h~n OOu: AdobeFireworks, Adobe Illustrator, Blender, Maya,

Ngoai ra, con co mQt cong C\lkhac cua hang Electric Rain dung dS chiOOsuanQi dung d6 hQa 3D la ZAM 3D No cling tuang tv OOu Swift 3D daOOchoFlash No kha d~ tiSp c~n han OOung cong C\l chiOOsua nQi dung 3D khac vanSu b~n yeu thich 3D thi khong thS bi>qua cong C\lhfru ich nay

MQt cong C\l chiOOsua rna XAML oo~ nhang khac v6i tioo nang preview coten la Kaxaml B~n co thS th:iy ling d\lng cua b~n thS hi~n OOuthS nao trongkhi b~n dang viSt rna cho XAML Khong gi6ng OOuchlic nang preview trongVisual Studio, Kazaml th~t sv la mQt cong C\l what-you-see-is-what-you-get(WYSIWYG)

CHUONG 1: TONG QUAN VE WPF

1.6 KHAI NIEM XAML

17

•

1.6.1 Xaml la gi ?XAML(Extensible Application Markup Language) la mQt ngon ngu duqcdung dS t~o dVng DI trong WPF No la ngon ngu danh dfiu co nSn tang laXML tuong tv nhu HTML XAML co kha nang ung d\lllg t6t trong vi~c dinhnghla Dr Th~m chi chung ta co thS trinh bay du li~u vai XAML, nhu la mQtmang cac chu6i hay cac instance cua object (d6i tU'qng).

XAML duqc su d\lng cho ca WPF va WF (Windows Workflow Foundation).XAML co thS duqc xem la mQt ngon ngu s~p xSp thu tv cac instance cua.NET object (button, panel, textbox ) thanh mQt dinh d~ng rna con nguai cothS dQc duqc

Du la Visual Studio 2008 cung cfip cQng C\l chinh sua WYSIWYG h6 trq t~o

va thao tac vai XAML, nhung b~n cling c~n chinh sua cac do~n rna XAMLmQt cach tfllc tiSp XAML co thS duqc bien dich ho~c thong dich ph\l thuQcvao cach rna no duqc su d\lng Trong vai truang hqp, ch~ng h~n nhu co rnaC# va VB trong XAML thi no chi ho~t dQng khi duqc bien dich Khi b~n t~omQt ung d\lng WPF vai Visual Studio, XAML dung trong t'rng d\lng duqcbien dich (compiled) thanh file thvc thi Tuy nhien, b~n co thS t~o t~p tin.xaml, diSu do co nghla la no co thS duqc thong dich (interpreted)

Duai day la mQt vi d\l vS mQt t~p tin XAML:

la khi b(;lndong k~t thuc ph~n tu Window vai the dong </Window> b(;lnse k~tthuc tai li~u va khong dugc co ph~n nao them vao phia sau.

XAML d\fa vao XML namespaces dS xac dinh y nghia cua cac ph~n tu Vi dvnhu ph~n tu g6c cua tai li~u XAML la Window nhung WPF c~n phai bi~tdinh d(;lngtuO'ng duO'ng cua no trong NET Co r~t nhiSu lap khong ro rang,ch~ng h(;lnnhu chung ta co 3 lap khac nhau ten la Control trong thu vi~n classcua NET 3.0 NET Framework co mQt h~ th6ng namespaces dS tranh S\fnh~m l~n MQt XML tieu chufin cling co mQt h~ th6ng namespaces vai mvcdich tuO'ng t\f Tai li~u XAML su dVng cac XML namespace dS thay m~t chocac NET namespace

ThuQc tinh xmlns la mQt thuQc tinh chuyen dung trong th~ giai XML no dung

dS dinh nghia cac namespace Vi dv tren cho ta th~y hai namespace rna ta seth~y trong m<;>itai li~u WPF XAML rna b~n t(;lOra la:

• http://schemas.microso ft.com/winfxl2006/xaml/presentation lanhan cua namespace cua WPF no chua d\fng t~t ca cac lap cua WPFbao g6m t~t ca cac control b(;lnsu d\lilg dS xay d\fng giao di~n dvi dVtren namespace nay dugc khai bao rna khong co ti~p d~u ngfr cua

namespace nen no tra thanh namespace m~c dinh cho toan bQ taili~u(document) Co nghia la m<;>iph~n tu se dSu dugc dua vaonamespace nay rna khong c~n b(;lnphai khai bao

CHUONG 1: TONG QUANVE WPF 19

namespace No bao g6m nhung d?c diSm co IQ'icua XAML cho phep

co thS tac dQng cach thilc rna document cua b~n duQ'c thS hi~n.Namespace nay duQ'c grm v6i tiSp dl1u ngu la x va b~n co thS sir d\lng

no b~ng cach them tiSp dl1ungu x tru6c ten cua cac phl1n tir (nhu la x:tenphl1ntu)

Nhu ta th~y thi ten cua cac namespace XML khong gi6ng v6i b~t ki mQtnamespace nao cua Net Co hai ly do dS cac nhung ngmJi t~o ra XAML ch<;mkiSu thiSt kS nay :

./ Cac XML namespace thucmg la cac URI (co thS hiSu la chu6idinh danh cac tai nguyen tren m~ng) Cac URI nay gi6ng nhu la mQtlien kSt dSn mQt trang web nao do nhung khong phai v~y Dinh d~ng

URI duQ'c su d\lng dS tranh truang hQ'P cac t6 chilc khac vo tinh t~o

mQt ngon ngu nSn XML khac v6i cung namespace B6i vi ten miSnschemas.microsoft.com la cua Microsoft va chi co Microsoft m6i sud\lng no trong ten namespace cua XML

./ M6i quan h~ giua XML namespace va NET namespace khongphai la m6i quan h~ mQt mQt b6i nhu v~y se t~o ra mQt S\f philc t~pdang kS.NSu nhu m6i namespace cua NET co dSu co mQt namespace

tuang ung ben XML thi b~n se phai khai bao cho dung namespace cho

t~t ca cac control rna b~n su d\lng DiSu do se t~o nen mQtS\f h6n dQn

Vi thS nen t~t ca namespace cua NET dSu duQ'c gom vao mQtnames pace cua XML No co thS lam duQ'c vi~c do vi t~t ca cacnamespace khac nhau cua Net dSu la mQt phl1n cua WPF va khong comQt lap nao co cung ten v6i nhau

CHlfONG 1: TONG QUANvI!: WPF 20

86i vai cac cong ngh~ thi~t k~ cli b;;lllkhong thS ll<lOtach ph~n thi~t k~ rakh6i ph~n rna dugc Trong tc1tca cac ling d\!ng truac day thi cac d6i tugngluon dugc diOOnghia b~ng rna Va khi b~n keo mQt control vao b~ m~t thi~tk~ thi Visual Studio se them ph~n rna tuang ling vao lap co lien quan Va di~u

do co nghia la ngmJi thi~t k~ khong co bc1tki mQt cong C\!nao dS co thS lamvi~t vai cac rna (ch~ng h~n OOurna C#) Cac OOathi~t k~ bUQcphai lc1yph~n

hQ mu6n thi~t k~ chuySn thaOOcac aOOOOiphan (bitmap) Cac aOOOOiphannay se dugc su d\!ng dS lam b~ m~t cho cac cua s6, nut, cling OOucac controlkhac Va vi~c lam do chi t6t cho cac giao di~n it thay d6i va no mang l~inhi~u bc1tti~n nhu :

~ M6i ph~n tu giao di~n(OOu la hinh n~n, nut) c~n phai co mQtbitmap rieng bi~t va no h~n ch~ kha nang lien k~t cac bit map cling OOu

su d\!ng cac hi~u ling OOukhu rang cua, d6 bong hay la lam cho trongsu6t

~ MQi ph~n tu cua giao di~n d~u dugc OOungvao thong qua nguail?p trinh vienen OOung nguai thi~t k~ khong thS nao di~u chiOOtheo y

hQ dugc

~ Cac anh bitmap khong thS thay d6i kich thuac rna khong lam anhhuang d~n chc1tlugng cua chung dugc 8i~u do co nghia la giao di~nph\! thuQc vao dQ phan giai va no khon thS dap ling cho cac man hinhmay vi tiOOIan va co dQphan giai cao

WPF da giai quy~t cac vc1nd~ tren b~ng XAML Khi thi~t k~ mQt chuangtrinh ph~n cua s6 rna b~n thi~t k~ khong dugc chuySn sang rna rna no dugcxSp thaOO mQt bQ OOung the XAML Khi b~n ch~y chuang triOOthi cac theXAML fillYse dugc dung dS phat sinh ra cac d6i tugng t~o nen giao di~n.XAML co cac qui t~c caban sau:

CHUaNG 1: TONG QUAN VE WPF 21

.: M6i ph~n tu cua Uti li~u XAML dSu dugc lien klh vai mQt laptuong ung cua NET Ten cua ph~n tu nay ph~tigi6ng vai ten cua lap vid\l OOu: the <Button> se chi cho WPF t~o mQt d6i tugng Button

.: Gi6ng OOut:1tca cac tai li~u XML khac , b~n co thS b6 1ph~n tuvaG ben trong mQ ph~n tu khac XAML cho phep b~n giai quy@t mQtcach mSm deo trong vi~c s~p x@pvi tri ch~ng h~n OOukhi b~n tim th:1ymQt ph~n tu nut n~m trong mQt ph~n til m~ng luai (grid) thi trong giaodi~n cua b~n ch~n ch~n phai co mQt grid chua mQt nut n~m ben trong

•: B~n co thS diOOthuQc tiOOcho m6i lap thong qua cac attributte.Tuy v~y a mQt vai vi tri thi attribute khong du m~OOdS co thS qwin lycong vi~c dugc Trong nhung truang hgp do tha ph:E su d\lng OOungthe nhung (nestes tag) vai cu phap d~t bi~t

1.6.2 eli phap eua Xaml

Nhu chung ta dfi dS c~p a ph~n truac, mQt element trong XAML la mQtinstance cua mQt object va cac thuQc tiOOcua element la thuQc tinh cua objecttuong ling

<Page x:Class="HelloWorld.Pagel"

xmlns=''http://schemas.microsoft com/winfx/2006/xaml/presentation"

xmlns:x=''http://schemas.microsoft.com/winfx/2006/xaml "

Title="Page 1">

<Grid> <Button x:Name="blueButton" Width=" 100"

Height="40" Background="Blue" Content="Click Me" />

</Grid>

</Page>

CHlfONG 1: TONG QUAN VE WPF 22

••

Root element trong vi d\l tren tuang lmg v6i instance cua object Page, d~y du

la System Windows.Controls.Page, OOung thll' khac thuQc namespaceSystem.Windows.Controls, tll'c la WPF control

Button element tuang lmg v6i instance cua classSystem.Windows.Controls.Button ThuQc tiOO cua Button element thS hi~ncho cac thuQc tiOOcua instance tuang ll'ng v6i object Button Va co mQt thuQctinh x:Name, khong gi6ng v6i v6i quy t~c cua thuQc tiOO.No khong phai lathuQc tinh cua d6i tuqng Button No la attribute (thuQc tiOO) rna cung cfrp svnh~n biSt duy OOfrtcho object daOOcho vi~c truy xufrt til cac do:;tn rna Cunggi6ng OOu b:;tn d~t mQt biSn (variable) v6i ten la blueButton R6i thiSt l~pthuQc tinh cho object thong qua biSn nay nhu sau:

Button blueButton = new ButtonO;

blueButton.Width = 100;

blueButton.Height =40;

blueButton.Content ="Click Me";

blueButton.Background =new SolidColorBrush(Colors.Blue);

Chung ta c~n chu y r~ng bfrt cll' XAML element nao cung dSu phai co mQt giatri duy OOfrtcua x:Name Gi6ng OOuXML vi~c gan gia tri cho thuQc tiOOdSuthong qua kiSu string (chu6i ki tV). Tuy OOienkhong phai thuQc tinh nao cuacac d6i tuqng trong NET dSu co kiSu la string ch~ng h:;tn OOu trong vi d\ltren thi gia tri cua thuQc tiOOHeight va Width dSu co kiSu la double Vi thS dSh6 trq cho vi~c da d:;tng kiSu cua cac thuQc tiOO XAML dva vaoTypeConverter (bQ chuySn d6i diOOd:;tng) cua NET

CHUONG 1: TONG QUANVE WPF 23

"

TypeConverter giup ta co th~ chuy~n d6i mQt ki~u dfr li~u NET nay sang mQtki~u dfr li~u NET khac BQ phan tich cu phap (Parser) cua XAML tim bQchuy~n d6i diOOd~ng theo 2 cach :

.: No xem xet khai bao cua thuQc tiOO va tim thuQc tiOOTypeConverter (NSu co thuQc tiOOcua TypeConverter thi no se chi ralap nao se thlJc hi~n vi~c chuy~n d6i) Vi d\l OOukhi su d\lng mQt thuQctiOO OOu la thuQc tiOO Foreground thi NET se ki~m tra khai bao cuathuQc tinh Foreground

•: N Su OOu khong co thuQc tiOO TypeConverter trong khhao baocua thuQc tiOOthi XAML Parser se ki~m tra khai bao cua lap cua ki~udfr li~u tuO'ng ling Ch~ng h~n OOuthuQc tiOOForeground su d\lng d6ituqng Brush Lap Brush su dung BrushConverter vi lap Brush duqcg~n vai khai bao thuQc tiOO la TypeConverter(typeo f(BrushConverter))

NSu khong co SlJkSt hqp vai bQ chuy~n d6i diOOd~ng tren khai bao cua thuQctiOOho~c khai bao biSn qua triOObien dich se bi l6i

Tuy OOien, bQ chuy~n d6i diOO d~ng khong phai la luon co ich trong mQiho~m canh Ch~ng h~n OOu co mQt vai thuQc tiOO co tu cach OOu la mQt d6ituqng va no co mQt bQ cac thuQc tinh con M~c du chung ta co th~ t~o ra mQtchu6i d~i di~n d~ bQ chuy~n d6i co th~ su d\lng nhung cu phap cua no se rfttkho d~ su d\lng va thuang dS bi sai

Do do, XAML dfi cung cftp mQt chQn llJa khac : cu phap property-element.Vai cu phap property-element, b~n them mQt phc1ntu vo vai ten co d~ng laTenCha.TenThuocTiOO Vi d\l OOu mQt Grid co thuQc tioo Background nocho phep b~n co th~ su d\lng CQve d~ co th~ to mau control nay NSu b~n

-

mu6n S11 d\lilg m(>tc9 ve phuc t?P m(>tthu tien tiSn han so vai t6 mau d~c b?n se c~n phai them m(>tthe con co ten la Grid.Background nhu vi d\l sau :

<GradientStop Offset="0.50" Color="Indigo" />

<GradientStop Offset=" 1.00" Color="Violet" />

</LinearGradientBrush GradientS tops>

</LinearGradientBrush> </Grid.Background> , </Grid>

Va day la kSt qua:

CHUaNG 1: TONG QUAN VE WPF 25

6 vi d\l tren ta co th~ th~y la Background cua Gird se dugc to mau b~ng m9t

LinearGradientBrush brush =new LinearGradientBrushO;

GradientStop gradientStop 1=new GradientStopO;

brush GradientStops Add(gradientS top2);

GradientStop gradientStop3 =new GradientStopO;

gradientStop3 Offset = 1;

gradientStop3.Color = Colors.Violet;

brush GradientS tops.Add(gradientStop3);

grid Background =brush;

1.6.3 Content Property

Co r~t nhiSu control cua WPF rna b/;ln g~p co thu9c tinh Content Content lam9t thu9c tinh d~c bi~t Nhu trong vi d\l a ph~n tren chung ta da d~t thu9c

CHUaNG 1: TONG QUAN VE WPF 26

tinh Content cho Button la chu6i "Click me" Tuy nhien, b~n cling co thS sud\mg element con cho no:

<Button Content="C1ick Me" />

<Button>C1ick Me</Button>

Ca hai button nay d~u hiSn thi nhu nhau trong WPF Thu vi han khi chung tanoi dSn kiSu dfr 1i~ucua Content Th~t S\I thi chung ta co thS d~t Content cuamQt button nhi~u han mQt chu6i string dan gian, ch~ng h~n nhu chung ta vemQt vang tran ben trong button:

no cho phep chung ta xu 1ycac truang hgp phuc t~p nay

CHUONG 1: TONG QUAN VE WPF 27

Gia Slr chung ta mu6n d~t mau nSn cho cac button trong ung d\Ing WPF.Chung ta co thS thiSt l~p thu(>c tinh Background cho m6i button v6i cling m(>tmau, nhung chuy~n nay se khiSn chung ta mfrt nhiSu cong suc khi mu6n thaym(>t mau khac V 6i WPF, chung ta co thS Ill'll trfr mau trong resource (tainguyen) cua ung d\lng Khi do chung ta co thS d~t mau nSn til nhfrng mau rnachung ta da: luu trfr trong resource NSu chung ta mu6n thay d6i mau, chung tachi lam diSu do 6 m(>t ch6 Va dS lam dUQ"cdiSu nay chung ta phai Slr d\lngMarkup extension

<Button Background=" {StaticResource ResourceKey=myColor} "

Content="Click Me" />

Markup extension dUQ"cnh~n biSt b~ng c~p dfru ngo~c nh<;m ({}) Trong c~pngo~c nh<;m se co m(>t thong tin bao cho WPF biSt lO'iliresource rna chung taSlr d\lng Ten cua resource 6 day la StaticResource, va chung ta cung cfrp m(>tgia tri myColor cho parameter ResourceKey Cac extension co m(>t parameterm~c dinh B'iln khong c~n tham chiSu d~y du dSn parameter m~c dinh N ghla

la b'iln co thS b6 qua ph~n ten parameter va dfru b~ng gi6ng nhu thS nay:

<Button Background=" {StaticResource myColor} "

Content="Click Me" />

Nhu v~y ResourceKey la parameter m~c dinh cua StaticResource Trong m(>ts6 twang hQ"p chung ta se co nhiSu han m(>t parameter, dan gian chi vi~cngan cach chung b~ng dfru ph~y nhu m~u sau:

{ExtensionName Paraml=Valuel, Param2=Value2, Param3=Value3}

B'iln cling c~n chu y la chung ta se khong Slr d\lng dfru nhay kep cho gia tri cuacac parameter, va cling co nghla la gia tri cua parameter khong dUQ"cchuakhoang tr~ng

CHUONG 1: TONG QUANVE WPF 28

Co dt nhiSu extension duQ'c xay dVng cho WPF, va no cling co th~ duQ'c t?O

ra boi chinh b?n Duai day la mQt s6 extension ph6 biSn trong WPF:

Binding extention nay dung cho data binding

StaticResource dung d~ truy xu~t dfr li~u til resource cua ung

dVng Static resource se khong duQ'c thay d6itrong khi trng dVng dang ch?y

DynamicResource tuang tv nhu StaticResource nhung dfr li~u co

th~ thay d6i khi ung dVng dang ch?y

x:Null dung d~ d?t ta mQt gia tri Null trong WPF

x:Type dung d~ h6 trQ'lap System Type

x:Array cho phep b?n dinh nghia mQt mang cac object

trongXAML

CHUONG 2: LAYOUT VA cAc CONTROL 29

va TextBox thanh m(>tform nh~p li~u d~c trung Trong m(>ttruang hgp khac,b?n co thS dung DockPanel dS "dock" Menu cua ling d\lng tren vi tri "top"cua clra s6 ling d\lng va dS ph~n con l?i cua clra s6 cho cac control khac cualing d\lng M(>tt~p hgp cac class khac co lien quan dSn panel xullt phat til lapDecorator co ban va no dap ilng m(>ts6 ngu c~u ph6 biSn xung quanh vlln dSt?O dVng VI Decorator ph6 biSn nhllt la Border, m(>t duang viSn bao xungquanh control

2.1.2 FrameworkElement

H~u hSt tllt ca cac WPF element rna b?n su d\lng dS dvng VI dugc Illy til class

co ban System.Windows.FrameworkElement va kS thila vai thu(>c tinh co lienquan dSn layout Nhfrng thu(>c tinh nay giup tinh chinh cach rna cac elementdugc s~p d~t cung vai element cha cua no

CHtrONG 2: LAYOUT vA cAc CONTROL

2.2 THuOe TiNH MARGIN, PADDING vA ALIGNMENT

Conlent

Bordar~

30

Margin Padding, Alignment la cac khai ni~m kha quen thuQc vai b(;lnn~u nhub(;lndff tung lam vi~c vai CSS Trong WPF, chung cling co c6ng d\lng tuangt\1'.Margin - hi~n di~n trong cac lap FrameworkElement, hiSn thi mQt khoangtr6ng xung quanh element DiSu nay cho th~y se co mQt kh6ng gian nh~t dinhgifra cac element k~ c~n

Padding thi l(;lico tac d\lng khac, no cho phep cac control d~c ta mQt khoangkh6ng gian ben trong control, nghia la se co mQt ph~n kh6ng gian tr6ng ngancach ph~n nQi dung cua control va duang vien bao quanh control

CHUONG 2: LAYOUT VA cAc CONTROL 31

6 day thuQc tinh Margin (vai Padding cling tuang t\1")dugc gan gia tri b~ngb6n s6 th~ hi~n kich thuac cua margin theo thll' t\1'Left Top Right Bottom.Chung ta cling co th~ dung d:1uph:1ykhi gia tri co ki~u double:

<Button Margin=H20,5.75,40,75H />

Khai ni~m Alignment thi dan gian han nhi~u, no chi la cach b6 tri vi tri cuaelement v~ ben trai, phai, giua, "gHin toan khung" (Left, Right, Center,Stretch) d6i vai Alignment ngang, hay tren, duai, "gian toan khung" (Top,Bottom, Center, Stretch) d6i vai Alignment dung ben trong mQt containerchua element do

StackPanel tra len r:1t hi~u qua khi b~n c~n s~p d~t mQt danh sach cac

element Dli la mQt phuang an dan gian, StackPanel cung c:1p nhi~u cach n6ikSt da d~ng khi su d\1ng thuQc tinh Orientation cua no kSt hgp vai thuQc tinhAlignment va Margin cua cac element con

CHUONG 2: LAYOUT vA cAc CONTROL

<ComboBox Margin="3 "I>

<Button Margin="3,5n>Search</Button>

<CheckBox Margin=n3 ">Search in titles only<ICheckBox>

<CheckBox Margin=n3 ">Match related words<ICheckBox>

<CheckBox Margin=n3 n>Search in previous results<ICheckBox>

fElSearch in titles only

IE]Match related wOlds

rJSearch il"l previous results

[lHighnght search hitS (in topicS)

search hits (in

2.4 DOCKP ANEL

WPF cung c~p cho l~p trinh vien mQt tinh nang vS layout mi;lnh me duQ'c th~hi~n trong DockPanel Control nay co kha nang g~n cac element con cua novao b~t Cll' viSn nao trong b6n viSn cua no va thuang duQ'c dung cho layoutg6c cua VI

Attached Properties la cac thuQc tinh dinh kern cua cac control nh~m d~c tacac thong tin b6 sung vS layout eua chung, rna duQ'c s~p d~t v6i panel rna

CHUONG 2: LAYOUT VA cAc CONTROL 33

chung thuQc v~ Vi d\l mQt VI co d~ng nhu hinh ben du6i, mQt ung d\lngpreview cac font dugc cai d?t trong Windows, danh sach cac font phai dugcd?t dQc theo l~ trai D~ DockPanel lam dugc di~u nay chung ta cAn sir d\lngmQt attached property, la DockPanel.Dock Attached property chi dan gian lacach thuc dua thong tin be, sung van trong element Trong ung d\lng minh hQaFont Viewer, DockPanel khai bao mQt thuQc tinh Dock rna co th~ dugc g~ncho b~t ki element con nao Khi DockPanel s~p d?t cac control con cua no, no

se dQc thong tin nay va dung no d~ s~p d?t thanh mQt giao di~n hgp ly.Attached property luon co d~ng Source.Property, Source chinh la class rnakhai bao d~ sir d\lng thuQc tinh va Property la ten cua thuQc tinh cAnthiSt l~p

<DockPanel>

<Button DockPanel.Dock="Top">Top</Button>

<Button DockPanel.Dock="Bottom"> Bottom</Button>

<Button DockPanel.Dock="Left"> Left</Button>

<Button DockPanel.Dock="Right"> Right</B utton>

<Button> Fill</Button>

</DockPanel>

Va day la kSt qua

USimp!e DodcPanel

CHUONG 2: LAYOUT vA cAc CONTROL 34

DockPanel la mQt tinh nang m~nh me trong vi~c t~o dVng UI No phuc t~phan StackPanel, nhung co thS noi ca chS dVng layout cua no "thong minh"han MQt s6 16n cac cach s~p d?t control co thS dm;rc diSu khiSn b6iDockPanel va StackPanel Tuy nhien nSu b~n khong hoan toan hai long v6inhfrng gi b~n mu6n gi co thS Grid se dap ilng mong dQ'icua b~n

2.5 GRID.

Grid la mQt layout panel co nhiSu cong d\lilg No co thS t~o duQ'c cac kSt qua

6 ph~n tru6c va con nhiSu han thS nfra Tuy nhien cai gia phai tra la se co d.t

nhiSu attached property duQ'c b6 sung trong XAML

<Grid ShowGridLines="True"

TextB lock.F ontSize="20 ">

<Grid Row Definitions>

CHUONG 2: LAYOUT VA cAc CONTROL

Trong vi d\l tren chung ta da t:;tomQt child control dan trai tren nhiSu dong

va cQt su d\lng thuQc tinh RowSpan Vai nhung attached property nay khanang d\fng layout cua Grid g~n nhu vo h:;tn.Chung ta con dung mQt controld~c bi~t g<)ila GridSplitter cho phep nguai dung thay d6i kich thuac dong

va cQt trong khi ung d\lng dang ch:;ty B:;tnphai d~t control nay trong mQt

CHUONG 2: LAYOUT VA cAc CONTROL 37

Grid, gifra cac dong va cac cQt rna b:;lll mu6n co kha nang thay d6i kichthuac Dung thuQc tinh ResizeDirection dS chi ra control nao se chiu anhhuang thay d6i kich thuac va dung thuQc tinh ResizeBehavior dS khai baocach splitter tac dQng vai cac dong/cQt cua ban than no

2.6 WRAPP ANEL

WrapPanel it dugc dung nhu StackPanel, DockPanel va Grid nhung no cling

co 19i ich nh~t dinh WarpPanel cling gi6ng nhu StackPanel nhung no co khanang "warp" cac element kS tiSp tren cung mQt hang nSu nhu khong con duch6 tr6ng

<Button> Seven</B utton>

<Button> Eight</B utton>

</WrapPanel>

Va day la kSt qua:

CHUONG 2: LAYOUT VA cAc CONTROL

se dugc ve len phia tren, OOUngcontrol co ZIndex Ian han se n~m phia tren sovai control co ZIndex 006 han N@ukhong co ZIndex cac control se din cuvao thu t\1'no dugc them vao trong t~p hgp cac element con cua panel

<Canvas Width="200" Height="200" Background="LightBlue">

<Button Canvas.Left="50" Canvas.Top="125" Panel.Zlndex="lOO"

Width="lOO" Height="35" />

<Button Canvas.Right="25" Height="200" Width="35" />

<Button Canvas.Bottom=" 5" Height="20" Width="75" />

</Canvas>

Va day la k@tqua:

2.8 cAc CONTROL co BAN

2.8.1 Lam viec VOl text

CHlfONG 2: LAYOUT vA cAc CONTROL 39

a

Trong WPF cac control la cac phfln ill rna b:;lllthuang su d\lng dS xay dVng

nen layout Clla minh Cac control cho phep ung d\lng Clla b9-n tra nen s6ng

dQng va cung c~p nhUng diSm giao tiSp dQng voi nguai dung Chung ta secung nhau nghien Clru cac cac thuc su d\lng cac control quan tn;mg Clla WPF

dS cho ta co kinh nghi~m v@sv tuang tac giua chung.

Hflu hSt cac control dugc d@c~p ChllySu la dugc thila kS til mQt lap n@nthongd\lng do la lap Control Lop n@nnay co ngu6n g6c til Framework-Element vadugc them vao nhi@uphfln b6 sung cling nhu cac tinh nang quan tn;mg Trong

cac tinh nang quan tn;mg la cac thuQc tinh ca bim dS co thS dinh nghia mau

Clla control, duang vi@n, kiSu chfr va kha nang tiSp c~n cac d~c tinh cllacontrol T~t ca cac control d@uco them mQt s6 event chuQt va co thS su d\lngkhuon m~u

Trong WPF ta co nhi@uIva ch<;md@co su d\lng cho vi~c hiSn thi van ban 6

day chung ta se nghien CUllv@hai Iva ch<.mthong d\lng nh~t dS hiSn thi mQtmQt d09-n van ban cho nguai dung do la TextBlock va Label, cling nhuTextBox - mQt control dan thong d\lng cho vi~c nh~n van ban dua vao Cllanguai dung

TextBlock dugc thiSt kS d~c bi~t cho m\lc dich hiSn thi cac d09-nrich text cho_n_g_uaisu_g\l!!g.l-Jo la lva_chQn_hoan hao-cho -vi~c -hiSn thi cac chi- d~n clingnhu t6ng kSt thong tin

TextBlock dugc su d\lng nhu trong vi d\l sau :

<TextBlock FontSize="14" TextWrapping="Wrap">

Select a font to view from the list below

You can change the text by typing in the region at the bottom

</TextB lock>