mvvm overview l.
Skip this Video
Loading SlideShow in 5 Seconds..
MVVM Overview PowerPoint Presentation
Download Presentation
MVVM Overview

Loading in 2 Seconds...

play fullscreen
1 / 43

MVVM Overview - PowerPoint PPT Presentation

  • Uploaded on

MVVM Overview. Frank Shoemaker MindCrafted Systems Overview of MVVM. Some background Some examples. MVVM. MVVM stands for M odel V iew V iew- M odel. Simple Case. Model. Typical class that covers a database Could be a WCF Service and its client reference.

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'MVVM Overview' - niveditha

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
mvvm overview

MVVM Overview

Frank Shoemaker

MindCrafted Systems

overview of mvvm
Overview of MVVM

Some background

Some examples

  • MVVM stands for
    • Model
    • View
    • View-Model

Typical class that covers a database

Could be a WCF Service and its client reference


Provides data to and from the View

Responds to both the View and the Model

Informs the View of changes in the data

Reusable (at least much more than code behind a form)

  • Knows nothing about the View
  • Does not “push” data into the view

TextBox1.Text = object.Name()


Uses Binding to “subscribe” to the ViewModel

Interprets business data and state of ViewModel to the human

Nothing but Presentation - XAML

No or minimal code-behind

more on the viewmodel in mvvm
More on the ViewModel in MVVM
  • WPF/Silverlight data binding is what makes things work
  • ViewModel presents a “published interface” to the View
  • Binding in the XAML instead of code
    • More use of Declarative Programming
model class
Model Class

Business data Properties

Properties to return “Select” lists (AllSelect and StatusSelect)

The usual CRUD routines

model class14
Model Class
  • Encapsulates how it communications with the back-end
    • Uses Events to signal I/O successfully completed or an error occurred
    • In WPF it’s synchronous, but can be used as if it’s a asynchronous.
    • In Silverlight it’s async.
model class i o wpf synchronous
Model Class – I/OWPF - Synchronous

Public Sub Read(ByVal id As Integer)



RaiseEvent IOSuccessful("Read", New EventArgs())

Catch ex As Exception

RaiseEvent IOErrorOccurred("Read", ex)

End Try

End Sub

model class i o silverlight asynch
Model Class – I/OSilverlight - Asynch

Public Sub Read(ByVal id As Integer)


myService.FetchAsync(id, ServiceReference1.myContextPayloadType.Heavy)

Catch ex As Exception

RaiseEventIOErrorOccurred("Read", ex)

End Try

End Sub

model class i o silverlight asynch17
Model Class – I/OSilverlight - Asynch

Private Sub Read_Completed(ByVal sender As System.Object, ByVale As ServiceReference1.FetchCompletedEventArgs) Handles myService.FetchCompleted

If IsNothing(e.Error) Then

myData = e.Result

RaiseEventIOSuccessful("Read", New EventArgs())


RaiseEventIOErrorOccurred("Read", e.Error)

End If

End Sub

viewmodel properties
ViewModel Properties

Properties come in two flavors

  • Data Properties
    • Name, StatusID, CreateDate, AllSelect
  • Form State properties
    • IsEditing, IsNotEditing, IsOKToBeginEdit
viewmodel methods
ViewModel Methods

Methods come in two flavors

  • CRUD Methods
    • Create, Read, Update, Delete
  • Implements the IEditableObject interface
    • BeginEdit, CancelEdit, EndEdit
viewmodel class events
ViewModel Class Events
  • Implements INotifyPropertyChanged interface
    • Notify the View that a property has changed its value
      • Allows the View to respond to reflect the change, if it wants to
viewmodel class properties
ViewModel Class Properties

Present some properties in more than one way for the convenience of the View

  • IsEditing
    • True if the user is currently editing the business object
  • IsNotEditing
    • True if the user is NOT currently editing the business object.
gluing the pieces together
Gluing the Pieces Together



setup the datacontext
Setup the DataContext
  • This example sets up the DataContext in code
    • Create a new instance of the ViewModel
    • Bind the View to the ViewModel Instance
  • All Controls on the View then “inherit” the DataContext from the page.
set up the datacontext
Set up the DataContext

Private Sub Page_Loaded(ByVal sender As Object, ByVale As System.Windows.RoutedEventArgs)

myVM = New ViewModel.DepartmentVM()

' Set the DataContext for the

' entire page to the ViewModel

Me.DataContext = myVM

End Sub

data binding viewmodel inotifypropertychanged
Data Binding - ViewModelINotifyPropertyChanged

Public Event PropertyChanged(ByVal sender As Object,

ByVal e As PropertyChangedEventArgs) _

Implements INotifyPropertyChanged.PropertyChanged

data binding viewmodel deparment createdby
Data Binding - ViewModelDeparment.CreatedBy

Public Property CreatedBy() As String


Return myModel.CreatedBy

End Get

Set(ByVal value As String)

myModel.CreatedBy = value

RaiseEventPropertyChanged(Me, New PropertyChangedEventArgs("CreatedBy"))

End Set

End Property

data binding view deparment createdby
Data Binding - ViewDeparment.CreatedBy

<TextBoxText="{Binding Path=CreateDate, Mode=OneWay}" . . .

Path is within the DataContext

Mode=OneWay means the control won’t update the ViewModel

Since it’s bound to CreateDate, when the PropertyChanged event is raised the control reloads from the CreateDate property in the ViewModel

Controls don’t need to be named

binding for state
Binding For State

<TextBox Text="{Binding Path=Name,Mode=TwoWay, IsEnabled="{Binding Path=IsEditing}"

. . .

Binding to interpret the ViewModel’s state to the user.

binding for state29
Binding for State

<Button Name="Edit" Content="Edit"

IsEnabled="{Binding Path=IsOKToBeginEdit}"

Click="Edit_Begin" . . .

<Button Name="Save" Content="Save"

IsEnabled="{Binding Path=IsEditing}"

Click="Edit_Save" . . .

<Button Name="Cancel" Content="Cancel"

IsEnabled="{Binding Path=IsEditing}"

Click="Edit_Cancel" . . .

twoway data bindning
TwoWay Data Bindning

<TextBox Text="{Binding Path=Name, Mode=TwoWay, . . .

Bi-directional binding.

validating in the viewmodel
Validating in the ViewModel

<TextBox Text="{Binding Path=Name, Mode=TwoWay, ValidatesOnExceptions=True}"

. . .

When the ViewModel throws the exception, the View changes

setting up styles for validation binding
Setting up Styles for Validation Binding

<Style x:Key="styleTextBox" TargetType="TextBox">

. . .

<Setter Property="Validation.ErrorTemplate"

Value="{StaticResource errorEyeCatcher}"/>


<Trigger Property="Validation.HasError" Value="true">

<Setter Property="ToolTip"

Value="{Binding RelativeSource={RelativeSource Self},





setting up styles for validation binding33
Setting up Styles for Validation Binding

<!--Display a Red * next to the control with an error -->

<ControlTemplate x:Key="errorEyeCatcher">


<Border BorderBrush="Red" BorderThickness="1" Padding="2">



<TextBlock Foreground="Red" FontSize="24" Text="*"/>



when to validate
When to Validate?

<TextBox Text="{Binding Path=Name, Mode=TwoWay, UpdateSourceTrigger=LostFocus,ValidatesOnExceptions=True}"

IsEnabled="{Binding Path=IsEditing}"

. . .

combobox binding
ComboBox Binding

<ComboBoxItemsSource="{Binding Path=StatusSelect}"



SelectedValue="{Binding Path=StatusID, Mode=TwoWay}"

. . .

data binding viewmodel formstatemessage
Data BindingViewModel.FormStateMessage

The state of Editing is maintained by the ViewModel

ViewModel exposes properties to indicate state

View interprets the ViewModel’s state to the user

displaying the status message
Displaying the Status Message

<TextBlock Text="{Binding Path=FormStateMessage}"

. . .

binding to change color of the message if it s an error
Binding to Change Color of the Message if it’s an Error

<TextBlock Text="{Binding Path=FormStateMessage}"

Foreground="{Binding Path=FormStateMessageType,

Converter={StaticResourceMessageForegroundColor}, ConverterParameter=FormStateMessageType}"

. . .

Use a converter routine to transform integer from the ViewModel into a color on theTextBox

converter routine
Converter Routine

Public Function Convert(ByVal value As Object,

ByVal targetType As System.Type,

ByVal parameter As Object, ByVal culture As System.Globalization.CultureInfo) _

As Object Implements System.Windows.Data.IValueConverter.Convert

If CInt(value) = 1 Then

' Informational message

Return "Black"


' Error message

Return "Red"

End If

End Function

setup the converter routine as a resource in the xaml
Setup the Converter Routine as a Resource in the XAML


<converter:MessageForegroundColor x:Key="MessageForegroundColor" />



Since ViewModels know nothing about the UI, they can be driven with a programmatic test case.

mvvm wrap up
MVVM Wrap up

Loose coupling between the Model, ViewModel, and View

Bright lines between areas of concerns

At least some chance of reusability of the ViewModel

ViewModel is independently testable

mvvm wrap up43
MVVM Wrap up

View can be worked on by designers without messing up the ViewModel

Would benefit from a root ViewModel class for the state management.