Gii thiu

Trong cc ng dng hin i, giao dng 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. Ngi s dng thng thch nhng phn mm c giao din trc quan, d s dng, d tng tc, t thao tc phc tp, c mt giao din ngi dng nh vy, vic tch hp hnh nh, m thanh, vn bn v cc thnh phn trc quan khch thnh mt th thng nht ng vai tr quan trng. V d mt giao din gm cc thnh phn nh sau: Hin th text v hnh nh ngi dng Hin th v cp nht lin tc hnh nh 2 chiu nh cc biu , trng thi Hin th hnh nh 3 chiu Trnh din video. C kh nng hot ng nh mt ng dng desktop. ng thi c th chy trn trnh duyt web c gii hn v phn quyn, cho php truy cp t xa qua internet.

Vi cng ngh trc 2006, ta s gp kh khn nu xy dng ng dng nh vy bi cc nguyn nhn: C nhiu cch khc nhau lm vic vi hnh nh, m thanh nhng s gp kh khn trong qu trnh pht trin v bo tr Thit k mt giao din nh vy i hi ngi thit k giao din chuyn nghip, bi v lp trnh vin n thun s khng c cc k nng cn thit. Vic cung cp mt giao din c th chy c nh mt ng dng desktop v ng thi chy c trn trnh duyt i hi phi xy dng hai phin bn c lp s dng hai cng ngh khc nhau.

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

WPF l g?
WPF, vit tt l Windows Presentation Foundation, l h thng API mi h tr vic xy dng giao din ho trn nn Windows. c xem l 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 phn ca .NET Framework 3.0, WPF sn c trong Windows Vista, Windows 7 v Windows Server 2008. WPF c 3 mc tiu c bn: Cung cp 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 Cung cp mt cng ngh chung xy dng giao din ngi dng trn c Windows v trnh duyt Web.

Bng so snh cc chc nng trong WPF 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 d dng hn. Ngoi vic hp nht nhiu tnh nng li vi nhau, WPF cn c u im l c th tn dng c sc mnh v phn cng ca cng ngh hin i ngy nay nh card ho. WPF da hon ton trn ho vector, cho php nng cao cht lng hnh nh trong ng dng hn ho bitmap. Vi tt c cc u im trn, WPF n gin ho cng vic lp trnh giao din. WPF gp phn lm gim chi ph cho vic xy dng v bo tr ng dng. V bng cch cho php tch hp a dng cch biu din thng tin trn giao din ngi dng, WPF cng gp phn nng cao cht lng sn phm.

XAML
WPF a ra ngn ng t t eXtensible Application Makeup Language (XAML). XAML nh ra cc phn t giao din nh button, label, textbox m t giao din ca ngi dng. Vic pht trin giao din c lp hon ton vi lp trnh chc nng nn ngi thit k v lp trnh c th lm vic vi nhau mt cch d dng. Ngi thit k c th dng cng c (nh Microsoft Expression Interactive Designer) to nhng giao din thng qua ngn ng XAML. V Microsoft Visual Studio c th d dng s dng nhng on m t giao din bng XAML v to giao din ngi dng mt cch chnh xc nh nhng g m t.

Cng ngh chung cho giao din trn Windows v trn trnh duyt.
Trong thi i internet ang pht trin mnh, cc ng dng chy trn trnh duyt ngy mt pht trin. nn ng dng c th chy trn trnh duyt web s m ra thm th trng ngi s dng. Tuy nhin, vi cng ngh truyn thng, ng dng desktop v ng dng trn trnh duyt web s dng cng ngh hon ton khc nhau. V th nu s dng cng ngh truyn thng, ta s phi thc hin 2 phin bn c lp s lm tn chi ph v thi gian cho vic thc hin. Vi WPF, lp trnh vin c th to ng dng trnh duyt XAML (XBAP) s dng WPF chy trn trnh duyt Web. Ngoi ra, cng on code ny c th c dng chy c lp trn Windows.

ng dng WPF chy c lp trn windows

ng dng nu trn khi chy trn trnh duyt Internet Explorer Vic cng mt giao din duy nht c th chy c trn c Windows v trnh duyt gip gim khi lng ln cng vic nu phi pht trin 2 giao din song song. Ngoi ra cn c li th v cng ngh, lp trnh vin ch cn c kin thc v WPF l c th s dng c 2 trng hp.

Cc thnh phn ca WPF

WPF t chc cc chc nng theo mt nhm namespace cng trc thuc System.Windows. L ng dng windows hay XBAP, mt ng dng WPF bao gi cng l mt tp cc trang XAML v phn code tng ng c vit bng c# hoc visual basic. Tt c cc ng dng u k tha t lp chun Application ca WPF 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.

Cc thnh phn c bn ca WPF

Layout v control
Layout ng dng WPF s dng panel sp t cc thnh phn khc nhau trn giao din. Mi panel c th cha cc thnh phn khc nh button, textbox v c panel khc. C cc loi panel: Stack Panel StackPanel l loi layout d s dng v hu ch trong WPF. N cha cc thnh phn con ca n theo hng dc hoc hng ngang theo tuz chn. Loi ny thch hp biu din cc phn t con theo dng danh sch. Cc control nh ComboBox, ListBox, hoc Menu u s dng Stack Panel
<StackPanel> <Button Margin="10">Stack Panel</Button> <Button Margin="10">Dock Panel</Button> <Button Margin="10">Wrap Panel</Button> <Button Margin="10">Canvas Panel</Button> <Button Margin="10">Grip Panel</Button> </StackPanel>

Stack Panel Dock Panel Dock Panel l loi layout sp xp cc phn t ca n bng theo cc hng Tri, Phi, Trn, Di ca Panel. xc nh hng cho phn t, ta s dng thuc tnh DockPanel.Dock.
<DockPanel> <Button DockPanel.Dock="Top"> Top Button 1</Button> <Button DockPanel.Dock="Top">Top Button 2</Button> <Button DockPanel.Dock="Bottom">Bottom Button</Button> <Button DockPanel.Dock="Right"> Right Button</Button> <Button DockPanel.Dock="Left">Left Button</Button> <Button > Center Button </Button> </DockPanel>

Dock Panel

Wrap Panel Wrap Panel sp xp cc phn t theo chiu t tri sang phi, nu cc phn t y khong khng gian cho php theo chiu ngang th Wrap Panel s t xp phn t tip theo xung u dng tip theo.
<WrapPanel> <Button>Button</Button> <Button>Button</Button> <Button>Button</Button> <Button>Button</Button> <Button>Button</Button> <Button>Button</Button> <Button>Button</Button> <Button>Button</Button> </WrapPanel>

Wrap Panel Canvas Panel Cavas Panel l loi Panel cn bn nht ca WPF. Mi phn t ca n s c xc nh v tr c nh bng to . To c xc nh bng cc gi tr ca cc thuc tnh Canvas.Left, Canvas.Right, Canvas.Top, Canvas.Bottom: Loi Panel ny thng c s dng gom nhm cc hnh nh 2D li vi nhau v khng hay s dng cho cc thnh phn giao din ngi dng. y l vn quan trng v khi gn to c nh s gy ra vn khi thay i kch thc ca ng dng.
<Canvas> <Ellipse Height="60" Width="60" Canvas.Top="20" Canvas.Left="20" Fill="Blue" Stroke="Black"></Ellipse> <Ellipse Height="60" Width="60" Canvas.Top="50" Canvas.Left="50" Fill="Green" Stroke="Black"></Ellipse> </Canvas>

Canvas Panel Grid Panel Grid cho php ta phn nh cc dng v ct theo dng mt li k , v sau s sp t cc phn t UI vo cc ty . Grid s t ng chia u cc dng v ct (da trn kch thc ca phn ni dung). Tuy nhin, ta c th s dng du sao (*) phn nh kch thc theo t l hoc phn nh gi tr tuyt i v chiu cao hoc chiu rng cho hng v ct. Ta c th nhn bit s khc bit ca 2 dng phn nh kch thc nu trn bng cch thay i kch thc ca form cha panel Grid. Thm vo , thuc tnh ShowGridLines c t bng True cho php hin th cc ng k .
<Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> <RowDefinition Height="28" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="200" /> </Grid.ColumnDefinitions> <Label Grid.Row="0" Grid.Column="0" Content="Name:"/> <Label Grid.Row="1" Grid.Column="0" Content="E-Mail:"/> <Label Grid.Row="2" Grid.Column="0" Content="Comment:"/> <TextBox Grid.Column="1" Grid.Row="0" Margin="3" /> <TextBox Grid.Column="1" Grid.Row="1" Margin="3" /> <TextBox Grid.Column="1" Grid.Row="2" Margin="3" /> <Button Grid.Column="1" Grid.Row="3" HorizontalAlignment="Right" MinWidth="80" Margin="3" Content="Send" /> </Grid>

Grid Panel Control L mt cng ngh giao din, WPF cung cp mt s lng ln cc control. 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.

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 MyStyle c th c nh ngha nh sau:
<Window.Resources> <Style x:Key="MyStyle" TargetType="Button"> <Setter Property="Background" Value="Orange"/> <Setter Property="FontStyle" Value="Italic" /> <Setter Property="Padding" Value="8,4" /> <Setter Property="Margin" Value="4" /> </Style> </Window.Resources>

s dng style c nh ngha, ta dng thuc tnh Style={StaticResource StyleName}. V d:

<WrapPanel> <Button Style="{StaticResource MyStyle}">Styles</Button> <Button Style="{StaticResource MyStyle}">Are</Button> <Button Style="{StaticResource MyStyle}">Cool</Button> </WrapPanel>

Kt qu ca on m trn Style c th thay i giao din ca control nh mu sc, kiu ch, Nhng li khng th thay i c hnh dng ca control nh nt bm thay v hnh ch nht i thnh hnh eclipse. lm c iu ta phi s dng Template. Template trong WPF cho php tuz chnh cc th hin ca cc control hay cc tp d liu mt cch linh hot hn. V d nh thay i hnh dng ca mt nt bm, hoc phc tp hn l c mt tp danh sch ngi dng v ta mun trnh by danh sch theo nh ngha ring ca ta nh hin th hnh nh k bn h v tn. C 2 dng template Data Template: c s dng nh ngha cch trnh bi ca mt tp d liu Control Template: c s dng nh ngha li hnh dng ca cc control.

Text
Chc nng hin th text cng c ch { hn WPF. WPF tch hp mt s lng ln cch trnh by cc k t (typographic) v chc nng text rendering m phin bn trc khng c c. V y cng l cng ngh lp trnh giao din Windows u tin s dng nh dng OpenType, n h tr cc font OpenType, TrueType, v OpenType CFF (Compact Font Format). WPF h tr nhiu chc nng trnh by font ch OpenType (Typographic): Small Caps Ligatures Old-style numerals Kerning

Ngoi ra WPF text engine cn tch hp tnh nng kim tra chnh t cho vn bn. N cn h tr cc tnh nng nh cch khong gi cc dng vn bn, canh l vn bn, cc hiu ng k t nh bng, t vin, lm m, xoay ch

Tm li, text trong WPF khng cn l nhng k t thng thng n gin m c WPF chm cht nng cao kh nng trnh by, chuyn ti c nhiu ni dung ca cc k t t hiu qu cao trong thit k giao din ngi dng.

Vn bn (Document)
WPF h tr 3 loi vn bn: vn bn c nh (fixed document), vn bn c th thay i (flow/adaptive) v vn bn XPS(XML paper specification). Ngoi ra WPF cn h tr to, xem, sa i, ng gi vn bn.

Media
WPF tch hp c mt h thng xy dng giao din ngi dng vi nhng phn t c bn nh nh vector hoc raster (bitmap), m thanh v video. WPF cng cung cp mt h thng hiu ng hot hnh v h thng render hnh nh 2D/3D WPF cung cp nhng hnh nh c bn cho ho 2 chiu cng vi mt b c v (Brush), vit (pen), hnh hc (geometry) v transform. ho 3 chiu trong WPF l b th vin y c cng cp bi Direct 3D. WPF h tr cc nh dng nh ph bin: BMP, JPEG, PNG, TIFF, Windows media photo, GIF v ICON. Mc nh, WPF h tr cc nh dng phim WMV, MPEG, v mt vi file AVI. Nhng t khi n c Windows Media Player chy ngm bn di, WPF c th s dng tt c cc codec c ci cho n.

Hnh nh
WPF s dng API ca Windows Imageing Component (WIC) cho php cc lp trnh vin c th thao tc vi cc nh dng nh khc nhau.

Hiu ng hot hnh

WPF h tr cc hiu ng hot hnh da trn thi gian thc, khc hn vi phng thc da trn tng khung nh mt. Cc hiu ng chuyn ng c th c gi bi cc s kin bn ngoi, bao gm cc cc hnh ng ca ngi dng.