Defining Styles With Keys

When you want to define more than one style for the same control type then you have to define it with a key and for this use x:Key property while defining the style. <Style TargetType=TextBox x:Key=TextBoxKey1> </Style> When you want to apply the style defined with a key to a control then you have to use Style property of that control using StaticResource markup extension. <TextBox Style={Static eso!rce TextBoxKey1" #$ />

eso!rce Dictionaries
n complex applications you may have large amount of application scoped resources. Specifying all these resources into the !pp.xaml file can turn into a maintenance issue very "uickly. W#$ provides a way to split resources into separate files and for this purpose follow the following steps. %. !dd Resource dictionary file to the pro&ect 'y right clicking on the pro&ect and choosing !dd (ew tem. n the new item dialog 'ox choose Resource)ictionary provide a name to it and click on add 'utton. Within the added Resource dictionary specify all resources and styles you want for the application and within the !pp.xaml file write the following within !pplication.Resources < eso!rceDictionary> < eso!rceDictionary$%erge&Dictionaries> < eso!rceDictionary So!rce='athofreso!rce&ictionaryfile/> </ eso!rceDictionary$%erge&Dictionaries> </ eso!rceDictionary> (xa)ple : the following example adds a resource dictionary file to the pro&ect with the name +yResources.xaml, defines styles within it with key and applies these styles to text'oxes on the window. %. !dd a resource dictionary to the pro&ect and provide following styles in it.
<Style x:Key=*TextBoxKey1* TargetType=*TextBox*> <Setter 'roperty=*+ont+a)ily* ,al!e=*-rial*/> <Setter 'roperty=*+ontSi.e* ,al!e=*1/*/> <Setter 'roperty=*+oregro!n&* ,al!e=*Bl!e*/> </Style> <Style x:Key=*TextBoxKey0* TargetType=*TextBox*> <Setter 'roperty=*+ont+a)ily* ,al!e=*Ti)es 1e2 o)an*/> <Setter 'roperty=*+ontSi.e* ,al!e=*03*/> <Setter 'roperty=*+oregro!n&* ,al!e=* e&*/> </Style>

*.

*.

Within !pp.xaml file within !pplication.Resources specify the following code.

< eso!rceDictionary> < eso!rceDictionary$%erge&Dictionaries> < eso!rceDictionary So!rce=*(:4W'+54Styles-n& eso!rces4Styles-n& eso!rces4%y eso!rces$xa)l*/> </ eso!rceDictionary$%erge&Dictionaries> </ eso!rceDictionary>

-.

!dd a window to the pro&ect place two text 'oxes on it with a canvas as follows.
<6an7as> <TextBox Wi&th=*189* :eight=*;3* Style=*{Static eso!rce TextBoxKey1"* 6an7as$<eft=*;8* 6an7as$Top=*0;* Text=*Win&o2s 'resentation +o!n&ation*/> <TextBox Wi&th=*189* :eight=*;3* Style=*{Static eso!rce TextBoxKey0"* 6an7as$<eft=*;8* 6an7as$Top=*50* Text=*Win&o2s 'resentation +o!n&ation*/> </6an7as>

Data Bin&ing in W'+ )ata 'inding is a means of connecting the elements of a user interface with the underlying data that application is interested in. )ata 'inding is declarative rather than programmatic. )ata 'inding is done with ./inding0 markup extension and data 'inding has a +ode property that has following possi'le values. =neWay T2oWay =neTi)e 1hanges to the source will update the target 1hanges to the source will update the target and vice versa. 2he target is set only when the application starts or when the datacontext is changed. 1hanges to the target will update the source

=neWayToSo!rce

(xa)ple: the following example takes a text'ox and 'inds its fontsi3e property to value property of a slider. !nother text'ox is taken and its text property is 'inded to value property of the same slider in two way mode. !dd a window to the pro&ect and write the following 4!+5 markup 'y taking a canvas.
<6an7as> <TextBox Wi&th=*0/>* :eight=*;/* Text=*%icrosoft 6orporation* +ont+a)ily=*-rial* +ontSi.e=*{Bin&ing (le)ent1a)e=S1?'ath=,al!e"* +oregro!n&=*Bl!e* 6an7as$<eft=*118* 6an7as$Top=*;0* /> <Sli&er 1a)e=*S1* %ini)!)=*03* %axi)!)=*133* Tic@+reA!ency=*13* Tic@'lace)ent=*Botto) ight* Wi&th=*0/>* 6an7as$<eft=*81* 6an7as$Top=*B0* /> <TextBox 1a)e=*Si.e* Wi&th=*;/* :eight=*;/* Text=*{Bin&ing (le)ent1a)e=S1?'ath=,al!e?%o&e=T2oWay"* 6an7as$<eft=*;>0* 6an7as$Top=*B0* +ont+a)ily=*-rial* +ontWeight=*Bol&* +oregro!n&=*Bl!e*/> </6an7as>

Data Te)plates )ata templates are used to specify how the data will 'e visuali3ed in user interface. 2he following examples displays data from a ta'le )6#2 availa'le in a data'ase +7)/ of S85 Server using data set in a list 'ox 'y defining a data template for the list 'ox and 'y using data 'inding concept. %. !dd a window to the pro&ect and design it as follows.

<Win&o2$ eso!rces> <DataTe)plate x:Key=*T1*> <Stac@'anel %argin=*/*> <Doc@'anel> <TextBloc@ Text=*D('T1=* +ont+a)ily=*-rial Blac@* +ontSi.e=*1/* +oregro!n&=* e&* Doc@'anel$Doc@=*<eft*/> <TextBloc@ Text=*{Bin&ing D('T1="* +ont+a)ily=*-rial Blac@* +ontSi.e=*1/* +oregro!n&=*Bl!e* Doc@'anel$Doc@=*<eft*/> </Doc@'anel> <Doc@'anel> <TextBloc@ Text=*D1-%(* +ont+a)ily=*-rial Blac@* +ontSi.e=*1/* +oregro!n&=* e&* Doc@'anel$Doc@=*<eft*/> <TextBloc@ Text=*{Bin&ing D1-%("* +ont+a)ily=*-rial Blac@* +ontSi.e=*1/* +oregro!n&=*Bl!e* Doc@'anel$Doc@=*<eft*/> </Doc@'anel> <Doc@'anel> <TextBloc@ Text=*<=6* +ont+a)ily=*-rial Blac@* +ontSi.e=*1/* +oregro!n&=* e&* Doc@'anel$Doc@=*<eft*/> <TextBloc@ Text=*{Bin&ing <=6"* +ont+a)ily=*-rial Blac@* +ontSi.e=*1/* +oregro!n&=*Bl!e* Doc@'anel$Doc@=*<eft*/> </Doc@'anel> </Stac@'anel> </DataTe)plate> </Win&o2$ eso!rces> <Cri&> <<istBox Wi&th=*0/3* :eight=*0/3* Dte)sSo!rce=*{Bin&ing TaElesF3G"* Dte)Te)plate=*{Static eso!rce T1"* 1a)e=*<1*/> </Cri&>

*.

Write using statements in the code for the namespaces System.)ata System.)ata.S"l1lient and write the following code within the window loaded event.
SAl6onnection 6n = ne2 SAl6onnectionH*ser7er=$I&ataEase=)y&EI!i&=saIp2&=10;*JI SAlData-&apter Da = ne2 SAlData-&apterH*select K fro) &ept*? 6nJI DataSet Ds = ne2 DataSetHJI Da$+illHDs? *Dept*JI <1$Data6ontext = DsI

and

Triggers in WPF
2riggers are implemented as part of styles, and indicate a trigger condition and a new set of setters to apply when the trigger condition is met. +ouseover effects are a very common application of triggers. 2riggers can fully 'e expressed using 4!+5, eliminating the need to write code for many simple effects. 2here are three types of triggers in W#$: %. *. #roperty 2riggers 9 run when the value of a dependency property changes )ata 2riggers 9 run when the value of any .(62 property changes, using data 'inding

-.

6vent 2riggers 9 run when a routed event occurs

2riggers are implement as part of a style using the :Style.2riggers; property element, and a series of :2rigger;,:)ata2rigger;, or :6vent2rigger; elements.

Example : the following example applies an effect for the button whenever mouse is over it using property trigger. Add a window to the project and write following XAML markup in it.
<Stac@'anel ,ertical-lign)ent=*6enter*> <Stac@'anel$ eso!rces> <Style TargetType=*B!tton*> <Style$Triggers> <Trigger 'roperty=*Ds%o!se=7er* ,al!e=*Tr!e*> <Setter 'roperty=*Bit)ap(ffect*> <Setter$,al!e> <=!terClo2Bit)ap(ffect Clo26olor=*Lello2* Clo2Si.e=*1/*/> </Setter$,al!e> </Setter> </Trigger> </Style$Triggers> </Style> </Stac@'anel$ eso!rces> <B!tton Wi&th=*133* :eight=*/3* 6ontent=*B!tton* %argin=*03*/> <B!tton Wi&th=*133* :eight=*/3* 6ontent=*B!tton* %argin=*03*/> </Stac@'anel>

Example : the following example plays audio video in media element control using event triggers without writing code. Add a window to the project and write the following XAML markup in it.
<Cri&> <Cri&$ o2Definitions> < o2Definition :eight=*/K*/> < o2Definition/> </Cri&$ o2Definitions> <%e&ia(le)ent 1a)e=*%e* <oa&e&Beha7ior=*%an!al* Cri&$ o2=*3*/> <Stac@'anel :ori.ontal-lign)ent=*6enter* =rientation=*:ori.ontal* Cri&$ o2=*1*> <B!tton 1a)e=*Btn=pen* Wi&th=*5/* :eight=*;/* 6ontent=*=pen* %argin=*5* 6lic@=*Btn=penM6lic@* /> <B!tton 1a)e=*Btn'lay* Wi&th=*5/* :eight=*;/* 6ontent=*'lay* %argin=*5*/> <B!tton 1a)e=*Btn'a!se* Wi&th=*5/* :eight=*;/* 6ontent=*'a!se* %argin=*5*/> <B!tton 1a)e=*Btn es!)e* Wi&th=*5/*

:eight=*;/* 6ontent=* es!)e* %argin=*5*/> <B!tton 1a)e=*BtnStop* Wi&th=*5/* :eight=*;/* 6ontent=*Stop* %argin=*5*/> <Stac@'anel$Triggers> <(7entTrigger o!te&(7ent=*B!tton$6lic@* So!rce1a)e=*Btn'lay*> <BeginStoryEoar& 1a)e=*BS*> <StoryEoar&> <%e&iaTi)eline 1a)e=*%T* StoryEoar&$Target1a)e=*%e*/> </StoryEoar&> </BeginStoryEoar&> </(7entTrigger> <(7entTrigger o!te&(7ent=*B!tton$6lic@* So!rce1a)e=*Btn'a!se*> <'a!seStoryEoar& BeginStoryEoar&1a)e=*BS*/> </(7entTrigger> <(7entTrigger o!te&(7ent=*B!tton$6lic@* So!rce1a)e=*Btn es!)e*> < es!)eStoryEoar& BeginStoryEoar&1a)e=*BS*/> </(7entTrigger> <(7entTrigger o!te&(7ent=*B!tton$6lic@* So!rce1a)e=*BtnStop*> <StopStoryEoar& BeginStoryEoar&1a)e=*BS*/> </(7entTrigger> </Stac@'anel$Triggers> </Stac@'anel> </Cri&>

Write the following code within the open button click event after adding reference to !ystem.Windows."orms# and writing using statement for it.
=pen+ileDialog =f& = ne2 =pen+ileDialogHJI =f&$DnitialDirectory = *(44,i&eos*I if H=f&$Sho2DialogHJ == Syste)$Win&o2s$+or)s$Dialog es!lt$=KJ { %T$So!rce = ne2 NriH=f&$+ile1a)eJI "

2 D Drawings in WPF
W$" provides the following %& &rawings. Line : 'o draw a line use (line) tag that has the following properties. X1 and Y1 X2 and Y2 Stroke to specify the starting point of the line to specify the ending point of the line color of the line thickness of the line

StrokeThi kness

StrokeDash!rra" #e tangle

&ash !tyle of the line

: 'o draw a rectangle use (rectangle) tag that has the following properties. width and height of the rectangle hori*ontal and vertical radius of the rectangle to make the corners rounded corners

Width and height

#adi$sX and #adi$sY

Fill Stroke StrokeThi kness StrokeDash!rra"

color to fill in the rectangle

Ellipse : 'o draw an ellipse use (+llipse) tag that has the properties same as (rectangle) tag. Pol"Line Points Stroke StrokeThi kness StrokeDash!rra" Fill 'he following example draws various %& drawings in a window.
<Stac@'anel> <<ine O1=*03* L1=*03* O0=*0/3* L0=*03* Stro@eThic@ness=*/* Stro@e=*Bl!e* %argin=*13* Stro@eDash-rray=*5?;*/> < ectangle Wi&th=*033* :eight=*133* Stro@e=*Bl!e* Stro@eThic@ness=*/* %argin=*13* +ill=*<ightCray*/> < ectangle Wi&th=*033* :eight=*133* Stro@e=*Bl!e* Stro@eThic@ness=*/* %argin=*13* +ill=*<ightCray* a&i!sO=*03* a&i!sL=*13*/> <(llipse Wi&th=*033* :eight=*133* Stro@e=*Bl!e* Stro@eThic@ness=*/* %argin=*13* +ill=*<ightCray*/> <(llipse Wi&th=*1/3* :eight=*1/3* Stro@e=*Bl!e* Stro@eThic@ness=*/* %argin=*13* +ill=*<ightCray*/> </Stac@'anel>

: 'o draw polyline use (polyline) tag that has the following attributes to specify the points to draw the poly line.

'he following example draws a poly line and also sine curve using poly line.
%. Write the following 4!+5 markup for the window.
<Stac@'anel> <'olyline Stro@e=*Bl!e* Stro@eThic@ness=*/* 'oints=*13?>3 >3?/ 113?>3 1>3?/ 013?>3* %argin=*1/*/> <'olyline Stro@e=*Bl!e* Stro@eThic@ness=*/* 'oints=*13?>3 >3?/ 113?>3 1>3?/ 013?>3 13?>3* +ill=*Col&* %argin=*1/*/> <'olyline Stro@e=*Bl!e* Stro@eThic@ness=*/* 1a)e=*'1* %argin=*1/*/> </Stac@'anel>

%. Write the following code within the constructor of the window in code.
p!Elic 'oly<ine(xa)pleHJ { Dnitiali.e6o)ponentHJI for Hint i = 3I i <= 53I iPPJ { &o!Ele O = %ath$'D K iI &o!Ele L = 93 P ;3 K %ath$SinHO / 13JI '1$'oints$-&&Hne2 'ointHO? LJJI " "

!nimations in WPF
Animation implementation is very easy in W$" when compared to Windows "orms as it provides a number of pre defined types for animations that are in the namespace !ystem.Windows.media.Animation#. Animations are classified into following three types. Linear %nterpolation animation ke" &rame animation path'(ased animation

Linear %nterpolation !nimation represents the animation that vary properties gradually between starting and ending values +xample classes are &oubleAnimation and ,olorAnimation classes are examples )e" Frame animation change property values abruptly at specified times +xample classes are !tringAnimation-sing.ey"rames and /bjectAnimation-sing.ey"rames

Path'(ased animations change value according to a shape described using pathgeometry object and they are used for moving an element along a path. +xample classes are &oubleAnimation-sing$ath and $ointAnimation-sing$ath classes are examples. Example : the following example moves a rectangle using linear interpolation animation Add a window to the project0 write the following markup in it and then write the following code within the constructor of the window after writing using statement for namespace of animations.
<6an7as> < ectangle Stro@e=*Bl!e* Stro@eThic@ness=*/* +ill=*<ightCray* Wi&th=*133* :eight=*133* 1a)e=* 1*/> </6an7as>

p!Elic Win&o21HJ { Dnitiali.e6o)ponentHJI Do!Ele-ni)ation D- = ne2 Do!Ele-ni)ationHJI D-$+ro) = 3I D-$To = 1B3I D-$ epeatBeha7ior = epeatBeha7ior$+ore7erI D-$-!to e7erse = tr!eI D-$D!ration = Ti)eSpan$+ro)Secon&sH13JI 1$Begin-ni)ationH6an7as$<eft'roperty? D-JI 1$Begin-ni)ationH6an7as$Top'roperty? D-JI "

Example : the following example changes the background color of the button from red to yellow using coloranimation Add a window to the project0 write the following markup for the window and then write the next code within the constructor of the window after writing using statement for the Animation namespace.
<6an7as> <B!tton Wi&th=*103* :eight=*103* 6ontent=*6olor -ni)ation* 6an7as$<eft=*58* 6an7as$Top=*>;*> <B!tton$Bac@gro!n&> <Soli&6olorBr!sh x:1a)e=*ScE*/> </B!tton$Bac@gro!n&> </B!tton> </6an7as>

p!Elic 6olor-ni)ation(xa)pleHJ { Dnitiali.e6o)ponentHJI 6olor-ni)ation 6- = ne2 6olor-ni)ationH6olors$ e&?6olors$Lello2? ne2 D!rationHne2 Ti)eSpanH3? 3? 13JJJI 6-$ epeatBeha7ior = epeatBeha7ior$+ore7erI 6-$-!to e7erse = tr!eI ScE$Begin-ni)ationHSoli&6olorBr!sh$6olor'roperty? 6-JI "

Example : the following example draws a path using pathgeometry and makes an ellipse drawn using +llipsegeometry using path based animation. Add a window to the project0 write the following markup for the window and then write the next code within the constructor of the window after writing using statement for the Animation namespace.
<6an7as> <'ath Stro@e=*Bl!e* Stro@eThic@ness=*;*> <'ath$Data> <'athCeo)etry x:1a)e=*'1* +ig!res=*%/3?103 65/?03 15/?03 033?103 003?003 ;0/?003 ;/3?103 ;0/?03 003?03 033?103 15/?003 5/?003 /3?103*/> </'ath$Data> </'ath> <'ath Stro@e=*Col&enro&* +ill=*Col&*> <'ath$Data> <(llipseCeo)etry a&i!sO=*13* a&i!sL=*13* 6enter=*/3?103* x:1a)e=*61*/> </'ath$Data> </'ath> </6an7as>

p!Elic 'ath-ni)ationHJ { Dnitiali.e6o)ponentHJI 'oint-ni)ationNsing'ath '- = ne2 'oint-ni)ationNsing'athHJI '-$'athCeo)etry = '1I '-$ epeatBeha7ior = epeatBeha7ior$+ore7erI '-$D!ration = Ti)eSpan$+ro)Secon&sH13JI 61$Begin-ni)ationH(llipseCeo)etry$6enter'roperty? '-JI "