WPF-Lesson 7 - Styles and Templates

Bi 7 Kiu hin th (Style) v Khun mu (Template)WPF gii thiu hai khi nim l Kiu hin th (Style) v Khun mu (Template) cho php xy dng cc mu thuc tnh hin th p dng chung cho nhiu i tng UI trn giao din ngi dng. Bi ging ny tp trung gii thiu hai khi nim ny v cch s dng chng thng qua cc v d c th.

1. Gii thiu v Kiu hin th (Style)Thng thng, khi xy dng mt giao din ho, ta thng thit lp cng gi tr cc thuc tnh hin th trn nhiu i tng UI khc nhau. V d, bn mun t tt c cc tiu (Label) trong ng dng vi phng ch Times New Roman, c 14px, in m. iu ny c th thc hin d dng vi CSS trong mt ng dng Web, nhng khng n gin i vi WinForm. WPF nhn ra s cn thit ny v gii quyt bng vic a ra thnh phn Style. Thnh phn Style cho php ngi lp trnh lu tr mt danh sch cc gi tr thuc tnh vo mt ni thun tin. N tng t nh cch lm vic ca CSS trong cc ng dng Web. Thng thng, cc Style c lu tr trong phn Resource hoc mt th mc Resource ring ca project. Cc thuc tnh quan trng nht

ca thnh phn Style bao gm BasedOn, TargetType, Setters v Triggers.c xem nh mt loi ti nguyn, Style c th c nh ngha bt k phn cp no trong cy trc quan, v d cho mt StackPanel, Window hoc thm ch mc Application. Vic t khai bo Style ln vi cc m chc nng XAML thng d gy nhm ln khi m rng ng dng. Li khuyn y l khng t khai bo Style trong App.xaml hay cc file chc nng xaml, m lu chng trong mt file xaml ti nguyn ring. Lu rng cc ti nguyn c th c chia nh thnh cc file c lp sao cho cc file nh nh jpeg c th c lu tr ring r. Mt khi chia thnh cc file ti nguyn ring th vn tip theo s l vic lm sao tm tham chiu ti ti nguyn bn cn. y, ta dng mt gi tr kho duy nht: Khi nh ngha mt ti nguyn trong XAML, bn nh ngha mt gi tr kho duy nht cho ti nguyn thng qua thuc tnh x:Key. K t sau , bn c th tham chiu ti ti nguyn ny bng vic s dng gi tr ny. Sau y, cc thuc tnh quan trng trong Style s c ln lt gii thiu. Microsoft Vietnam DPE Team | WPF Bi 7: Kiu hin th (Style) v khun mu (Template) 1

1.1. Cc thnh phn thuc tnh trong Style1.1.1 BasedOnThuc tnh ny ging nh tnh cht k tha, trong , mt Style k tha thuc tnh chung ca mt Style khc. Mi kiu hin th ch h tr mt gi tr BaseOn. Sau y l mt v d nh: ... ...

1.1.2 TargetTypeThuc tnh TargetType c s dng gii hn loi iu khin no c s dng Style . V d nu ta c mt Style vi thuc tnh TargetType thit lp cho nt bm (Button), th Style ny s khng th p dng cho kiu iu khin TextBox. Cch thit lp thuc tnh ny minh ha trong v d sau: ....

1.1.3 SettersSetters cho php thit lp mt s kin hay mt thuc tnh vi mt gi tr no . Trong trng hp thit lp mt s kin, chng lin kt vi mt s kin v kch hot hm x l tng ng. Trong trng hp thit lp mt thuc tnh, chng t gi tr cho thuc tnh . Sau y l mt v d v vic s dng EventSetters lin kt s kin, trong , s kin nhm chut vo nt bm (Click) c lin kt:

Microsoft Vietnam DPE Team | WPF Bi 7: Kiu hin th (Style) v khun mu (Template)

2

Tuy nhin, Setter thng c dng thit lp gi tr thuc tnh hn c. V d:

1.1.4 TriggersM hnh thit lp kiu hin th v khun mu ca WPF cho php bn nh ra cc Trigger bn trong Style ca bn. Trigger l i tng cho php bn p dng nhng thay i v thuc tnh giao din khi nhng iu kin nht nh (v d khi mt gi tr Property no bng true, hoc mt s kin no xy ra) c tho mn. V d sau y minh ho mt Style c nh danh c p dng cho iu khin Button. Style ny nh ngha mt thnh phn Trigger, c tc dng thay i thuc tnh mu ch ca nt bm khi thuc tnh IsPressed (nt ang b bm xung) l true.

Mt s dng khc ca Trigger s dng trong Style: DataTrigger DataTrigger i din cho mt Trigger p dng cho gi tr thuc tnh hoc thc hin hnh ng khi d liu lin kt tho mn mt iu kin nh trc. Trong v d sau, DataTrigger c xc nh sao cho nu Microsoft Vietnam DPE Team | WPF Bi 7: Kiu hin th (Style) v khun mu (Template) 3

nh gi tr Tnh trong mc d liu Ni lm vic bng HN th mu ch ca mc d liu tng ng trong ListBox c t :

C mt loi Trigger c bit s dng nhiu hn mt gi tr kch hot hot ng, c tn gi l Multitrigger. Vi loi Trigger ny ta c th thit lp nhiu iu kin trong mt Trigger. V d:

Trong v d ny, i tng d liu buc vi iu khin phi c TenCongViec=CNTT v Tinh=HN, th mu ch ca mc d liu tng ng trn ListBox c t . EventTrigger EventTrigger l loi Trigger c bit p dng cho mt tp cc hnh ng tng ng vi mt s kin. Cc EventTrigger c bit ch chng ch cho php cc hnh ng hot ha c kch hot. Chng khng cho php cc thuc tnh bnh thng c thit lp lm c s nh i vi cc Trigger khc. Sau y l mt v d ca EventTrigger:


4

1.2 Mt v d y v s dng StyleSau y l mt v d y v vic s dng Style. Trong v d minh ho ny, hai Style c nh ngha cho panel chnh. Style th nht quy nh cc thuc tnh tnh v phng ch, p dng i vi i tng UI l Control. Style th hai k tha cc thuc tnh ny t Style th nht v ch p dng cho Label. Style th hai quy nh thm phn ng ca cc i tng l Label trong StackPanel khi con tr chut lt qua, c th, mu ch s chuyn . Sau y l m XAML tng ng:


5

L chng ta ng trong ging chiu hp, Gic m con nt cuc i con, Hnh phc ng trong mt t o p, Mt mi nh yn r bng xung tm hn -Ch Lan Vin-

Kt qu l:


6

Hnh 7.1 - S dng Style Ch khi p dng mt Style c thit lp gi tr x:Key cho mt i tng UI c th, ta phi thit lp thuc tnh Style trong khai bo i tng . V d: on text c p dng Style on text khng p dng Style

Trong v d trn, ch TextBlock c thit lp thuc tnh Style tham chiu n Style c gi tr kho TitleText (Style="{StaticResource TitleText}") mi chu tc dng ca Style ny. Style trong TextBlock cn li l ngm nh.

2. Gii thiu v Khun mu (Template)Bng vic s dng Style, ta c th to ra mt din mo nht qun v d sa i cho giao din ng dng. Tuy nhin, i khi bn mun i xa hn. Chng hn, bn mun cc nt bm khng phi l hnh ch nht nh thng l m l hnh ellipse. Hay bn mun hin th mt tp d liu nhn vin trong mt cng ty, trong , mi bn ghi nhn vin li c trnh by theo mt nh dng xcMicrosoft Vietnam DPE Team | WPF Bi 7: Kiu hin th (Style) v khun mu (Template)

7

nh. Bn khng th t c iu ny bng nhng Setter cn bn trong Style. Trong trng hp , bn phi dng n khi nim gi l Khun mu (Template). Trong WPF, c hai dng khun mu c s dng: ControlTemplate dng nh li cu trc hin th cho iu khin UI; v DataTemplate dng nh ra cch thc hin th d liu. Phn sau y s trnh by ln lt hai dng khun mu ny.

2.1 ControlTemplate2.1.1 ControlTemplate l g? Phn ln cc iu khin u bao gm din mo v hnh vi. Xt mt nt bm: din mo ca n l vng ni ln m ta c th bm vo, trong khi hnh vi l s kin Click c pht ng phn ng vi hnh ng nhp chut vo nt bm . i khi c nhng iu khin cung cp cc hnh vi m ta cn nhng li khng c din mo m ta mong mun. Ti gi, chng ta c th dng cc Setter ca thnh phn Style thit lp cc gi tr thuc tnh c nh hng ti din mo ca iu khin. Tuy nhin, thay i cu trc ca mt iu khin hoc thit lp gi tr thuc tnh cho cc component c cha mt iu khin, ta cn dng n ControlTemplate. Trong WPF, ControlTemplate ca mt iu khin nh ngha din mo cho iu khin . Bn c thay i cu trc hay din mo ca mt iu khin bng cch nh ngha mt ControlTemplate mi cho dng iu khin . Trong trng hp bn khng nh ngha ring mt ControlTemplate cho iu khin ca bn, th mt template ngm nh ph hp vi giao din chung ca h thng s c s dng, ging nh nhng g ta nhn thy i vi mt nt bm truyn thng. Mt iu cn nh l khi bn to mt ControlTemplate cho iu khin, bn ang thay th ton b ControlTemplate ca iu khin . V d, bn c th nh ngha ControlTemplate cho iu khin Button nh sau:


8

Khi p dng, nt bm s c dng nh mt hnh Ellipse:

Hnh 7.2 To mt iu khin Button c dng hnh Ellipse s dng ControlTemplate Ch rng din mo ca Button khi n nhn c focus hoc c bm hin thi u thuc vo phn din mo ngm nh ca nt bm m ta thay th. V ta thit lp thuc tnhOverridesDefaultStyle

bng true, mi thuc tnh ngm nh u b b qua. Do , nu cn thay

i din mo ca Button khi nhn c focus hay b bm, ta phi nh ngha li din mo trong nhng trng hp ny. 2.1.2 Mt v d v s dng ControlTemplate


9

Trong phn ny, chng ta cng xy dng mt ControlTemplate nh ngha mt ListBox m trong , cc ch mc c sp xp theo chiu ngang (thay v chiu dc nh thng thng) v c cc gc c un cong. Sau y l on m XAML minh ho:


10

Mc d liu 01 Mc d liu 02 Mc d liu 03 Mc d liu 04 Mc d liu 05

Theo cch trn, bn xy dng mt ControlTemplate thng qua s dng mt Style, c th l khai bo trong mt Setter cho thuc tnh Template. Mt cch khc na l bn c th gn trc tip thuc tnh Template ca mt iu khin cho mt ControlTemplate. Vi cch ny, ControlTemplate cn dng phi c xy dng trc, trong phn Resourse chng hn, v c gn kho nh danh thng qua x:Key, v sau c s dng nh mt ti nguyn tnh (khai bo StaticResource). Nh bn c th thy trong v d trn, lp ControlTemplate cng c thuc tnh TargetType nh i vi lp Style. Tuy nhin, cn lu rng, nu ta xy dng mt ControlTemplate c lp, vi thuc tnh TargetType c thit lp cho mt kiu iu khin no , th ControlTemplate khng c t ng p dng cho kiu iu khin ny. Cng lu rng thuc tnh TargetType l bt buc trong mt khai bo ControlTemplate nu nh template c cha thnh phn ContentPresenter. Trong v d trn, mt thuc tnh quan trng cn c l IsItemsHost. Thuc tnh IsItemsHost c s dng xc nh y l template ca mt iu khin cha cc mc con, v cc mc con s c sp xp trong . Thit lp thuc tnh ny bng true trong StackPanel c ngha l bt k mt mc no c thm vo ListBox s c xp vo StackPanel. Ch thuc tnh ny ch c trong kiu Panel. Kt qu ca on m trn nh minh ha trong hnh 7.3.


11

Hnh 7.3 Mt v d v xy dng v s dng mt ControlTemplate cho ListBox

2.2 DataTemplate2.2.1 DataTemplate l g? DataTemplate c s dng nh ra cch thc hin th cc i tng d liu. i tng DataTemplate c bit hu dng khi bn mc ni mt iu khin cha mc con (ItemsControl) kiu nh ListBox vi mt danh mc d liu. Khng c s nh hng c th, mt ListBox s ngm nh hin th cc i tng trong danh sch di dng chui k t. Vi vic s dng DataTemplate, chng ta c th nh khun dng hin th ca mi mc con trong ListBox vi nhiu c tnh trc quan nh mu sc, hnh nh, phng ch 2.2.2 Mt v d s dng DataTemplate Trong v d ny, thng tin v cc nhn vin trong mt vn phng c hin th s dng DataTemplate. Trc ht, ta phi nh ngha ngun d liu, c th y l danh sch nhn vin. lm iu ny, u tin, ta xy dng lp nhn vin (Person), n gin bao gm h tn (Name) v nh chn dung (ImageRef). Sau y l m C#:namespace Lesson7{ /** * nh ngha lp thnh phn d liu Person */ public class Person { public Person(string name, string imageRef)


12

{ this.Name = name; this.ImageRef = imageRef; } private string _name; public string Name { get { return _name; } set { _name = value; } } private string _imageRef; public string ImageRef { get { return _imageRef; } set { _imageRef = value; } } } }

Tip theo, ta xy dng lp cha danh sch nhn vin, gi s c tn Staffs. M lnh C# nh sau:namespace Lesson7{ public class Staffs { private List staffs; public IEnumerable StaffList { get { return staffs; } } public Staffs() { staffs = new List(); staffs.Add(new Person("Mary", "mary.jpg"));


13

staffs.Add(new Person("Johny", "johny.jpg")); staffs.Add(new Person("Olaf", "olaf.jpg")); staffs.Add(new Person("Scooby Doo", "scooby_doo.jpg")); } } }

Nh thy, lp Staffs thc cht cha ng mt danh sch c kiu Person (bin staffs). i tng ca lp ny khi c to lp s khi to mt danh sch nh trc gm 4 nhn vin c tn v ng dn nh tng ng (Mary, Johny, Olaf v Scooby Doo). Danh sch nhn vin c th truy nhp thng qua thuc tnh StaffList ca lp Staffs. Tip theo, ta xy dng giao din chnh bng m XAML:


14

Nh thy, phn t UI chnh c dng trn giao din l mt ItemsControl, loi iu khin cho php hin th nhiu mc hin th con trong n. Ni dung cc mc hin th c gn kt vi mt ngun d liu l thuc tnh StaffList ca mt i tng thuc lp Staffs c tn MyStaffList (ItemsSource="{Binding Source={StaticResource MyStaffList}, Path=StaffList}"). i tng d liu ny c khai bo trong phn Resources ca Window ().

Trong khi , vic s dng DataTemplate quy nh cch thc hin th ca mi mc d liu trong StaffList li c t trong mt file .xaml ring r c tn StaffDataTemplate.xaml (). Trong trng hp ny, mc d hon ton c th nh ngha DataTemplate trc tip trong mi iu khin hay trong Resources ca Window trong cng mt file .xaml, vic nh ngha DataTemplate trong mt file ring nh th ny cho php ta d dng sa i v ti s dng DataTemplate nhiu form khc nhau m khng phi sao chp li m lnh. Sau y l m XAML trong file StaffDataTemplate.xaml:


15

DataTemplate c nh ngha y ch c dng vi kiu d liu thuc lp Person (DataType="{x:Type local:Person}"). Cch thc hin th tn nhn vin c khai bo trong mt phn t TextBlock m thuc tnh Text c lin kt vi thuc tnh Name ca mi i tng Person (Text="{Binding Name}"). Trong khi , cch thc hin th nh ca nhn vin c khai bo trong mt phn t Image, trong , phn ngun nh c lin kt vi thuc tnh ImageRef (Source="{Binding Path=ImageRef,Converter={StaticResource imageConverter}}"). y, hin th hnh nh ca nhn vin thay v ng dn ti nh, ta xy dng mt lp chuyn i c tn PersonImageConverter. M lnh C# cho lp ny nh sau:Microsoft Vietnam DPE Team | WPF Bi 7: Kiu hin th (Style) v khun mu (Template) 16

namespace Lesson7{ public class PersonImageConverter : IValueConverter { #region IValueConverter Members /// /// Hm chuyn i t ng dn nh sang i tng Bitmap /// public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { string imageName = value.ToString(); Uri uri = new Uri(imageName, UriKind.RelativeOrAbsolute); BitmapFrame source = BitmapFrame.Create(uri); return source; } public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { throw new NotImplementedException(); } #endregion } }

Lu cc nh c t trong th mc cha file chy ca chng trnh. Kt qu l:


17

Hnh 7.4 Hin th danh sch nhn vin s dng DataTemplate

Cu hi n tp1. dng cho: a. b. Ch mt i tng iu khin UI duy nht Tt c cc i tng thuc mt lp UI c th (ListBox, TextBox, vv) Thnh phn Style quy nh cc thuc tnh hin th nh sn c th c p

quy nh bi thuc tnh TargetType trong Style nh (trong trng hp thnh phn Style khng c t kha nh danh x:Key) c. Cc i tng UI thuc cc lp khc nhau nhng cng k tha t mt lp UI (v d, Control) quy nh bi thuc tnh TargetType trong thnh phn Style nh; v c thuc tnh Style tham chiu n kha ca Style nh (trng hp Style c t kha nh danh x:Key) d. b hoc c tng ng vi tng trng hp Style nh c kha nh

danh x:Key hay khng


18

Tr li: d 2. Thuc tnh Triggers trong thnh phn Style quy nh: a. Hm x l s kin tng ng vi mt s kin xy ra trn i tngNhng thay i v thuc tnh hin th khi nhng iu kin nht nh trn i

UI c p dng Style b.tng UI c p dng Style c tho mn Tr li: b 3. S dng thuc tnh BaseOn, mt Style c th k tha t:

a. b.Tr li: a 4.

Duy nht mt Style c s Nhiu Style c s ty thuc vo gi tr thit lp cho BaseOn

Loi Trigger no sau y cho php thit lp nhiu iu kin cho mt dng thay

i thuc tnh hin th: a. b. c. EventTrigger MultiTrigger DataTrigger

Tr li: b 5. UI l g? Tr li: Style cho php thit lp gi tr cc thuc tnh hin th sn c (mu nn, phng ch, vn vn) ca mt lp i tng iu khin UI, trong khi ControlTemplate cho php quy nh li cu trc hin th ca lp i tng UI (hnh dng, cch sp xp cc phn t con, vn vn). 6. u? Trong mt ng dng WPF, khai bo Style v Template c th c t S khc bit gia Style v ControlTemplate p dng cho mt lp i tng


19

a.

t trong phn Resources ca bt k mc phn cp no trong cy trc Trong mt file .xaml ring v c tham chiu trong file giao din c thng qua khai bo ng dn trong phn t

quan trong cng file .xaml khai bo giao din b. s dng Style hoc Template

c. Tr li: c

Mt trong hai phng n trn

Ti liu Tham kho1. WPF Styles and Templates,

http://homepage.ntlworld.com/herring1/styletemp.html 2. WPF: A Beginner's Guide - Part 6 of n,

http://www.codeproject.com/KB/WPF/BeginWPF6.aspx 3. WPF Styles and Control Templates, http://en.csharp-

online.net/WPF_Styles_and_Control_Templates 4. .NET 3.0 Crash Course - Part 6: WPF Styles and Control Templates,

http://devlicio.us/blogs/rob_eisenberg/archive/2006/12/03/net-3-0-crash-course-part-6-wpfstyles-and-control-templates.aspx 5. WPF DataBinding, Styles and DataTemplates,

http://www.codegod.de/WebAppCodeGod/wpf-databinding-styles-and-datatemplatesAID406.aspx 6. Data Templating Overview, http://msdn.microsoft.com/en-

us/library/ms742521.aspx


20

Documents

WPF-Lesson 7 - Styles and Templates