Learn MVVM with Studio for WPF

Greg Lutz gregoryl@componentone.com 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

Model
MVVM

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 Model C#/VB

View

Connects View to Model No knowledge of View ViewModel Knowledge of Model

Model

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

MVVM Data Binding

<DataGrid ItemsSource={Binding Sales} />

View

ViewModel

public ObservableCollection<Sale> Sales

Model

public class Sale : INotifyPropertyChanged

C1Chart Data Binding

<c1chart:C1Chart Name="c1Chart1"> <c1chart:C1Chart.Data> <c1chart:ChartData ItemsSource="{Binding Sales}" ItemNameBinding="{Binding Product}"> <c1chart:DataSeries Label="Value" ValueBinding="{Binding Value}" /> <c1chart:DataSeries Label="Discount" ValueBinding="{Binding Discount}" /> </c1chart:ChartData> </c1chart:C1Chart.Data> </c1chart:C1Chart>

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

Commanding
View
Commands

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
<Button Command={Binding ClearCommand} /> public ICommand ClearCommand Execute method calls ClearData

View

ViewModel

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
gregoryl@componentone.com

Thanks!