Learn MVVM With Studio for WPF

transcript

Learn MVVM with Studio for WPF

Greg Lutzgregoryl@componentone.comProduct Manager

• Introduction to MVVM• Benefits of MVVM• Key WPF features which support MVVM– Data Binding– Commanding

• Building a sample• Use C1DataGrid, C1Chart, C1Toolbar

Webcast Overview

• 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)

Introduction to MVVM

MVC vs MVVM

Controller

ModelView

ViewModel

MVC MVVM

• Data Templates• Data Binding• Attached Properties• Commands• Resources

WPF Features

View •What you see on the screen•DataContext bound to ViewModel•No knowledge of Model

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

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

• C#/VB

• XAML

MVVM Data Binding

View •<DataGrid ItemsSource={Binding Sales} />

ViewModel •public ObservableCollection<Sale> Sales

Model •public class Sale : INotifyPropertyChanged

<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>

C1Chart Data Binding

• 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

ViewModel

Commands

• 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

ICommand Implementations

MVVM Commanding

View• <Button Command={Binding

ClearCommand} />

ViewModel

• public ICommand ClearCommand• Execute method calls

ClearData

Model • public static void ClearData()

• Well suited for WPF– Data Binding, Commands, Resources and

Templates• True separation of view and model• Scalability• Testability• Automatic Updates using

INotifyPropertyChanged

Why Use MVVM

• A well-designed MVVM application has almost no code-behind in its views

• MVVM is just for data centric applications

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

• Free MVVM Frameworks– Caliburn– MVVM Light– WAF– Cinch– nRoute

Resources

• Sample and slides can be accessed later on the C1 Silverlight and WPF blog

• Questions?• Contact me: Greg Lutz– gregoryl@componentone.com

Thanks!

Conclusion

Learn MVVM With Studio for WPF

Documents