WPF-Lesson 1 - Layout

8/7/2019 WPF-Lesson 1 - Layout

1/16

Microsoft Vietnam DPE Team | WPFBi 1:B tr giao din trong ng dng WPF 1

Bi 1

B TR GIAO DIN TRONG NG DNG WPF

Bi ny gii thiu cch thc b tr giao din trong ng dng WPF . Phn us gii thiu v cc

dngpanel, mt s i mi trong phng thc b tr giao din cang dng WPF so vi MFC, VB Forms

hay ngay c Windows Forms nhm tng tnh linh hot. Sau , cc dng panel thng dng cng vi c tnh

ca chng s c trnh by thng qua cc v d n gin.

1 Gii thiu chungNh gii thiu trong bi m u, WPF s dng cc dng panelkhc nhau b tr cc

phn t trn giao din ngi dng. iu ny xut pht t tng kt hp cng ngh giao din mnh

nh Windows Forms, vi cc k thut sp t (layout) ca trnh duyt nhm nng cao tnh linh hot

trong vic b tr cc phn t trn giao din.

Cc cng ngh xy dng giao din nh VB6 form, Access formsda trn nguyn tc b

tr theo v tr tuyt i. Ngha l, ngi lp trnh phi xc nh gi tr ta gc trn bn tri ca

mt control (so vi vi gc trn bn tri ca mt form) khi mun t n ln form. iu ny cho

php lp trnh vin iu khin v tr ca control kh d dng, nhng li thng i hi mt lng

ln m trnh khi cn thay i kch thc form. y l phng php tip cn theo hng p t

(imperative), trong my tnh c ch r phi lm nhng bc g, khi no v theo trnh t no .

Vi cch thc b tr ny, cc iu khin nh Label hay Panel khng t ng ko gin ph hp

vi kch thc phn ni dung cha trong n. V nh vy, nu phn ni dung ca mt Label ln hn

vng c th hin th ca Label , th ni dung ny s b ct i hoc b che lp.

Trong khi , cc phn t giao din Web trn trnh duyt c sp xp theo phng thckhai bo (declarative), trong , ngi lp trnh ch a ranhng th cn lm, cn my tnhs gii

quyt vn lm nh th no. Vi phng thc ny, giao din trn trnh duytkhng i hi m

trnh thay i kch thc cc vng cha (containner). HTML cho php ta nh ra mt chui cc

vng cha, v d nh cc phn t , , v , b tr cc phn t UI khctrong

mt cch linh ng bn phi hoc bn tri mt i tng; hay cng c th sp xp chng theo v tr


2/16


tuyt i trn trang Web. Cc phn t nh quan tm ti kch thc bn trong ni dung ca n

v s t nggin ra cha ni dung bn trong.

Tuy nhin, c hai cch tip cn nu trn u kh c th t c cch b tr nh , mc d

cch b tr trn trnh duyt c gim lng code x l. Hin nay, Windows Forms athm nhngkhi nim nhDocking (cpbn) hayAnchoring(bung neo), b sung mt cch tip cn kiu khai

bo linh hot hn pht trin cc ng dng trn my trm. WPF tip bc xu hng ny vi vic

b tr giao din da trn khi nim vpanel.

Phn ln cc phn t UI trong ng dng WPF ch cth cha duy nht mt phn t con.

Chng hn, on m XAML sau s mc li bin dch sau: The 'Button' object already has a child

and cannot add 'CheckBox'. 'Button' can accept only one child." Ngha l, i tng nt bm

Button cha mt phn t con (c th l i tng TextBlock) v do , khng th thm vo

mt i tng CheckBoxhay ComboBoxna.

on m XAML sau ykhng bin dch c

Cho mng bn n vi bi 1 - Gii thiu v WPF Layout

nt bm ny c th cha 3phn t con bn trong n, WPF s dng panel. C nhiu dng panel

khc nhau trong WPF v mi dng cho php mt kiu b tr giao din khc nhau. Cc panel c th lng vo

nhau cho php b tr cc phn t trn giao din nhng dng sp xp bt k. V d, sa vn nu ra v

d trn, ta c th lng mt StackPanel bn trong nt bm, v b tr cc phn t con bn trong panel .

on m XAML sau y cho php 1 nt bm cha c text, checkbox v combobox


3/16


Cho mng bn n vi bi 1 - Gii thiu v WPF Layout

Kt qu bin dch s l:

Hnh 1.1Kt qu sa i on m XAML hin th hn mt phn t giao din con

trong mt nt bm s dng StackPanel

2 Cc dng Panel thng dng bn c thy c vai tr quan trng ca panel trong vic b tr giao din, phn sau y sln

ltgii thiu nhng dng panel thng dng v cc c tnh ca chng thng qua cc v d n gin.

2.1 StackPanelStackPanelb trcc phn t con nm trong n bng cch sp xp chng theo th t trc

sau. Cc phn t s xut hin theo th t m chng c khai bo trong file XAML theo chiu dc

(ngm nh) hoctheo chiu ngang.

2.1.1 Sp xp theo chiu dc

Sau y l on m XAML minh ha vic sp xp cc phn t UI trong mt i tng

Windowbng StackPanel theo chiu dc:


4/16


Control 1

Control 2

Control 3

Kt qu l:

Hnh 1.2Sp xp nhiu control theo th t k tip trnxung di s dng StackPanel


5/16


Trong trng hp sp xp theo chiu dc, nu tng chiu cao ca cc phn t con ln hn chiu cao

ca form cha, th cc phn t nm ngoi form s khng c nhn thy.

2.1.2 Sp xp theo chiu ngang

Sau y l on m XAML minh ha vic s dng StackPanel sp xp cc phn t UI

cng v d trn theo chiu ngang. im khc bit duy nht y l thit lp thm thuc tnh

Orientation="Horizontal" ca i tng StackPanel c s dng.

Control 1

Control 2

Control 3

V kt qu s l:

Hnh 1.3Sp xp nhiu control theo th tk tip tri sangphis dng StackPanel


6/16


Trong trng hp sp xp theo chiu ngang, nu tng chiu rngca cc phn t con ln hn chiu

rngca form cha, th cc phn t nm ngoi form s khng c nhn thy.

2.2 WrapPanelWrapPanelcho php sp xp cc phn t t tri sang phi. Khi mt dng phn t in

y khong khng gian cho php theo chiu ngang, WrapPanel s cun phn t tip theo xung u

dng tip theo (tng t nh vic cun text).

Di y l mt v d n gin v vic s dng WrapPanel:

Ch co co nh, ngi trong m c

Control 2

Control 3

Do chiu di tng cng ca 3 control ln hn chiu di ca Window, ng thi, chiu di

ca 2 control u (TextBlock v Button) nh hn chiu di Window, WrapPanel s xp TextBlock

cui cng xung hng di. Kt qu l:


7/16


Hnh 1.4S dng WrapPanel

2.3 DockPanelDockPanel cho php cc phn t bm ln cc cnh ca panel DockPanel bao cha chng,

tng t nh khi nim Docking trong Windows Forms. Nu nh c nhiu phn t cng bm v

mt cnh, chng s tuntheo th t m chng c khai bo trong file XAML.Sau yl on m

XAML minh ha vic s dng DockPanel:

Control 1

Control 2

Control 3

Control 4

Control 5

Phn t Border cui cng s in vo phn khng gian cn li v thuc tnh DockPanel.Dock

khng xc nh. Kt qu l:


8/16


Hnh 1.5S dng DockPanelControl 1 bm vo cnh trn DockPanel,

Control 2 v 4 nm bn phi, Control 3 nm di y; Control 5 chim ton b khng gian cn

li.

2.4 CanvasPanel dng Canvass dng phng thc sp xp cc phn t UI theo v tr tuyt i bng

cch t thuc tnh Top (nh) v Left (bn tri) ca chng. Thm vo , thay v t thuc tnh

Top, Left, ta c th t thuctnh Bottom (y), Right (bn phi). Nu ta t ng thi thuc tnh

Left v Right, thuc tnh Right s b b qua. Phn t UI s khng thay i kch thc tha mn 2

thuc tnh trn cng mt lc. Tng t thuc tnh Top s c u tin hn thuc tnh B ottom. Ccphn t c khai bo sm hn trong file XAML s c th b che khut pha di cc phn t c

khai bo mun hn nu v tr ca chng xp chng ln nhau.

Sau y l mt v d minh ha vic s dng Canvas sp xp cc phn t UI.

Ch co co nh, xanh nh ht

Control 2


9/16


Control 3

V tr ca phn t TextBlock u tin v phn t Border c t theo thuc tnh Top, Left,

trong khi , phn t Button c sp v tr theo thuc tnh Bottom, Right. Border s nm chng ln

TextBlock u tin v c s xp chng v v tr ca hai phn t ny. Thm vo , TextBlock u

c khai bo trc Border trong on m XAML. Kt qu l:

Hnh 1.6S dng Canvas sp xp cc phn tUI

2.5 Grid

Panel dng Gridl dng panel ht sc linh hot, v c th s dng t c gn nh ttc kh nng m cc dng panel khc c th lm c, mc d mc kh d khng ging nhau.

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 . Sau y l

mt v d minh ha v vic s dng Grid vi hai dng phn nh:


10/16


Ch co co nh

Control 2

Control 3

Sau y l kt qu:


11/16


a) Trng thi khi to b) Sau khi thay i kch thc form

cha Grid

Hnh 1.7S dng Grid sp xp cc phn t UI Khi kch thc form cha Grid thay

i, chiu cao ca hng 1 lun c nh (25pixel), trong khi , chiu cao ca hng 2 lun gp i

hng 1; chiu rng ca ct 0 lun gp i chiu rng ca ct 1.


12/16


Cu hi n tp

1. ng dng WPF s dng cch tip cn no b tr cc phn t trn giaodin ngi dng?

A. Phng thc p t (imperative)B. Phng thc khai bo (declarative)C. C hai phng thc trn

Cu tr li: C

2. Tr cc dng panel, cc phn t UI trong WPF nh Label, Button chophp cha ti a bao nhiu phn t con?

A. 0B. 1C. 2D. Khng gii hn s lng

Cu tr li: B

3. Vit m trnh bng C# t c kt qu tng t nh on m XAMLtrong mc 2.1.2.

M trnh C# v d:

public Window7()

{

InitializeComponent();

//

//t thuc tnh ca s chnh

this.Height = 100; //chiu cao

this.Width = 300; //chiu rngthis.Title = "Lesson 1 - StackPanel"; //nhan

//

//To StackPanel

StackPanel stackPanel = newStackPanel();

stackPanel.Background = newSolidColorBrush(Colors.Beige); //t thuc tnh mu nn

stackPanel.Orientation = Orientation.Horizontal; //t hng sp t


13/16


//

//To i tng Border 1

Border border1 = newBorder();

border1.Width = 90;

border1.Height = 90;

border1.BorderBrush = newSolidColorBrush(Colors.DarkSlateBlue); //t mu ng vin

border1.Background = newSolidColorBrush(Color.FromRgb(169, 233, 105));

border1.BorderThickness = newThickness(2); //t dy ng vin

//

//To i tng CheckBox

CheckBox checkbox = newCheckBox();

checkbox.Content = "Control 1"; //t ni dung text ca CheckBox

//

//t CheckBox vo trong Border 1border1.Child = checkbox;

//

//To i tng Button

Button button = newButton();

button.Width = 90;

button.Height = 90;

button.Content = "Control 2";

//

//To i tng Border 2Border border2 = newBorder();

border2.Width = 90;

border2.Height = 90;

border2.BorderBrush = newSolidColorBrush(Color.FromRgb(254, 202, 0));

border2.BorderThickness = newThickness(2);

//

//To i tng TextBlock

TextBlocktextBlock = newTextBlock();

textBlock.Text = "Control 3";

//

//t TextBlock vo trong Border 2

border2.Child = textBlock;

//

//t cc i tng to vo trong StackPanel


14/16


stackPanel.Children.Add(border1);

stackPanel.Children.Add(button);

stackPanel.Children.Add(border2);

//

//t StackPanel vo ca s chnh

this.Content = stackPanel;

}

4. Vit m XAML s dng Grid t kt qu tng t nh on m trongmc 2.3.

Gi : S dng nhiu Grid lng nhau.

M XAML vi d:

Control 1


15/16


Control 5

Control 4

Control 3


16/16


Control 2

Ti liu tham kho

1. MSDNWindows Presentation Foundation - The Layout System.http://msdn.microsoft.com/en-us/library/ms745058.aspx

2. How can I control the layout of items in WPF? URL:http://learnwpf.com/Posts/Post.aspx?postId=c76411d6-5350-4a10-b6bb-f1481c167ecf

3. Why WPF Rocks (Custom Layout Panel Showcase).http://dotnet.org.za/rudi/archive/2008/04/15/why-wpf-rocks-custom-layout-panel-

showcase.aspx

Documents

WPF-Lesson 1 - Layout