Learn MVVM With Studio for WPF

Learn MVVM with Studio for WPF

Greg Lutz [email protected] Product Manager

Webcast Overview Introduction to MVVM Benefits of MVVM Key WPF features which support MVVM Data Binding Commanding

Building a sample Use C1DataGrid, C1Chart, C1Toolbar

Introduction to MVVM Stands for Model-View-ViewModel Popular architectural design pattern Makes it easy to design scalable, robust applications Follows separation of UI and business logic Similar to MVC, MVP, Presentation Model Specifically for WPF (and Silverlight)

MVC vs MVVM

View

Controller

ViewModel

View

Model

ModelMVVM

MVC

WPF Features Data Templates Data Binding Attached Properties Commands Resources

MVVM XAML What you see on the screen DataContext bound to ViewModel No knowledge of ModelConnects View to Model No knowledge of View Knowledge of Model

View

C#/VB

ViewModel

Model

The data classes Connections to external data sources No knowledge of ViewModels or Views

MVVM Data Binding

View

public ObservableCollection SalesViewModel

public class Sale : INotifyPropertyChangedModel

C1Chart Data Binding

Commanding Separation of origin from handling of action Key feature of WPF and MVVM Commands consist of 4 parts Command Action (i.e. Paste ) Source Object (i.e. Button) Target Object (i.e. TextBox) Binding (maps command to logic)

Implements ICommand Execute CanExecute

CommandingViewCommands

ViewModel

Model

ICommand Implementations RoutedCommand Routed through UI element tree Target must be part of UI element tree

DelegateCommand Delegates command logic to methods Allows Views to bind to the ViewModel

RelayCommand Relays functionality by invoking delegates Lightweight variation of DelegateCommand Allows Views to bind to the ViewModel

MVVM Commanding

View

ViewModel

public ICommand ClearCommand Execute method calls ClearData

public static void ClearData()Model

Why Use MVVM Well suited for WPF Data Binding, Commands, Resources and Templates

True separation of view and model Scalability Testability Automatic Updates using INotifyPropertyChanged

Myths A well-designed MVVM application has almost no code-behind in its views MVVM is just for data centric applications

Resources WPF MVVM Toolkit Includes project templates (VS2008) http://wpf.codeplex.com/releases/view/14962

Free MVVM Frameworks Caliburn MVVM Light WAF Cinch nRoute

Conclusion Sample and slides can be accessed later on the C1 Silverlight and WPF blog Questions? Contact me: Greg Lutz [email protected]

Thanks!