learn mvvm with studio for wpf
TRANSCRIPT
• 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
View
ViewModel
Model
MVC MVVM
• Data Templates• Data Binding• Attached Properties• Commands• Resources
WPF Features
MVVM
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
Commanding
View
ViewModel
Model
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
Myths
• 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– [email protected]
Thanks!
Conclusion