Learn MVVM With Studio for WPF
Transcript of Learn MVVM With Studio for WPF
![Page 2: Learn MVVM With Studio for WPF](https://reader036.fdocuments.net/reader036/viewer/2022081412/53fc7de0dab5ca8a1f8b456a/html5/thumbnails/2.jpg)
• Introduction to MVVM• Benefits of MVVM• Key WPF features which support MVVM– Data Binding– Commanding
• Building a sample• Use C1DataGrid, C1Chart, C1Toolbar
Webcast Overview
![Page 3: Learn MVVM With Studio for WPF](https://reader036.fdocuments.net/reader036/viewer/2022081412/53fc7de0dab5ca8a1f8b456a/html5/thumbnails/3.jpg)
• 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
![Page 4: Learn MVVM With Studio for WPF](https://reader036.fdocuments.net/reader036/viewer/2022081412/53fc7de0dab5ca8a1f8b456a/html5/thumbnails/4.jpg)
MVC vs MVVM
Controller
ModelView
View
ViewModel
Model
MVC MVVM
![Page 5: Learn MVVM With Studio for WPF](https://reader036.fdocuments.net/reader036/viewer/2022081412/53fc7de0dab5ca8a1f8b456a/html5/thumbnails/5.jpg)
• Data Templates• Data Binding• Attached Properties• Commands• Resources
WPF Features
![Page 6: Learn MVVM With Studio for WPF](https://reader036.fdocuments.net/reader036/viewer/2022081412/53fc7de0dab5ca8a1f8b456a/html5/thumbnails/6.jpg)
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
![Page 7: Learn MVVM With Studio for WPF](https://reader036.fdocuments.net/reader036/viewer/2022081412/53fc7de0dab5ca8a1f8b456a/html5/thumbnails/7.jpg)
MVVM Data Binding
View •<DataGrid ItemsSource={Binding Sales} />
ViewModel •public ObservableCollection<Sale> Sales
Model •public class Sale : INotifyPropertyChanged
![Page 8: Learn MVVM With Studio for WPF](https://reader036.fdocuments.net/reader036/viewer/2022081412/53fc7de0dab5ca8a1f8b456a/html5/thumbnails/8.jpg)
<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
![Page 9: Learn MVVM With Studio for WPF](https://reader036.fdocuments.net/reader036/viewer/2022081412/53fc7de0dab5ca8a1f8b456a/html5/thumbnails/9.jpg)
• 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
![Page 10: Learn MVVM With Studio for WPF](https://reader036.fdocuments.net/reader036/viewer/2022081412/53fc7de0dab5ca8a1f8b456a/html5/thumbnails/10.jpg)
Commanding
View
ViewModel
Model
Commands
![Page 11: Learn MVVM With Studio for WPF](https://reader036.fdocuments.net/reader036/viewer/2022081412/53fc7de0dab5ca8a1f8b456a/html5/thumbnails/11.jpg)
• 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
![Page 12: Learn MVVM With Studio for WPF](https://reader036.fdocuments.net/reader036/viewer/2022081412/53fc7de0dab5ca8a1f8b456a/html5/thumbnails/12.jpg)
MVVM Commanding
View• <Button Command={Binding
ClearCommand} />
ViewModel
• public ICommand ClearCommand• Execute method calls
ClearData
Model • public static void ClearData()
![Page 13: Learn MVVM With Studio for WPF](https://reader036.fdocuments.net/reader036/viewer/2022081412/53fc7de0dab5ca8a1f8b456a/html5/thumbnails/13.jpg)
• 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
![Page 14: Learn MVVM With Studio for WPF](https://reader036.fdocuments.net/reader036/viewer/2022081412/53fc7de0dab5ca8a1f8b456a/html5/thumbnails/14.jpg)
• A well-designed MVVM application has almost no code-behind in its views
• MVVM is just for data centric applications
Myths
![Page 15: Learn MVVM With Studio for WPF](https://reader036.fdocuments.net/reader036/viewer/2022081412/53fc7de0dab5ca8a1f8b456a/html5/thumbnails/15.jpg)
• WPF MVVM Toolkit– Includes project templates (VS2008)– http://wpf.codeplex.com/releases/view/14962
• Free MVVM Frameworks– Caliburn– MVVM Light– WAF– Cinch– nRoute
Resources
![Page 16: Learn MVVM With Studio for WPF](https://reader036.fdocuments.net/reader036/viewer/2022081412/53fc7de0dab5ca8a1f8b456a/html5/thumbnails/16.jpg)
• Sample and slides can be accessed later on the C1 Silverlight and WPF blog
• Questions?• Contact me: Greg Lutz– [email protected]
Thanks!
Conclusion