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 .
Microsoft Vietnam DPE Team |WPF Bi m u: Tng quan v WPF
2

- 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
3

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
PDF Windows
Forms/
GDI+
Windows
Media
Player
Direct3D WPF
Giao din
ha (form v cc
control)
x x
On-screen vn
bn
x x
Fixed-format
vn bn
x x
Hnh nh x x
Video v m
thanh
x x
ha 2 chiu x x
ha 3 chiu x x
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
4

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
5

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
6

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
7

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
8


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
9

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
phn khc c trong th vin lp ca .NET Framework.
Hnh 0.5. Cc thnh phn c bn ca WPF
Application Services
Deployment Services
Databinding
USER INTERFACE SERVICES
XAML
Accessibility
Property System
Input & Eventing
BASE SERVICES
DOCUMENT SERVICES
Packaging Services
XPS Documents
Animation
2D
3D
Audio Imaging
Text
Video Effects
Composition Engine
MEDIA INTEGRATION LAYER
Controls
Layout
W
i
n
d
o
w
s

P
r
e
s
e
n
t
a
t
i
o
n

F
o
u
n
d
a
t
i
o
n

X
P
S

V
i
e
w
e
r

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

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
11

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
lp mt nhm thuc tnh hin th ca d liu nh mu sc, phng thc cn l...
- Template cho control: s dng thnh phn ControlTemplate ca XAML
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
12


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 and Settings\All Users\Documents\My
Pictures\Ava.jpg" />
Microsoft Vietnam DPE Team |WPF Bi m u: Tng quan v WPF
13

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
14

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
15


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,
qua , d liu c th c hin th hay sa i.
2) m bo rng nhng thay i trn d liu t cc control c cp nht tr li
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
16


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
17

4.2 Microsoft Expression Design Cng c cho ngi thit
k
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
18

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
19


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
20

//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
21

<ScaleTransform ScaleX="3" ScaleY="3">
</ScaleTransform>
</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
22

2. Mc tiu c bn ca WPF l g?
A. Cung cp mt nn tng thng nht xy dng giao din ngi dng.
B. 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. C ba mc tiu trn.
Cu tr li: D
3. XAML l g?
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
23

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. XAML
B. M trnh (C# hoc Visual Basic)
C. C A v B
Cu tr li: C
6. Trong ng dng WPF, vic x l cc s kin c th c vit bng:
A. XAML
B. M trnh (C# hoc Visual Basic)
C. C A v B
Cu tr li: B
Ti liu tham kho
1. Windows Presentation Foundation, URL: http://msdn.microsoft.com/en-
us/library/ms754130.aspx.
2. Introducing Windows Presentation Foundation, URL: http://msdn.microsoft.com/en-
us/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/.