wpf-lesson 3 - advanced ui controls

Bi 3 CC IU KHIN NNG CAO TRONG NG DNG WPFKhng dng li vic cung cp nhng iu khin UI nh ComboBox, ListBox, TextBox,, vi nhng chc nng c bn v c tnh text n iu nh trong Windows Form, WPF cn cho php ngi lp trnh ty bin thuc tnh ca nhng iu khin trn bin chng thnh nhng iu khin UI phc hp, vi nhiu c tnh giao din phong ph, tinh t, kt hp text, hnh nh, t c hiu qu tng t, vi nhng cng ngh trc y nh MFC, cn tiu tn nhiu cng sc lp trnh. Qua cc v d c th trong bi ging ny, chng ta s thy WPF to ra chng n gin nh th no.

1 Hp la chn phng ch (Font Chooser)Mc tiu ca phn ny l to lp mt iu khin dng ComboBox, trong , lit k danh sch cc phng ch h thng. Tn ca mi phng ch li c hin th di dng chnh phng ch . iu ny cho php ngi dng xem trc nh dng phng ch trc khi chn chng. Bn c th quen thuc vi dng Combox ny khi s dng cc ng dng gn y ca Microsoft Office nh Word, Excel, PowerPoint, V sau y l m XAML to ra iu khin ny: ItemsSource="{x:Static Fonts.SystemFontFamilies}" FontFamily="Verdana" FontWeight="DemiBold"> Danh mc phng h thng:

Microsoft Vietnam DPE Team |WPF Bi 3: Cc iu khin nng cao trong WPF

1

Trong phn khai bo to iu khin ComboBox, ta khai bo ngun d liu c dng cho cc mc trong hp danh sch thng qua thuc tnh ItemsSource. Bng vic gnItemsSource="{x:Static Fonts.SystemFontFamilies}"

ta nh ngha ngun d liu ny l

danh sch cc phng ch hin c ca h thng my tnh hin thi. Thuc tnh SelectedIndex cho php nh ra ch s ca ch mc ngm nh c chn ban u trong danh sch phng, c th trong trng hp ny l phng ch u tin (SelectedIndex="0"). Trong phn khai bo nh ngha thuc tnh d liu ca mi ch mc trong ComboBox (phn t ), ta lng vo mt iu khin TextBlock, trong , ni dung hin th l phng ch tng ng (Text="{Binding}") v dng phng hin th ni dung cng chnh l phng ch tng ng vi ch mc ny (FontFamily="{Binding}"). Nhng vn lin quan n kt ni ngun d liu s c cp chi tit hn trong cc bi ging tip sau. Bin dch v chy chng trnh, ta c kt qu nh minh ha Hnh 3.1. Nh vy, ch vi khng hn 20 dng m XAML, chng ta c th to ra mt iu khin rt hu dng.


2

Hnh 3.1 Hp la chn phng ch c xy dng bng WPF

2 Hp danh mc nh (Image ListBox)Trong phn ny, ta xy dng mt hp danh mc (ListBox) cc ung c km theo nh. R rng tnh trc quan ca giao din ngi dng s tng hn nhiu so vi mt danh sch dng text n iu.

2.1

Thm d liu nh vo ti nguyn ca project

Trc ht, ta thm cc nh ung cn thit vo ti nguyn ca project theo cc bc sau: ca s Solution Explorer, ta nhp chut phi vo tn project Xut hin bng Chn mc Add>Existing Item Xut hin ca s cho php la chn file. Trong hp danh sch Files of type, ta chn Image Files Cc file nh trong Tm n cc file nh cn hin th trong danh sch v chn OK. Kt qu, trong ca s Solution Explorer, ta thy xut hin cc file nh tng ng.3

chn chc nng. -

th mc hin thi s xut hin. -


2.2

Xy dng m XAML

Gi thit rng cc file nh c np vo project, sau y l m XAML to lp hp danh mc ung theo yu cu: Nc cam ti Nc kiwi p


4

Nc soi p Sa ti tit trng C ph Espresso

Nh vy, im mu cht b sung thm cc thuc tnh giao din nh nh, text, checkbox,, vo mi ch mc ca hp danh sch chnh l vic kt hp cc phn t UI ring l tng ng vo cng mt phn t Panel nm trong khai bo ch mc. Trong trng hp ny, vi mi khai bo ch mc ta thm vo mt theo chiu ngang, trong , cha mt phn t v 1 phn t . Ngun d liu nh c xc nh qua thuc tnh Source="". Kt qu ca on code c minh ho trong hnh 3.2.


5

Hnh 3.2 Danh mc ung c km nh minh ho xy dng bng WPF

3 Hp m rng (Expander)Hp m rng Expander l mt trong nhng iu khin UI mi c gii thiu trong WPF nh mt iu khin c bn. Expander cho php thu gn hoc m rng mt ni dung no cha trong n, ging nh mt node trong TreeView, bng vic click vo biu tng mi tn (hng ln, nu iu khin ang trng thi m rng; hng xung, nu ang trng thi thu gn). iu khin ny rt tin li: Khi din tch form chnh qu cht hp v nhiu chc nng c trnh by trn cng giao din, ta c th s dng Expander cha mt s chc nng t dng c th tm thi c n di mt tn nhm chung. Trong v d sau y, ta s lm mt menu cha 2 mc l ung v n, mi mc s cha danh sch cc sn phm tng ng m nh hng cung cp. Ta s dng Expander c th m rng/thu gn tng mc nu trn. Sau y l m XAML ca ng dng:


6

Nc chanh leo Nc cam vt Nc m mui Sa chua nh cha danh mc ung-->


7

Ph ti gu Bn b gi heo Bnh cun tm nn Bnh a cua


8

Nh ta thy vic s dng Expander trong WPF rt n gin, vi cng nguyn tc nh cc iu khin UI c bn khc. y ta s dng 2 hp m rng Expander: mt cha danh mc ung c t trong mt ListBox; mt cha danh mc n trong mt ListBox. Kt qu ca on code c minh ho trong Hnh 3.3.

a)

b)

c)

Hnh 3.3 To lp v s dng hp m rng bng WPF: a) Hai danh mc cng thu gn; b) Danh mc n c m rng; c) C hai danh mc c m rng (Danh mc trn y danh mc di xung)


9

4 Hp son vn bn a nng (RichTextBox)Hp son vn bn a nng RichTextBox l mt trong nhng iu khin c chc nng phong ph. Khng ch cho php son sa v hin th cc ni dung text n thun, RichTextBox cn cho php thay i phng ch (Verdana, Times New Roman,), kiu ch (nghing, m, gch chn), c bit, iu khin RichTextBox trong WPF/.NET 3.0 cn cho php kim tra/gi sa i li chnh t ting Anh ca ni dung vn bn cha trong . RichTextBox trong WPF/.NET 3.0 l phn t c ci tin v c bn so vi phin bn trc ca iu khin RichTextBox trong .NET 2.0. Tuy nhin, cng vi s m rng v chc nng l vic b sung cc API mi cng nh nhng cch thc s dng khc.

4.1 Chc nng c bn thm mi mt hp son tho a nng vo form, ta dng m XAML nh sau:

Thuc tnh x:Name l t kho xc nh danh tnh ca RichTextBox c to. Thuc tnh ny ng vai tr l tham chiu cho php ta sau ny buc m lnh C# vo iu khin. Thuc tnhMinHeight

xc nh s dng c th thy c ca hp son tho, gi tr ny ngm nh bng 1.

Thuc tnh SpellCheck.IsEnabled="True" kch hot tnh nng kim tra li chnh t ting Anh trong ni dung vn bn v gi nhng t ng c th thay th, ging nh Microsoft Word. Tuy nhin, nu ch vi mt RichTextBox, ta khng c cch no sa i nh dng ca vn bn trong RichTextBox nh nh ch nghing, ch m, i phng ch, vn vn. Mun t c iu ny, ta phi buc m lnh vo giao din Command ca RichTextBox.

4.2 Giao din CommandMicrosoft ch trng ngi pht trin lm vic vi RichTextBox thng qua giao din Command. Mc d khi nim ny khng mi i vi phn ln ngi pht trin giao din ho ngi dng, vic ci t v c php trong XAML c cht khc bit.Microsoft Vietnam DPE Team |WPF Bi 3: Cc iu khin nng cao trong WPF 10

Ta cn thm mt ToolBar v mt s nt bm hai trng thi (ToggleButton) gn lnh iu khin RichTextBox to. Thuc tnh Command trn mi iu khin k trn s xc nh chc nng m ta mun kch hot trn RichTextBox,. Trong khi , thuc tnh CommandTarget xc nh RichTextBox no ta mun chc nng kch hot ca cc nt bm nhm vo. Sau y l on m XAML b sung thm mt ToolBar v 3 nt bm hai trng thi: B I U

Mc

d

on

m

v

d

ch

bao

gm

mt

s

t

cc

nt

lnh

(Command="EditingCommands.ToggleBold",Command="EditingCommands.ToggleItalic"),

Command="EditingCommands.ToggleBold",

c tng cng 47 lnh khc nhau m ta c th la

chn (c th xem chng bng cch kho st lp EditingCommands).


11

Di y l on m XAML y cho php ta xy dng mt hp son tho vn bn c th thay i c kiu ch (m, nghing, gch chn): B I U


12

Kt qu c minh ho trong Hnh 3.4.

Hnh 3.4 Xy dng hp son tho a nng n gin vi cc chc nng thay i kiu ch bng WPF

Cu hi n tp1. Thuc tnh no ca mt ComboBox cho php khai bo ngun d liu? A. B. C. D. Tr li: B SelectedIndex ItemSource Text FontFamily


13

2. lp no?

Trong hp chn phng ch, danh sch phng ch h thng c ly t

A. B. C.

Fonts.SystemFontFamilies Fonts.SystemTypefaces FontFamilyMapCollection

Tr li: A Trong v d v danh mc nh mc 3, pht trin thm tnh nng mi bng

3.

vic b sung cc check box vo u mi mc ung. Mt nt bm c trch nhim hin th nhng ung m ngi dng chn bng vic nh du checkbox (ch c th nhiu hn 1 la chn). Kt qu nh trong hnh minh ho di y:

Gi : Thm iu khin CheckBox vo mi ch mc con ca ListBox ang dng. Vi mi iu khin CheckBox, thm hm x l s kin Uncheck v Check. Vit m C# cc hm tng ng trong file code-behind ca form cha. Thm iu khin Button vo sau ListBox (v d, dng StackPanel). Thm hm x l

s kin Click ca Button.Microsoft Vietnam DPE Team |WPF Bi 3: Cc iu khin nng cao trong WPF 14

Sau y l m v d: Phn m XAML: Nc cam ti


15

Nc kiwi p Nc soi p Sa ti tit trng C ph Espresso


16

Gi ung

Phn m C#:public partial class Window4 : System.Windows.Window { //t cc c xc nh la chn tng ng vi cc loi ung bool selectedOrange; bool selectedKiwi; bool selectedMango; bool selectedMilk; bool selectedEspesso; public Window4() { InitializeComponent(); // //Khi to bin nh du chn selectedOrange = false; selectedKiwi = false; selectedMango = false; selectedMilk = false; selectedEspesso = false; } //Hm x l s kin b chn (Unchecked) ca mi checkbox //Lu : y ta ch s dng mt hm duy nht x l s kin ny cho mi checkbox // phn bit checkbox no pht ng s kin, ta da vo tham s sender v so snh n vi cc checkbox private void HandleUnchecked(object sender, RoutedEventArgs e) { if (sender.Equals(chkCafe))selectedEspesso = false; if (sender.Equals(chkKiwiJuice)) selectedKiwi = false;


17

if (sender.Equals(chkMangoJuice)) selectedMango = false; if (sender.Equals(chkMilk)) selectedMilk = false; if (sender.Equals(chkOrangeJuice)) selectedOrange = false; } //Hm x l s kin b chn (checked) ca mi checkbox (tng t nh trn) private void HandleChecked(object sender, RoutedEventArgs e) { if (sender.Equals(chkCafe)) selectedEspesso = true; if (sender.Equals(chkKiwiJuice)) selectedKiwi = true; if (sender.Equals(chkMangoJuice)) selectedMango = true; if (sender.Equals(chkMilk)) selectedMilk = true; if (sender.Equals(chkOrangeJuice)) selectedOrange = true; } //Hm x l s kin hin th cc ung c chn private void DislayCustomerChoices(object sender, RoutedEventArgs e) { String choices = "Ban da chon "; bool selected = false; // if (selectedOrange) { choices += "Nuoc cam; "; selected = true; } // if (selectedMilk) { choices += "Sua tuoi; "; selected = true; } // if (selectedMango) {


18

choices += "Nuoc soai ep; "; selected = true; } // if (selectedEspesso) { choices += "Cafe Espresso;"; selected = true; } // if (!selected) choices = "Ban chua chon do uong nao"; // MessageBox.Show(choices); } }

4. Trong iu khin Expander, ta thng to dng text m t ni dung bn trong ca Expander, lun xut hin trn Expander bn cnh mi tn ch trng thi ca Expander. Mun thit lp ni dung ca dng text ny, ta dng thuc tnh g ca iu khin Expander? A. Content B. Text C. Header D. Source Tr li: C 5. Trong ToolBar kt hp vi RichTextBox, thuc tnh no ca nt bm hai trng thiToggleButton xc nh chc nng sa i vn bn cn kch hot?

A. Command B. CommandTarget C. C hai thuc tnh trn Tr li: A 6. Trong ToolBar kt hp vi RichTextBox, thuc tnh no ca nt bm hai trng thiToggleButton xc nh i tng RichTextBox c chc nng sa i vn bn cn kch hot? Microsoft Vietnam DPE Team |WPF Bi 3: Cc iu khin nng cao trong WPF 19

A. Command B. CommandTarget C. C hai thuc tnh trn Tr li: B

Ti liu tham kho1.Creating ImageListBox in WPF, URL: http://windowsclient.net/blogs/ilves/archive/2008/02/14/creating-imagelistbox-in-wpf.aspx 2.WPF ListBox Tutorial, URL: http://www.longhorncorner.com/UploadFile/lheditor/WPfLB08262008103013AM/WPfLB.aspx 3. WPF Sample Series - Expander Control With Popup Content. URL: http://karlshifflett.wordpress.com/2008/02/05/wpf-sample-series-expander-control-with-popup-content/ 4. WPF RichTextBox, URL: http://www.csharpcorner.com/UploadFile/mahesh/WPFRichTextBox09072008194855PM/WPFRichTextBox.aspx 5. Mastering the WPF RichTextBox, URL: http://www.devx.com/dotnet/Article/34644


20

wpf-lesson 3 - advanced ui controls

Documents