Building Silverlight Applications
Using the MVVM pattern
An Introduction by Peter Messenger
Senior Developer – Qmastor
http://www.petermessenger.com
Silverlight and WPF
• User interface programming platform operates on
top of the NET framework
• WPF is windows based
• Silverlight can run in web browsers, Windows and
Apple, Windows Mobile etc
– Use XAML (eXtensible Application Markup Language)
– Have powerful databinding capabilities
– Have command properties where screen elements can
perform actions
Example XAML and Code
Behind
Hello World Example
Using XAML View and
“traditional” events and elements
knowledge
Simple.xaml
What is the MVVM pattern?
• Model View ViewModel is a coding pattern to
develop Silverlight and WPF applications.
• Main aims
–
–
–
–
Cleaner code and easier to maintain and extend
Testable applications
Thinner user interface layer
Easier for User Interface designers to concentrate on
how the application will look and coders to concentrate
on what the application will do
Concepts of MVVM
Three broad categories of objects
– Model
• Contain data consumed and modified by user
• Include things like business rule processing, input
validation, change tracking and other things relating
to system data
• In database terms, this could be considered as tables,
views and stored procedures used to update them
Concepts of MVVM
Three broad categories of objects
– View
• UI control that displays data
• Allows the user to modify the state of the data via
keyboard or mouse
• Shows video, images or whatever else needs to be
displayed
• Bound to the model via databinding
Concepts of MVVM
Three broad categories of objects
– ViewModel
•
•
•
•
Model of a view (abstraction)
Expose properties to which views are bound
Including properties that return command objects
Notify view of changes via PropertyChangedEvent
(INotifyPropertyChanged interface)
• Collections of data can be updated via
ObservableCollections
• Gets update of data via two way binding in the view
Example XAML and Code
Behind
Hello World Example
Using XAML View bound to ViewModel
Binding.xaml
Comments
• As can be seen, this simple example takes
some setting up and increased code
• When you work on more complicated
programs and use inheritance, this becomes
much less of an issue
• There are several different open source
templates that can be used to get started
My Experience with MVVM
• Spent last 8 months developing Silverlight
application for Qmastor
– Web interface for NSW mines to interact with the new
Newcastle Coal Port to manage their coal shipments
– Trialled using the MVVM pattern with great success
– Other developers in the company then started using it
– Likely to be the company defacto standard from now on
Discussion and Code
More complicated example
Data Entry and Validation
Employee database
MainPage.xaml
Questions
Links
• Wikipedia
http://en.wikipedia.org/wiki/Model_View_ViewModel
• Understanding the MVVM pattern
http://live.visitmix.com/MIX10/Sessions/EX14
• WPF Apps using the MVVM pattern
http://msdn.microsoft.com/en-us/magazine/dd419663.aspx
• MVVM Light Toolkit
http://www.galasoft.ch/mvvm/getstarted/
• Advanced MVVM – Josh Smith
http://www.advancedmvvm.com