Anda di halaman 1dari 9

12/22/11

8,353,854 membe

WPF/Silverlight: Step By Step Guide to MVVM - CodeProject


and g o ing! (39,541 online) Member 7808084 473 Sign out

Home

A icle

Q ick An

Di c

ion

Lea ning Zone

Fea

Help!

The Lounge

Search

Platforms, Frameworks & Libraries Windows Presentation Foundation General

WPF/Sil e ligh : S ep B S ep G ide o MVVM


By P adeepDha an | 19 Jul 2011

Licence First Posted Views Downloads Bookmarked

C POL 6 J l 2011 11,722 1,036 68 ime

Part of The WPF / Sil e ligh Zone sponsored by

See Al o
More like this More by this author

.NET3.5 C # .NET Dev XAML WPF Beginner Intermediate C #4.0 C #3.5 , +

This article aims to provide basic overview of MVVM design pattern which is very popular amongst WPF/Silverlight application developers. This is a very basic practical tutorial and aims at providing a step by step guide to people who are new to MVVM.
20

A icle

B o

e Code

S a

Re i ion (10)

4.50 (14 votes)

Spon o ed Link
Telerik Test Studio Telerik Test Studio is a set of automated testing tools that offer a... www.telerik.com Virtualizing Wrap Panel .NET for WPF, Silverlight & Windows7 The control is a "UI Virtualization" capable WrapPanel control for the... www.binarymission.co.uk

I o email add e OK? You are signed up for our newsletters but your email address is either unconfirmed, or has not been reconfirmed in a long time. Please click here to have a confirmation email sent so we can confirm your email address and start sending you newsletters again. Alternatively, you can update your subscriptions.

Download demo - 17.41 KB Download demo code - 23.37 KB

In od c ion
MVVM is the short form for Model-View-ViewModel pattern widely used in WPF/Silverlight programming. This design pattern was introduced by John Gossman primarily for segregation and easy testability of View, ViewModel and Model.

Let me first explain the h ee pa

of MVVM.

Model
Model as we all know represents the data layer.

Vie
View represents the UI or the looks.

Vie

Model

View Model is the middle man and its responsibility is to tweak the data from model in such a way that it can be consumed by the View. For some people, MVVM is a steep learning curve. Let me assure you that it's very easy if you keep four things in mind. You can also call these four steps as the GURU MANTRA of MVVM.

See Al o...
4 Simple Steps to C onsume WC F Service using Silverlight Understanding Basics of UI Design

www.codeproject.com/KB/WPF/StepByStepGuideToMVVM.aspx

1/10

12/22/11

WPF/Silverlight: Step By Step Guide to MVVM - CodeProject


Pattern MVC , MVP and MVVM XAMLFinance A C ross-platform WPF, Silverlight & WP7 Application Silverlight and WPF Behaviours and Triggers - Understanding, Exploring And Developing Interactivity using C #, Visual Studio and Blend Using the Microsoft Desktop Stack Part 1: Setting up SQL C ompact 4.0 for Private Deployment Host Silverlight C ontrol in C ++ using ATL Silverlight MVVM Lib and FileUploader Using HttpHandler A Sample Silverlight 4 Application Using MEF, MVVM, and WC F RIA Services - Part 2 Switching to MVVM Beginners Guide to Silverlight 4 PathListBox C ontrol (PartII) Detecting Refresh or Postback in ASP.NET Programmatic Silverlight Tree View C ontrol Node Expansion using View Model (MVVM) A Quick Guide to Silverlight Ribbon C ontrols (Part - 1) Building WPF Applications with SelfTracking Entity Generator - Project Setup

1. T o ha e minim m code behind. That is your Vie . aml.cs that is supposed to have almost no code. Not even event handlers. This does not mean absolute zero code is a must, what I mean to say is that we should have minimum code behind. An exception would be cases like where the logic is pure Vie oriented (and is very specific to that view only) and has nothing to do with V e M d l or M d l or iwoe oe even other Vie s of same Vie Model. For example, on mouse over you want to slide in the tooltip, you may opt to do it in aml.cs (of course you could have also done it by using trigger in xaml itself, but just cooking it as an example). There is no harm in having such code behind as it does not have anything to do with V e M d l or iwoe Mdl oe. Having said this, I would like to mention a few e cep ion to the above rule. a. Dependency properties will always be part of code behind, hence it does not mean that you should avoid dependency property in MVVM. b. Sometimes you have to use third party controls which are not MVVM compliant. In such cases too, you end up having some code behind. 2. All E en o ac ion ho ld be ea ed a Command. Your question would be how to do that, my control has click event behavior but no command. My answer is there are several ways to do that. All this will be explained in detail in the rest of the article. 3. Vie Model i he Da aCon e of Vie . So neither V e has instance iw V e M d l and nor does V e M d l have instance of V e . It's incorrect and iwoe iwoe iw ugly to type cast V e . a a o t x to V e M d l This will break your true iwDtCnet iwoe. MVVM model. 4. De ign Vie Model and Vie independen of each o he . This means that you must design the view by keeping in mind that if tomorrow the view is supposed to be replaced with another view (another look and feel), it should not require the V e M d l or model to change. Hence do not code anything in V e M d l that is iwoe iwoe specific to the view and also do not code anything in the view that is specific to VeMdl iwoe.

Articles Archive (Silverlight): March 2010 to August 2010

The Dail In ide


30 free programming books Daily News: Signup now.

Home o k Befo e S a ing MVVM


1. 2. 3. 4. Learn and clear concepts on Databinding. Learn how to use Dependency Properties. Learn use of Converters. Last but not the least, I o i y r p r y h n e . NtfPoetCagd

Let's start of with the basics first: Da a Binding: Data binding is the process that establishes a connection between the application UI and business logic. If the binding has the correct settings and the data provides the proper notifications, then, when the data changes its value, the elements that are bound to the data reflect changes automatically. Data binding can also mean that if an outer representation of the data in an element changes, then the underlying data can be automatically updated to reflect the change. For example, if the user edits the value in a T x B x element, the underlying data value is automatically updated to reflect that eto change. Dependenc P ope : Dependency properties are just like normal CLR properties, but with a X-factor. The X-factor is that these properties have inbuilt support for data binding,
www.codeproject.com/KB/WPF/StepByStepGuideToMVVM.aspx 2/10

12/22/11

WPF/Silverlight: Step By Step Guide to MVVM - CodeProject

animation, styling, value expressions, property validation, per-type default values. At the end of the day, we need dependency properties to be able to save state of UI Elements. It won't be incorrect to say that dependency property will always be part of V e 's code iw behind and normal (CLR) properties are more likely to be part of V e M d l or M d l iwoe oe. Just like there is a syntax to define CLR properties (setter, getter), there is a syntax for dependency property as well. The syntax is:
C ollapse | C opy C ode

pbi casMSmlCnrl:Cnrl ulc ls yapeoto oto { / Se 1 Rgse tedpnec poet / tp : eitr h eedn rpr pbi sai raol DpnecPoet SeilrsPoet = ulc ttc edny eednyrpry pcaBuhrpry DpnecPoet.eitr"pcaBuh,tpo(rs) eednyrpryRgse(Seilrs" yefBuh, tpo(yapeoto); yefMSmlCnrl) / Se 2 Poiestgtacsosfrtepoet / tp : rvd e/e cesr o h rpr pbi BuhSeilrs ulc rs pcaBuh { gt{rtr (rs)aeGtau(pcaBuhrpry;} e eun Buhbs.eVleSeilrsPoet) st{bs.eVleSeilrsPoet,vle;} e aeStau(pcaBuhrpry au) } }

Please note that there are other ways to declare setter and getter for dependency properties. Also note that there several ways and combination to register a dependency properties like registering it as attached property (which in turn makes the dependency property inheritable its value down the visual tree. Example if you change the font of the G i control, all its children also start showing the font of the parent G i ), etc. rd rd Con e e : Data Conversion or Value Conversion is generally required when your view needs that data to be slightly tweaked from what it is currently. For example, in the view you want to show traffic light kind of signals based on the state of your project. That is green if your project is from 8 to 10, yellow if its rating is 5-7 and red if it s less. Here there is no point keeping a variable corresponding to the color in your V e M d l looks iwoe, ugly. Here the showing project rating as color is a pure V e requirement. Tomorrow, if iw this view is to be replaced with another view where you show project rating as number, your color variable will turn out to be a complete waste. So how do you do that, the solution is simple use Value converters, Value converters are purely part of V e , it s the iw view who wants the color to be green, yellow or red and V e M d l doesn t care about iwoe the color. A value converter must derive from I a u C n e t r or Vleovre I u t V l e o v r e (in case you have multiple values to be used as input. Like in MliauCnetr the traffic light example, let s suppose your green color is to be shown when project is healthy and deadline is within acceptable limit. So we have two inputs, rating and deadline).
C ollapse | C opy C ode

[auCneso(yefPoet,tpo(rs)] Vleovrintpo(rjc) yefBuh) pbi casClrovre :IauCnetr ulc ls ooCnetr Vleovre { pbi ojc Cnetojc vle Tp treTp, ulc bet ovr(bet au, ye agtye ojc prmtr Cluenoclue bet aaee, utrIf utr) { Poetpoet=(rjc)au; rjc rjc Poetvle i (rjc.aig> 8/ishat i rtn i 8t 1 f poetRtn = )/t elh f aig s o 0 rtr nwSldooBuhClr.re) eun e oiClrrs(oosGen; es i (rjc.aig> 5 )/t o i rtn i 5t 7 le f poetRtn = ) /is k f aig s o rtr nwSldooBuhClr.elw; eun e oiClrrs(oosYlo) es /ls isuhat le /es t nelh rtr nwSldooBuhClr.e) eun e oiClrrs(oosRd; } pbi ojc Cnetakojc vle Tp treTp, ulc bet ovrBc(bet au, ye agtye ojc prmtr Cluenoclue bet aaee, utrIf utr) { rtr nl; eun ul } }

INo if P ope Changed: I o i y r p r y h n e has been there since Winform NtfPoetCagd arena. It s not a new concept in WPF/Silverlight. It s an interface that you would like to implement in your V e M d l to notify your V e that something got changed. iwoe iw Observable Collection and Dependency Property are some which have inbuilt notification mechanism. For such properties, you may not require to raise the notification through code.
C ollapse | C opy C ode

pbi casSmVeMdl:VeMdlae Ioi PoetCagd ulc ls oeiwoe iwoeBs, Ntf rpr hne {

www.codeproject.com/KB/WPF/StepByStepGuideToMVVM.aspx

3/10

12/22/11

WPF/Silverlight: Step By Step Guide to MVVM - CodeProject


. . piaeMdl _eetdoue rvt oue SlceMdl; pbi Mdl SlceMdl ulc oue eetdoue { gt e { rtr _eetdoue eun SlceMdl; } st e { _eetdoue=vle SlceMdl au; Rierpr Cagd"eetdoue) asPoet hne(SlceMdl"; } }

#einIoi PoetCagd rgo Ntf rpr hne pbi eetPoetCagdvnHnlrPoetCagd ulc vn rpryhneEetade rpryhne; poetdvi Rierpryhne(tigpoetNm) rtce od asPoetCagdsrn rpryae { vrhnlr=PoetCagd a ade rpryhne; i (ade ! nl) f hnlr = ul { hnlrti,nwPoetCagdvnAg(rpryae) ade(hs e rpryhneEetrspoetNm); } } #nrgo edein

Coming back to the real thing, let's start of with the Model: Rest of the post, I shall explain by means of a demo application for displaying employee information. Model: As the name suggests, it holds the data's model. Some people prefer to call model as data model. All your database select queries will first populate the data model which in turn will be used by V e M d l and V e . As an example, I hereby demonstrate an iwoe iw E p o e class. This class has properties corresponding to my data fields like name, mlye notes, age, etc.
C ollapse | C opy C ode

pbi casEpoe :IaaroIf,Ioiyrpryhne ulc ls mlye DtErrno NtfPoetCagd { #einCntutr rgo osrco pbi Epoe(tigi =",srn nm =",un ae=0 srn nts= ulc mlyesrn d " tig ae " it g , tig oe ") " { _d=i; i d _ae=nm; nm ae _g =ae ae g; _oe =nts nts oe; } #nrgo edein #einPoete rgo rpris piaesrn _d=srn.mt; rvt tig i tigEpy pbi srn I ulc tig D { gt{rtr _d } e eun i; st e { _d=vle i au; Rierpryhne(I"; asPoetCagd"D) } } piaesrn _ae=srn.mt; rvt tig nm tigEpy pbi srn Nm ulc tig ae { gt{rtr _ae } e eun nm; st e { _ae=vle nm au; Rierpryhne(Nm"; asPoetCagd"ae) } } piaeun _g =0 rvt it ae ; pbi un Ae ulc it g {

www.codeproject.com/KB/WPF/StepByStepGuideToMVVM.aspx

4/10

12/22/11

WPF/Silverlight: Step By Step Guide to MVVM - CodeProject


gt{rtr _g;} e eun ae st e { _g =vle ae au; Rierpryhne(Ae) asPoetCagd"g"; } } piaesrn _oe =srn.mt; rvt tig nts tigEpy pbi srn Nts ulc tig oe { gt{rtr _oe;} e eun nts st e { _oe =vle nts au; Rierpryhne(Nts) asPoetCagd"oe"; } } #nrgo edein #einIaaroIf rgo DtErrno pbi srn Err ulc tig ro { gt e { rtr ti[tigEpy; eun hssrn.mt] } } pbi srn ti[tigpoetNm] ulc tig hssrn rpryae { gt e { srn rsl =srn.mt; tig eut tigEpy poetNm =poetNm ? srn.mt; rpryae rpryae ? tigEpy i (rpryae= srn.mt | poetNm = "D) f poetNm = tigEpy | rpryae = I" { i (tigINlOEpyti.D) f srn.sulrmt(hsI) { rsl ="mlyeI i ivld I cno b nl o bak; eut Epoe D s nai. D ant e ul r ln" } es i (ytmTx.euaEpesosRgxIMth le f Sse.etRglrxrsin.ee.sac (hsI,"/@?}} ]) ti.D [!#/[{ ") { rsl ="mlyeI i ivld eut Epoe D s nai. I cno hv seilcaatr" D ant ae pca hrces; } } es i (rpryae= "ae) le f poetNm = Nm" { i (tigINlOEpyti.ae) f srn.sulrmt(hsNm) { rsl ="aei ivld I cno b nl o bak; eut Nm s nai. D ant e ul r ln" } } es i (rpryae= "g" le f poetNm = Ae) { i (g >10| Ae<0 f Ae 5 | g ) { rsl ="g i ivld Aesol b bten0ad10; eut Ae s nai. g hud e ewe n 5" } } rtr rsl; eun eut } } #nrgo edein #einIoiyrpryhne rgo NtfPoetCagd [il:Nneilzd fed oSraie] pbi eetPoetCagdvnHnlrPoetCagd ulc vn rpryhneEetade rpryhne; poetdvi Rierpryhne(tigpoetNm) rtce od asPoetCagdsrn rpryae { vrhnlr=PoetCagd a ade rpryhne; i (ade ! nl) f hnlr = ul { hnlrti,nwPoetCagdvnAg(rpryae) ade(hs e rpryhneEetrspoetNm); } } #nrgo edein

www.codeproject.com/KB/WPF/StepByStepGuideToMVVM.aspx

5/10

12/22/11
}

WPF/Silverlight: Step By Step Guide to MVVM - CodeProject

In have inherited my model from I a a r o I f and I o i y r p r y h n e , DtErrno NtfPoetCagd but the same is not mandator hile designing our model. the same is done for data validation implementation and not MVVM. There is not much to explain in the model, let's proceed to the next level V e M d l iwoe. Vie Model: In the beginning of this blog, I had mentioned that V e M d l is nothing iwoe but D t C n e t of V e . Since V e M d l responsibility is to play mediator aaotx iw i w o e 's between V e and M d l it will always have an instance of M d l class and to reflect iw oe, oe change in model, it will notify V e via notification (I o i y r p r y h n e , etc.) iw NtfPoetCagd or databinding. All Commands of the V e are processed/handled here. Keep in mind that iw a V e M d l may have multiple views, so never code anything which is specific to a iwoe given view here. Considering our example for E p o e , in our view we have a list of mlye employees on the left side and selected employees details on right side, so our v e M d l which is supposed to be D t C n e t of View, must provide a list of iwoe aaotx employees and a property to represent selection. Hence we end up having two properties in our v e M d l E p o e s and S l c e E p o e . iwoe, mlye eetdmlye
C ollapse | C opy C ode

pbi casEpoeLsVeMdl:Ioiyrpryhne ulc ls mlyeitiwoe NtfPoetCagd { pbi OsralCleto<mlye Epoes{gt piaest } ulc bevbeolcinEpoe> mlye e; rvt e; pbi EpoeLsVeMdl) ulc mlyeitiwoe( { Epoes=MVDm.aaeprEpoeDtHle.okmlyeDt(; mlye VMeoDtHle.mlyeaaeprCoEpoesaa) } piaeEpoe _eetdmlye rvt mlye SlceEpoe; pbi Epoe SlceEpoe ulc mlye eetdmlye { gt e { rtr _eetdmlye eun SlceEpoe; } st e { _eetdmlye=vle SlceEpoe au; Rierpryhne(SlceEpoe"; asPoetCagd"eetdmlye) } } #einIoiyrpryhne rgo NtfPoetCagd [il:Nneilzd fed oSraie] pbi eetPoetCagdvnHnlrPoetCagd ulc vn rpryhneEetade rpryhne; poetdvi Rierpryhne(tigpoetNm) rtce od asPoetCagdsrn rpryae { vrhnlr=PoetCagd a ade rpryhne; i (ade ! nl) f hnlr = ul { hnlrti,nwPoetCagdvnAg(rpryae) ade(hs e rpryhneEetrspoetNm); } } #nrgo edein }

Vie : View is the look and feel. View is represented by aml and its aml.cs files. All your animations, decorations, themes, controls, etc. sit here. The view is to be coded keeping in mind that tomorrow if you want to display your data in a different way, it should not require you to touch the V e M d l or M d l at all. For example, if you want to display iwoe oe your list of employees in a d t g i or l s b x or tree or even tabs, it should not be aard ito a matter of concern for your V e M d l or M d l it s purely the job of V e to change iwoe oe, iw the look and feel because at the end of the day it s the same data that has to be presented in slightly different way. In our example of E p o e list, V e has a mlye iw L s V e of left side and selected employees details are displayed on the right side. So itiw for this, we have an aml and aml.cs in place. But the aml.cs hardly has anything significant; hence code for it can be ignored for now.
Emplo eeLi Vie . aml
C ollapse | C opy C ode

<idwxCas"VMeoVe.mlyeitiw Wno :ls=MVDm.iwEpoeLsVe" xlsht:/cea.irsf.o/if/06xm/rsnain mn=tp/shmsmcootcmwnx20/alpeetto xlsxht:/cea.irsf.o/if/06xm mn:=tp/shmsmcootcmwnx20/al xlsV=crnmsaeMVDm.iwoe" mn:M"l-aepc:VMeoVeMdl xlsVe=crnmsaeMVDm.iw mn:iw"l-aepc:VMeoVe" Tte"mlyeVe"Hih=30 Wdh"2" il=Epoe iw egt"0" it=70> <idwDtCnet Wno.aaotx>

www.codeproject.com/KB/WPF/StepByStepGuideToMVVM.aspx

6/10

12/22/11

WPF/Silverlight: Step By Step Guide to MVVM - CodeProject

<MEpoeLsVeMdl> V:mlyeitiwoe/ <Wno.aaotx> /idwDtCnet <rd Gi> <rdClmDfntos Gi.ouneiiin> <ouneiiinWdh"5* / ClmDfnto it=12" > <ouneiiinWdh"6* / ClmDfnto it=58" > <Gi.ouneiiin> /rdClmDfntos <itiwxNm=lsEp LsVe :ae"itm" Iesore"BnigEpoes UdtSucTigrPoetCagd" tmSuc={idn mlye, paeorerge=rpryhne} Gi.oun""HrznaAinet"tec"VriaAinet"tec" rdClm=0 oiotllgmn=Srth etcllgmn=Srth SlceVle"BnigSlceEpoe, eetdau={idn eetdmlye UdtSucTigrPoetCagd" paeorerge=rpryhne}> <itiwVe> LsVe.iw <rdiw GiVe> <rdiwounDslyebridn={idn I} GiVeClm ipaMmeBnig"Bnig D" Hae=I"Wdh"0 / edr"D it=4" > <rdiwounDslyebridn={idn Nm} GiVeClm ipaMmeBnig"Bnig ae" Hae=Nm"Wdh"0"> edr"ae it=10/ <GiVe> /rdiw <LsVe.iw /itiwVe> <LsVe> /itiw <iwEpoeVe Gi.oun"" Ve:mlyeiw rdClm=1 DtCnet"BnigSlceEpoe, aaotx={idn eetdmlye UdtSucTigrPoetCagd"> paeorerge=rpryhne}/ <Gi> /rd <Wno> /idw Emplo eeVie . aml
C ollapse | C opy C ode

<sroto xCas"VMeoVe.mlyeiw UeCnrl :ls=MVDm.iwEpoeVe" xlsht:/cea.irsf.o/if/06xm/rsnain mn=tp/shmsmcootcmwnx20/alpeetto xlsxht:/cea.irsf.o/if/06xm mn:=tp/shmsmcootcmwnx20/al xlsm=tp/shmsoexlomt.r/akpcmaiiiy20 mn:cht:/cea.pnmfrasogmru-optblt/06 xlsw=crnmsaeSse.idw.otos mn:c"l-aepc:ytmWnosCnrl; asml=rsnainrmwr" sebyPeettoFaeok xlsV=crnmsaeMVDm.iwoe" mn:M"l-aepc:VMeoVeMdl Mnegt"4"Mnit=40 iHih=25 iWdh"0" > <rd Gi> <rdRsucs Gi.eore> <trbadxKy"lsErrcn> Soyor :e=FahroIo" <betnmtoUigeFae Bgnie"00:0 OjcAiainsnKyrms eiTm=0:00" Soyor.agtrpry"UEeetVsblt)> trbadTrePoet=(Ilmn.iiiiy" <iceebeteFaeKyie"00:0 DsrtOjcKyrm eTm=0:00" Vle"xSai Vsblt.idn"> au={:ttc iiiiyHde}/ <iceebeteFaeKyie"00:04000 DsrtOjcKyrm eTm=0:00.000" Vle"xSai Vsblt.iil}/ au={:ttc iiiiyVsbe"> <iceebeteFaeKyie"00:08000 DsrtOjcKyrm eTm=0:00.000" Vle"xSai Vsblt.idn"> au={:ttc iiiiyHde}/ <iceebeteFaeKyie"00:16000 DsrtOjcKyrm eTm=0:00.000" Vle"xSai Vsblt.iil}/ au={:ttc iiiiyVsbe"> <iceebeteFaeKyie"00:24000 DsrtOjcKyrm eTm=0:00.000" Vle"xSai Vsblt.idn"> au={:ttc iiiiyHde}/ <iceebeteFaeKyie"00:32000 DsrtOjcKyrm eTm=0:00.000" Vle"xSai Vsblt.iil}/ au={:ttc iiiiyVsbe"> <iceebeteFaeKyie"00:1 DsrtOjcKyrm eTm=0:00" Vle"xSai Vsblt.iil}/ au={:ttc iiiiyVsbe"> <OjcAiainsnKyrms /betnmtoUigeFae> <Soyor> /trbad <tl TreTp={:yeTxBx" Sye agtye"xTp eto}> <tl.rges SyeTigr> <rge Poet=Vldto.aErr Vle"re> Tigr rpry"aiainHsro" au=tu" <etrPoet=Bcgon"Vle"ik/ Ste rpry"akrud au=Pn"> <etrPoet=Frgon"Vle"lc"> Ste rpry"oerud au=Bak/ <Tigr /rge> <SyeTigr> /tl.rges <etrPoet=Vldto.roTmlt" Ste rpry"aiainErrepae> <etrVle Ste.au> <otoTmlt> Cnrlepae <okae LsCidil"re DcPnl athlFl=Tu" ToTp"Bnig oli={idn Eeetaecnrlihro, lmnNm=otoWtErr Pt=dreEeet(aiainErr) ahAondlmn.Vldto.ros []Errotn}> 0.roCnet" <lis DcPnlDc=Rgt Elpe okae.ok"ih" ToTp"BnigEeetaecnrlihro, oli={idn lmnNm=otoWtErr Pt=dreEeet(aiainErr) ahAondlmn.Vldto.ros []Errotn} 0.roCnet" Wdh"5 Hih=1" it=1" egt"5 Mri=-5000 agn"2,,," SrkTikes""Fl=IdaRd > toehcns=1 il"nine" <lis.toe ElpeSrk>

www.codeproject.com/KB/WPF/StepByStepGuideToMVVM.aspx

7/10

12/22/11

WPF/Silverlight: Step By Step Guide to MVVM - CodeProject


<ierrdetrs Edon=105 LnaGainBuh nPit",." Saton=005> trPit",." <rdettpClr"FF00" GainSo oo=#FA44

Ofe=0/ fst""> <rdettpClr"FCCC" GainSo oo=#F977 Ofe=1/ fst""> <LnaGainBuh /ierrdetrs> <ElpeSrk> /lis.toe <lis.rges ElpeTigr> <vnTigrRueEet Eetrge otdvn= "rmwrEeetLae" Faeoklmn.odd> <eiSoyor Soyor= Bgntrbad trbad "SaiRsuc FahroIo}/ {ttceore lsErrcn"> <Eetrge> /vnTigr <ElpeTigr> /lis.rges <Elpe /lis> <etlc DcPnlDc=Rgt TxBok okae.ok"ih" ToTp"BnigEeetaecnrlihro, oli={idn lmnNm=otoWtErr Pt=dreEeet(aiainErr) ahAondlmn.Vldto.ros []Errotn} 0.roCnet" Frgon=Wie oerud"ht" FnSz=1" otie"0 Mri=-5500 FnWih=Bl"! agn"1,,," otegt"od> <etlc.rges TxBokTigr> <vnTigrRueEet"rmwrEeetLae" Eetrge otdvn=Faeoklmn.odd> <eiSoyor Soyor= Bgntrbad trbad "SaiRsuc FahroIo}/ {ttceore lsErrcn"> <Eetrge> /vnTigr <TxBokTigr> /etlc.rges <TxBok /etlc> <odrBreBuh"e"BreTikes"" Bre odrrs=Rd odrhcns=1> <dreEeetlchle AondlmnPaeodr Nm=cnrlihro"> ae"otoWtErr/ <Bre> /odr <DcPnl /okae> <Cnrlepae /otoTmlt> <Ste.au> /etrVle <Ste> /etr <Sye /tl> <Gi.eore> /rdRsucs <rdRweiiin> Gi.oDfntos <oDfnto Hih=5* / Rweiiin egt"0" > <oDfnto Hih=3* / Rweiiin egt"3" > <oDfnto Hih=3* / Rweiiin egt"3" > <oDfnto Hih=3* / Rweiiin egt"3" > <oDfnto Hih=6* / Rweiiin egt"3" > <oDfnto Hih=3* / Rweiiin egt"3" > <Gi.oDfntos /rdRweiiin> <rdClmDfntos Gi.ouneiiin> <ouneiiinWdh"5"/ ClmDfnto it=7* > <ouneiiinWdh"2* / ClmDfnto it=45" > <Gi.ouneiiin> /rdClmDfntos <etlc Gi.ounpn""Tx=Epoe Dtis TxBok rdClmSa=2 et"mlye eal" HrznaAinet"etr VriaAinet"etr oiotllgmn=Cne" etcllgmn=Cne" FnFml=Thm"FnSye"tlc FnWih=Bl" otaiy"aoa ottl=Iai" otegt"od Frgon=DdeBu"/ oerud"ogrle > <etlc Gi.oun""Gi.o=1 Mri=5 Tx=I : TxBok rdClm=0 rdRw"" agn"" et"D " HrznaAinet"ih"VriaAinet"etr / oiotllgmn=Rgt etcllgmn=Cne" > <eto Gi.oun""Gi.o=1 Mri=551," TxBx rdClm=1 rdRw"" agn",,55 Tx={idn I,aiaeODtErr=re et"Bnig DVldtsnaarostu, NtfOVldtoErrtu} / oiynaiainro=re" > <etlc Gi.oun""Gi.o=2 Mri=5 TxBok rdClm=0 rdRw"" agn"" Tx=Nm : HrznaAinet"ih" et"ae " oiotllgmn=Rgt VriaAinet"etr / etcllgmn=Cne" > <eto Gi.oun""Gi.o=2 Mri=551," TxBx rdClm=1 rdRw"" agn",,55 Tx={idn Nm,aiaeODtErr=re et"Bnig aeVldtsnaarostu, NtfOVldtoErrtu} / oiynaiainro=re" > <etlc Gi.oun""Gi.o=3 Mri=5 TxBok rdClm=0 rdRw"" agn"" Tx=Ae: HrznaAinet"ih" et"g " oiotllgmn=Rgt VriaAinet"etr / etcllgmn=Cne" > <eto Gi.oun""Gi.o=3 Mri=551," TxBx rdClm=1 rdRw"" agn",,55 Tx={idn AeVldtsnaarostu, et"Bnig g,aiaeODtErr=re NtfOVldtoErrtu} / oiynaiainro=re" > <etlc Gi.oun""Gi.o=4 Mri=5 TxBok rdClm=0 rdRw"" agn"" Tx=Nts: HrznaAinet"ih" et"oe " oiotllgmn=Rgt VriaAinet"etr / etcllgmn=Cne" > <eto Gi.oun""Gi.o=4 Mri=551," TxBx rdClm=1 rdRw"" agn",,55 Tx={idn Nts"/ et"Bnig oe} > <Gi> /rd <UeCnrl /sroto>

www.codeproject.com/KB/WPF/StepByStepGuideToMVVM.aspx

8/10

12/22/11

WPF/Silverlight: Step By Step Guide to MVVM - CodeProject

Some U ef l MVVM F ame o k


Also do not forget to check out a few handy tools/Frameworks for MVVM: PRISM (Microsoft) MVVM Light (Laurent Bugnion) WPF Application Framework Chinch Caliburn Micro Core MVVM Onyx nRoute MVVM Foundation How to build your own MVVM Framework

Licen e
This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Abo

he A

ho

P adeepDha an

Pradeep Dhawan: Worked on Prism, Smart Client(SCSF CAB), WPF, WCF, WF, C#, VC++, C and Unix shell scripting. Blog: http://programmingwpf.wordpress.com

Team Leader C redit Suisse Singapore Member Follow on Twitter

Article Top

Rate this:

Poor

E cellent Vo e

Commen
FAQ

and Di c

ion
Search

Profile popups

Noise level Medi m

Layout Normal

Per page 25 Upda e

Ne

Me

age

Refresh Ne Code On The Block

First Prev Next 8:17 11 A g '11 10:25 25 J l '11 21:29 19 J l '11

Ca el A in de ail

Nil

Tho ell

o e of 5

Jame Bond007

www.codeproject.com/KB/WPF/StepByStepGuideToMVVM.aspx

9/10