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 u s gii thiu v cc dng panel, mt s i mi trong phng thc b tr giao din ca ng 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 chung

Nh gii thiu trong bi m u, WPF s dng cc dng panel khc 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 forms da 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 thc khai bo (declarative), trong , ngi lp trnh ch a ra nhng th cn lm, cn my tnh s gii quyt vn lm nh th no. Vi phng thc ny, giao din trn trnh duyt khng 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 <div>, <table>, <tr> v <td>, b tr cc phn t UI khc trong mt cch linh ng bn phi hoc bn tri mt i tng; hay cng c th sp xp chng theo v tr
Microsoft Vietnam DPE Team | WPF Bi 1: B tr giao din trong ng dng WPF 1

tuyt i trn trang Web. Cc phn t nh <div> quan tm ti kch thc bn trong ni dung ca n v s t ng gin 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 a thm nhng khi nim nh Docking (cp bn) hay Anchoring (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 v panel. Phn ln cc phn t UI trong ng dng WPF ch c th 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 CheckBox hay ComboBox na.

on m XAML sau y khng bin dch c

<Button> <TextBlock> Cho mng bn n vi bi 1 - Gii thiu v WPF Layout </TextBlock> <CheckBox /> <ComboBox /> </Button>

nt bm ny c th cha 3 phn 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

<Button> <StackPanel>

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

<TextBlock>Cho mng bn n vi bi 1 - Gii thiu v WPF Layout </TextBlock> <CheckBox /> <ComboBox /> </StackPanel> </Button>

Kt qu bin dch s l:

Hnh 1.1 Kt 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 s ln lt gii thiu nhng dng panel thng dng v cc c tnh ca chng thng qua cc v d n gin.

2.1

StackPanel

StackPanel b tr cc 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) hoc theo 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 Window bng StackPanel theo chiu dc:
Microsoft Vietnam DPE Team | WPF Bi 1: B tr giao din trong ng dng WPF 3

<!--Khai bo khi to ca s--> <Window x:Class="Lesson1.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Lesson1 - StackPanel" Height="120" Width="280"> <!--S dng StackPanel sp xp ngm nh theo chiu dc--> <StackPanel Background="Beige"> <!--Thit lp thuc tnh khung vin bao quanh control 1--> <Border Width="200" BorderBrush="DarkSlateBlue" Background="#a9e969" BorderThickness="2"> <!--Khai bo control 1 dng checkbox--> <CheckBox>Control 1</CheckBox> </Border> <!--Khai bo control 2 dng nt bm--> <Button Width="200">Control 2</Button> <!--Thit lp thuc tnh khung vin bao quanh control 3--> <Border Width="200" BorderBrush="#feca00" BorderThickness="2"> <!--Khai bo control 3 dng text--> <TextBlock HorizontalAlignment="Right">Control 3</TextBlock> </Border> </StackPanel> </Window>

Kt qu l:

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

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

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. <!--S dng StackPanel sp xp theo chiu ngang xc nh bng thuc tnh Orientation="Horizontal"--> <StackPanel Background="Beige" Orientation="Horizontal"> <!--Thit lp thuc tnh khung vin bao quanh control 1--> <Border Width="90" Height="80" BorderBrush="DarkSlateBlue" Background="#a9e969" BorderThickness="2"> <!--Khai bo control 1 dng checkbox--> <CheckBox>Control 1</CheckBox> </Border> <!--Khai bo control 2 dng nt bm--> <Button Width="90" >Control 2</Button> <!--Thit lp thuc tnh khung vin bao quanh control 3--> <Border Width="90" BorderBrush="#feca00" BorderThickness="2"> <!--Khai bo control 3 dng text--> <TextBlock HorizontalAlignment="Right">Control 3</TextBlock> </Border> </StackPanel>

V kt qu s l:

Hnh 1.3 Sp xp nhiu control theo th t k tip tri sang phi s dng StackPanel

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

Trong trng hp sp xp theo chiu ngang, nu tng chiu rng ca cc phn t con ln hn chiu rng ca form cha, th cc phn t nm ngoi form s khng c nhn thy.

2.2

WrapPanel

WrapPanel cho 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:
<Window x:Class="Lesson1.Window3" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Lesson1 - WrapPanel" Height="150" Width="300"> <!--S dng WrapPanel--> <WrapPanel Background="Beige"> <TextBlock FontSize="14" Foreground="#58290A"> Ch co co nh, ngi trong m c </TextBlock> <Button>Control 2</Button> <Border BorderBrush="#feca00" BorderThickness="2"> <TextBlock>Control 3</TextBlock> </Border> </WrapPanel>

</Window>

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:

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

Hnh 1.4 S dng WrapPanel

2.3

DockPanel

DockPanel 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 tun theo th t m chng c khai bo trong file XAML. Sau y l on m XAML minh ha vic s dng DockPanel:
<DockPanel> <TextBlock FontSize="16" DockPanel.Dock="Top" Foreground="#58290A"> Control 1 </TextBlock> <Button DockPanel.Dock="Right">Control 2</Button> <Button DockPanel.Dock="Bottom">Control 3</Button> <Button DockPanel.Dock="Right">Control 4</Button> <Border BorderBrush="#feca00" BorderThickness="2"> <TextBlock>Control 5</TextBlock> </Border> </DockPanel>

Phn t Border cui cng s in vo phn khng gian cn li v thuc tnh DockPanel.Dock khng xc nh. Kt qu l:

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

Hnh 1.5 S dng DockPanel Control 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

Canvas

Panel dng Canvas s 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 thuc tnh 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 Bottom. Cc phn 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.
<!--S dng Canvas--> <Canvas Background="Beige"> <TextBlock FontSize="16" Canvas.Top="10" Canvas.Left="20" Foreground="#58290A"> Ch co co nh, xanh nh ht </TextBlock> <Button Canvas.Bottom="25" Canvas.Right="50" Width="100">Control 2</Button> <Border BorderBrush="#feca00" BorderThickness="2" Height="50" Width="50" Canvas.Top="20" Canvas.Left="50">

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

<TextBlock>Control 3</TextBlock> </Border> </Canvas>

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.6 S dng Canvas sp xp cc phn t UI

2.5

Grid

Panel dng Grid l dng panel ht sc linh hot, v c th s dng t c gn nh tt c 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:
<!---S dng panel Grid c cc cnh cch l 10 pixel v c hin th cc ng k --> <Grid Margin="10" ShowGridLines="True"> <!--nh ngha thuc tnh ct - C tng cng 2 ct--> <Grid.ColumnDefinitions>

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

<!--Khai bo ct 0 - c chiu rng t l gp i ct k tip--> <ColumnDefinition Width="2*" /> <!--Khai bo ct 1 - Thuc tnh ngm nh--> <ColumnDefinition /> </Grid.ColumnDefinitions> <!--nh ngha thuc tnh hng - C tng cng 3 hng --> <Grid.RowDefinitions> <!--Khai bo hng 0 c chiu cao bng 25 pixel--> <RowDefinition Height="25" /> <!--Khai bo hng 1 - Thuc tnh ngm nh --> <RowDefinition /> <!--Khai bo hng 2 - t chiu cao gp i hng trc (hng 1)--> <RowDefinition Height="2*"/> </Grid.RowDefinitions> <!--t TextBlock 1 vo ct 0 hng 0--> <TextBlock FontSize="16" Foreground="#58290A" Grid.Column="0" Grid.Row="0"> Ch co co nh </TextBlock> <!--t Button vo v tr ct 0 hng 1--> <Button Grid.Column="0" Grid.Row="1"> Control 2 </Button> <!--t Border vo v tr ct 1 hng 2--> <Border BorderBrush="#feca00" BorderThickness="2" Grid.Column="1" Grid.Row="2"> <TextBlock>Control 3</TextBlock> </Border> </Grid>

Sau y l kt qu:

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

10

a) Trng thi khi to

b) Sau khi thay i kch thc form cha Grid

Hnh 1.7 S 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.

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

11

Cu hi n tp
1. ng dng WPF s dng cch tip cn no b tr cc phn t trn giao Phng thc p t (imperative) Phng thc khai bo (declarative) C hai phng thc trn din ngi dng? A. B. C. Cu tr li: C Tr cc dng panel, cc phn t UI trong WPF nh Label, Button cho

2.

php cha ti a bao nhiu phn t con? A. B. C. D. Cu tr li: B Vit m trnh bng C# t c kt qu tng t nh on m XAML 0 1 2 Khng gii hn s lng

3.

trong 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 rng this.Title = "Lesson 1 - StackPanel"; //nhan // //To StackPanel StackPanel stackPanel = new StackPanel(); stackPanel.Background = new SolidColorBrush(Colors.Beige); //t thuc tnh mu nn stackPanel.Orientation = Orientation.Horizontal; //t hng sp t

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

12

// //To i tng Border 1 Border border1 = new Border(); border1.Width = 90; border1.Height = 90; border1.BorderBrush = new SolidColorBrush(Colors.DarkSlateBlue); //t mu ng vin border1.Background = new SolidColorBrush(Color.FromRgb(169, 233, 105)); border1.BorderThickness = new Thickness(2); //t dy ng vin // //To i tng CheckBox CheckBox checkbox = new CheckBox(); checkbox.Content = "Control 1"; //t ni dung text ca CheckBox // //t CheckBox vo trong Border 1 border1.Child = checkbox; // //To i tng Button Button button = new Button(); button.Width = 90; button.Height = 90; button.Content = "Control 2"; // //To i tng Border 2 Border border2 = new Border(); border2.Width = 90; border2.Height = 90; border2.BorderBrush = new SolidColorBrush(Color.FromRgb(254, 202, 0)); border2.BorderThickness = new Thickness(2); // //To i tng TextBlock TextBlock textBlock = new TextBlock(); textBlock.Text = "Control 3"; // //t TextBlock vo trong Border 2 border2.Child = textBlock; // //t cc i tng to vo trong StackPanel

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

13

stackPanel.Children.Add(border1); stackPanel.Children.Add(button); stackPanel.Children.Add(border2); // //t StackPanel vo ca s chnh this.Content = stackPanel; }

4. mc 2.3.

Vit m XAML s dng Grid t kt qu tng t nh on m trong

Gi : S dng nhiu Grid lng nhau. M XAML vi d:

<Window x:Class="Lesson1.Window8" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Lesson1 - Cau hoi 4" Height="200" Width="300"> <!--To Grid 1 gm 1 ct v 2 hng--> <Grid Margin="0" ShowGridLines="False"> <Grid.ColumnDefinitions> <ColumnDefinition/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="25"/> <RowDefinition/> </Grid.RowDefinitions> <!--To i tng TextBlock nm [0,0] ca Grid 1--> <TextBlock Grid.Column="0" Grid.Row="0" FontSize="16" DockPanel.Dock="Top" Foreground="#58290A"> Control 1 </TextBlock> <!--To Grid 2 gm 2 ct, 1 hng, nm trong ct 0 hng 1 ca Grid 1--> <Grid Margin="0" ShowGridLines="False" Grid.Column="0" Grid.Row="1"> <Grid.ColumnDefinitions>

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

14

<ColumnDefinition/> <ColumnDefinition Width="60"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition/> </Grid.RowDefinitions> <!--To Grid 3 gm 2 hng, 1 ct nm trong [0,0] ca Grid 2--> <Grid Margin="0" ShowGridLines="False" Grid.Column="0" Grid.Row="0"> <Grid.ColumnDefinitions> <ColumnDefinition/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition Height="25" /> </Grid.RowDefinitions> <!--To Grid 4 gm 2 ct, 1 hng, nm trong [0,0] ca Grid 3--> <Grid Margin="0" Grid.Column="0" Grid.Row="0"> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition Width="60"></ColumnDefinition> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition/> </Grid.RowDefinitions> <!--To i tng Border nm trong [0, 0] ca Grid 4--> <Border Grid.Column="0" Grid.Row="0" BorderBrush="#feca00" BorderThickness="2"> <TextBlock>Control 5</TextBlock> </Border> <!--To i tng Button Control 4 nm trong [0, 1] ca Grid 4--> <Button Grid.Column="1" Grid.Row="0">Control 4</Button> </Grid> <!---To i tng Button Control 3 ti [0,1] ca Grid 3--> <Button Grid.Column="0" Grid.Row="1">Control 3</Button>

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

15

</Grid> <!--To i tng Button Control 2 nm trong [0,1] ca Grid 2--> <Button Grid.Column="1" Grid.Row="0">Control 2</Button> </Grid> </Grid> </Window>

Ti liu tham kho

1. MSDN Windows 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-panelshowcase.aspx

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

16