Category: mvvm

MVVM – Validations ”; Previous Next In this chapter, we will learn about validations. We will also look at a clean way to do validation with what WPF bindings already support but tying it into MVVM components. Validation in MVVM When your application starts accepting data input from end users you need to consider validating that input. Make sure it conforms to your overall requirements. WPF has some great builds and features in the binding system for validating input and you can still leverage all those features when doing MVVM. Keep in mind that the logic that supports your validation and defines what rules exist for what properties should be part of the Model or the ViewModel, not the View itself. You can still use all the ways of expressing validation that are supported by WPF data binding including − Throwing exceptions on a property is set. Implementing the IDataErrorInfo interface. Implementing INotifyDataErrorInfo. Use WPF validation rules. In general, INotifyDataErrorInfo is recommended and was introduced to WPF .net 4.5 and it supports querying the object for errors associated with properties and it also fixes a couple of deficiencies with all the other options. Specifically, it allows asynchronous validation. It allows properties to have more than one error associated with them. Adding Validation Let’s take a look at an example in which we will add validation support to our input view, and in large application you will probably need this a number of places in your application. Sometimes on Views, sometimes on ViewModels and sometimes on these helper objects there are wrappers around model objects. It’s a good practice for putting the validation support in a common base class that you can then inherit from different scenarios. The base class will support INotifyDataErrorInfo so that that validation gets triggered when properties change. Create add a new class called ValidatableBindableBase. Since we already have a base class for a property change handling, let’s derive the base class from it and also implement the INotifyDataErrorInfo interface. Following is the implementation of ValidatableBindableBase class. using System; using System.Collections.Generic; using System.ComponentModel; //using System.ComponentModel.DataAnnotations; using System.Linq; using System.Runtime.CompilerServices; using System.Text; using System.Threading.Tasks; using System.Windows.Controls; namespace MVVMHierarchiesDemo { public class ValidatableBindableBase : BindableBase, INotifyDataErrorInfo { private Dictionary<string, List<string>> _errors = new Dictionary<string, List<string>>(); public event EventHandler<DataErrorsChangedEventArgs> ErrorsChanged = delegate { }; public System.Collections.IEnumerable GetErrors(string propertyName) { if (_errors.ContainsKey(propertyName)) return _errors[propertyName]; else return null; } public bool HasErrors { get { return _errors.Count > 0; } } protected override void SetProperty<T>(ref T member, T val, [CallerMemberName] string propertyName = null) { base.SetProperty<T>(ref member, val, propertyName); ValidateProperty(propertyName, val); } private void ValidateProperty<T>(string propertyName, T value) { var results = new List<ValidationResult>(); //ValidationContext context = new ValidationContext(this); //context.MemberName = propertyName; //Validator.TryValidateProperty(value, context, results); if (results.Any()) { //_errors[propertyName] = results.Select(c => c.ErrorMessage).ToList(); } else { _errors.Remove(propertyName); } ErrorsChanged(this, new DataErrorsChangedEventArgs(propertyName)); } } } Now add AddEditCustomerView and AddEditCustomerViewModel in respective folders. Following is the code of AddEditCustomerView.xaml. <UserControl x:Class = “MVVMHierarchiesDemo.Views.AddEditCustomerView” xmlns = “http://schemas.microsoft.com/winfx/2006/xaml/presentation” xmlns:x = “http://schemas.microsoft.com/winfx/2006/xaml” xmlns:mc = “http://schemas.openxmlformats.org/markup-compatibility/2006” xmlns:d = “http://schemas.microsoft.com/expression/blend/2008” xmlns:local = “clr-namespace:MVVMHierarchiesDemo.Views” mc:Ignorable = “d” d:DesignHeight = “300” d:DesignWidth = “300”> <Grid> <Grid.RowDefinitions> <RowDefinition Height = “Auto” /> <RowDefinition Height = “Auto” /> </Grid.RowDefinitions> <Grid x:Name = “grid1” HorizontalAlignment = “Left” DataContext = “{Binding Customer}” Margin = “10,10,0,0” VerticalAlignment = “Top”> <Grid.ColumnDefinitions> <ColumnDefinition Width = “Auto” /> <ColumnDefinition Width = “Auto” /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height = “Auto” /> <RowDefinition Height = “Auto” /> <RowDefinition Height = “Auto” /> <RowDefinition Height = “Auto” /> </Grid.RowDefinitions> <Label Content = “First Name:” Grid.Column = “0” HorizontalAlignment = “Left” Margin = “3” Grid.Row = “0” VerticalAlignment = “Center” /> <TextBox x:Name = “firstNameTextBox” Grid.Column = “1” HorizontalAlignment = “Left” Height = “23” Margin = “3” Grid.Row = “0” Text = “{Binding FirstName, ValidatesOnNotifyDataErrors = True}” VerticalAlignment = “Center” Width = “120” /> <Label Content = “Last Name:” Grid.Column = “0” HorizontalAlignment = “Left” Margin = “3” Grid.Row = “1” VerticalAlignment = “Center” /> <TextBox x:Name = “lastNameTextBox” Grid.Column = “1” HorizontalAlignment = “Left” Height = “23” Margin = “3” Grid.Row = “1” Text = “{Binding LastName, ValidatesOnNotifyDataErrors = True}” VerticalAlignment = “Center” Width = “120” /> <Label Content = “Email:” Grid.Column = “0” HorizontalAlignment = “Left” Margin = “3” Grid.Row = “2” VerticalAlignment = “Center” /> <TextBox x:Name = “emailTextBox” Grid.Column = “1” HorizontalAlignment = “Left” Height = “23” Margin = “3” Grid.Row = “2” Text = “{Binding Email, ValidatesOnNotifyDataErrors = True}” VerticalAlignment = “Center” Width = “120” /> <Label Content = “Phone:” Grid.Column = “0” HorizontalAlignment = “Left” Margin = “3” Grid.Row = “3” VerticalAlignment = “Center” /> <TextBox x:Name = “phoneTextBox” Grid.Column = “1” HorizontalAlignment = “Left” Height = “23” Margin = “3” Grid.Row = “3” Text = “{Binding Phone, ValidatesOnNotifyDataErrors = True}” VerticalAlignment = “Center” Width = “120” /> </Grid> <Grid Grid.Row = “1”> <Button Content = “Save” Command = “{Binding SaveCommand}” HorizontalAlignment = “Left” Margin = “25,5,0,0” VerticalAlignment = “Top” Width = “75” /> <Button Content = “Add” Command = “{Binding SaveCommand}” HorizontalAlignment = “Left” Margin = “25,5,0,0” VerticalAlignment = “Top” Width = “75” /> <Button Content = “Cancel” Command = “{Binding CancelCommand}” HorizontalAlignment = “Left” Margin = “150,5,0,0” VerticalAlignment = “Top” Width = “75” /> </Grid> </Grid> </UserControl> Following is the AddEditCustomerViewModel implementation. using MVVMHierarchiesDemo.Model; using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; namespace MVVMHierarchiesDemo.ViewModel { class AddEditCustomerViewModel : BindableBase { public AddEditCustomerViewModel() { CancelCommand = new MyIcommand(OnCancel); SaveCommand = new MyIcommand(OnSave, CanSave); } private bool _EditMode; public bool EditMode { get { return _EditMode; } set { SetProperty(ref _EditMode, value);} } private SimpleEditableCustomer _Customer; public SimpleEditableCustomer Customer { get { return _Customer; } set { SetProperty(ref _Customer, value);} } private Customer _editingCustomer = null; public void SetCustomer(Customer cust) { _editingCustomer = cust; if (Customer != null) Customer.ErrorsChanged -= RaiseCanExecuteChanged; Customer = new SimpleEditableCustomer(); Customer.ErrorsChanged += RaiseCanExecuteChanged; CopyCustomer(cust, Customer); } private void RaiseCanExecuteChanged(object sender, EventArgs e) { SaveCommand.RaiseCanExecuteChanged(); } public MyIcommand CancelCommand { get; private set; } public MyIcommand SaveCommand { get; private set; } public event Action Done

MVVM – Hierarchies & Navigation ”; Previous Next When building MVVM applications, you typically decompose complex screens of information into a set of parent and child views, where the child views are contained within the parent views in panels or container controls, and forms a hierarchy of use themselves. After decomposing the complex Views it doesn’t mean that each and every piece of child content that you separate into its own XAML file necessarily needs to be an MVVM view. The chunk of content just provides the structure to render something to the screen and does not support any input or manipulation by the user for that content. It may not need a separate ViewModel, but it could just be a chunk XAML that renders based on properties exposed by the parents ViewModel. Finally, if you have a hierarchy of Views and ViewModels, the parent ViewModel can become a hub for communications so that each child ViewModel can remain decoupled from the other child ViewModels and from their parent as much as possible. Let’s take a look at an example in which we will define a simple hierarchy between different views. Create a new WPF Application project MVVMHierarchiesDemo Step 1 − Add the three folders (Model, ViewModel, and Views) into your project. Step 2 − Add Customer and Order classes in Model folder, CustomerListView and OrderView in Views folder, and CustomerListViewModel and OrderViewModel in ViewModel folder as shown in the following image. Step 3 − Add textblocks in both CustomerListView and OrderView. Here is CustomerListView.xaml file. <UserControl x:Class=”MVVMHierarchiesDemo.Views.CustomerListView” xmlns = “http://schemas.microsoft.com/winfx/2006/xaml/presentation” xmlns:x = “http://schemas.microsoft.com/winfx/2006/xaml” xmlns:mc = “http://schemas.openxmlformats.org/markup-compatibility/2006” xmlns:d = “http://schemas.microsoft.com/expression/blend/2008” xmlns:local = “clr-namespace:MVVMHierarchiesDemo.Views” mc:Ignorable = “d” d:DesignHeight = “300” d:DesignWidth = “300”> <Grid> <TextBlock Text = “Customer List View”/> </Grid> </UserControl> Following is the OrderView.xaml file. <UserControl x:Class = “MVVMHierarchiesDemo.Views.OrderView” xmlns = “http://schemas.microsoft.com/winfx/2006/xaml/presentation” xmlns:x =”http://schemas.microsoft.com/winfx/2006/xaml” xmlns:mc =”http://schemas.openxmlformats.org/markup-compatibility/2006″ xmlns:d =”http://schemas.microsoft.com/expression/blend/2008″ xmlns:local = “clr-namespace:MVVMHierarchiesDemo.Views” mc:Ignorable = “d” d:DesignHeight = “300” d:DesignWidth = “300”> <Grid> <TextBlock Text = “Order View”/> </Grid> </UserControl> Now we need something to host these views, and a good place for that in our MainWindow because it is a simple application. We need a container control that we can place our views and switch them in a navigation fashion. For this purpose, we need to add ContentControl in our MainWindow.xaml file and we will be using its content property and bind that to a ViewModel reference. Now define the data templates for each view in a resource dictionary. Following is the MainWindow.xaml file. Note how each data template maps a data type (the ViewModel type) to a corresponding View. <Window x:Class = “MVVMHierarchiesDemo.MainWindow” xmlns = “http://schemas.microsoft.com/winfx/2006/xaml/presentation” xmlns:x = “http://schemas.microsoft.com/winfx/2006/xaml” xmlns:d = “http://schemas.microsoft.com/expression/blend/2008” xmlns:mc = “http://schemas.openxmlformats.org/markup-compatibility/2006” xmlns:local = “clr-namespace:MVVMHierarchiesDemo” xmlns:views = “clr-namespace:MVVMHierarchiesDemo.Views” xmlns:viewModels = “clr-namespace:MVVMHierarchiesDemo.ViewModel” mc:Ignorable = “d” Title = “MainWindow” Height = “350” Width = “525”> <Window.DataContext> <local:MainWindowViewModel/> </Window.DataContext> <Window.Resources> <DataTemplate DataType = “{x:Type viewModels:CustomerListViewModel}”> <views:CustomerListView/> </DataTemplate> <DataTemplate DataType = “{x:Type viewModels:OrderViewModel}”> <views:OrderView/> </DataTemplate> </Window.Resources> <Grid> <ContentControl Content = “{Binding CurrentView}”/> </Grid> </Window> Anytime the current view model is set to an instance of a CustomerListViewModel, it will render out a CustomerListView with the ViewModel is hooked up. It’s an order ViewModel, it”ll render out OrderView and so on. We now need a ViewModel that has a CurrentViewModel property and some logic and commanding to be able to switch the current reference of ViewModel inside the property. Let”s create a ViewModel for this MainWindow called MainWindowViewModel. We can just create an instance of our ViewModel from XAML and use that to set the DataContext property of the window. For this, we need to create a base class to encapsulate the implementation of INotifyPropertyChanged for our ViewModels. The main idea behind this class is to encapsulate the INotifyPropertyChanged implementation and provide helper methods to the derived class so that they can easily trigger the appropriate notifications. Following is the implementation of BindableBase class. using System; using System.Collections.Generic; using System.ComponentModel; using System.Linq; using System.Runtime.CompilerServices; using System.Text; using System.Threading.Tasks; namespace MVVMHierarchiesDemo { class BindableBase : INotifyPropertyChanged { protected virtual void SetProperty<T>(ref T member, T val, [CallerMemberName] string propertyName = null) { if (object.Equals(member, val)) return; member = val; PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); } protected virtual void OnPropertyChanged(string propertyName) { PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); } public event PropertyChangedEventHandler PropertyChanged = delegate { }; } } Now it”s time to actually start doing some view switching using our CurrentViewModel property. We just need some way to drive the setting of this property. And we”re going to make it so that the end user can command going to the customer list or to the order view. First add a new class in your project which will implement the ICommand interface. Following is the implementation of ICommand interface. using System; using System.Windows.Input; namespace MVVMHierarchiesDemo { public class MyICommand<T> : ICommand { Action<T> _TargetExecuteMethod; Func<T, bool> _TargetCanExecuteMethod; public MyICommand(Action<T> executeMethod) { _TargetExecuteMethod = executeMethod; } public MyICommand(Action<T> executeMethod, Func<T, bool> canExecuteMethod) { _TargetExecuteMethod = executeMethod; _TargetCanExecuteMethod = canExecuteMethod; } public void RaiseCanExecuteChanged() { CanExecuteChanged(this, EventArgs.Empty); } #region ICommand Members bool ICommand.CanExecute(object parameter) { if (_TargetCanExecuteMethod != null) { T tparm = (T)parameter; return _TargetCanExecuteMethod(tparm); } if (_TargetExecuteMethod != null) { return true; } return false; } // Beware – should use weak references if command instance lifetime is longer than lifetime of UI objects that get hooked up to command // Prism commands solve this in their implementation public event EventHandler CanExecuteChanged = delegate { }; void ICommand.Execute(object parameter) { if (_TargetExecuteMethod != null) { _TargetExecuteMethod((T)parameter); } } #endregion } } We now need to set up some top level navigation to these to ViewModels and logic for that switching should belong inside MainWindowViewModel. For this we”re going to use a method called on navigate that takes a string destination and returns the CurrentViewModel property. private void OnNav(string destination) { switch (destination) { case “orders”: CurrentViewModel = orderViewModelModel; break; case “customers”: default: CurrentViewModel = custListViewModel; break; } } For navigation of these different Views, we need to add two buttons in our MainWindow.xaml file. Following

MVVM – First Application ”; Previous Next In this chapter, we will learn how to use MVVM patterns for simple input screen and the WPF application that you may already be used to. Let’s have a look at a simple example in which we will be using MVVM approach. Step 1 − Create a new WPF Application project MVVMDemo. Step 2 − Add the three folders (Model, ViewModel, and Views) into your project. Step 3 − Add a StudentModel class in the Model folder and paste the below code in that class using System.ComponentModel; namespace MVVMDemo.Model { public class StudentModel {} public class Student : INotifyPropertyChanged { private string firstName; private string lastName; public string FirstName { get { return firstName; } set { if (firstName != value) { firstName = value; RaisePropertyChanged(“FirstName”); RaisePropertyChanged(“FullName”); } } } public string LastName { get {return lastName; } set { if (lastName != value) { lastName = value; RaisePropertyChanged(“LastName”); RaisePropertyChanged(“FullName”); } } } public string FullName { get { return firstName + ” ” + lastName; } } public event PropertyChangedEventHandler PropertyChanged; private void RaisePropertyChanged(string property) { if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs(property)); } } } } Step 4 − Add another StudentViewModel class into ViewModel folder and paste the following code. using MVVMDemo.Model; using System.Collections.ObjectModel; namespace MVVMDemo.ViewModel { public class StudentViewModel { public ObservableCollection<Student> Students { get; set; } public void LoadStudents() { ObservableCollection<Student> students = new ObservableCollection<Student>(); students.Add(new Student { FirstName = “Mark”, LastName = “Allain” }); students.Add(new Student { FirstName = “Allen”, LastName = “Brown” }); students.Add(new Student { FirstName = “Linda”, LastName = “Hamerski” }); Students = students; } } } Step 5 − Add a new User Control (WPF) by right click Views folder and Select Add > New Item… Step 6 − Click Add button. Now you will see the XAML file. Add the following code into StudentView.xaml file which contains different UI elements. <UserControl x:Class = “MVVMDemo.Views.StudentView” xmlns = “http://schemas.microsoft.com/winfx/2006/xaml/presentation” xmlns:x = “http://schemas.microsoft.com/winfx/2006/xaml” xmlns:mc = “http://schemas.openxmlformats.org/markup-compatibility/2006” xmlns:d = “http://schemas.microsoft.com/expression/blend/2008” xmlns:local = “clr-namespace:MVVMDemo.Views” mc:Ignorable = “d” d:DesignHeight = “300” d:DesignWidth = “300”> <Grid> <StackPanel HorizontalAlignment = “Left”> <ItemsControl ItemsSource = “{Binding Path = Students}”> <ItemsControl.ItemTemplate> <DataTemplate> <StackPanel Orientation = “Horizontal”> <TextBox Text = “{Binding Path = FirstName, Mode = TwoWay}” Width = “100” Margin = “3 5 3 5″/> <TextBox Text = “{Binding Path = LastName, Mode = TwoWay}” Width = “100” Margin = “0 5 3 5″/> <TextBlock Text = “{Binding Path = FullName, Mode = OneWay}” Margin = “0 5 3 5″/> </StackPanel> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> </StackPanel> </Grid> </UserControl> Step 7 − Now add the StudentView into your MainPage.xaml file using the following code. <Window x:Class = “MVVMDemo.MainWindow” xmlns = “http://schemas.microsoft.com/winfx/2006/xaml/presentation” xmlns:x = “http://schemas.microsoft.com/winfx/2006/xaml” xmlns:d = “http://schemas.microsoft.com/expression/blend/2008” xmlns:mc = “http://schemas.openxmlformats.org/markup-compatibility/2006” xmlns:local = “clr-namespace:MVVMDemo” xmlns:views = “clr-namespace:MVVMDemo.Views” mc:Ignorable = “d” Title = “MainWindow” Height = “350” Width = “525”> <Grid> <views:StudentView x:Name = “StudentViewControl” Loaded = “StudentViewControl_Loaded”/> </Grid> </Window> Step 8 − Here is the implementation for Loaded event in the MainPage.xaml.cs file, which will update the View from the ViewModel. using System.Windows; namespace MVVMDemo { /// <summary> /// Interaction logic for MainWindow.xaml /// </summary> public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); } private void StudentViewControl_Loaded(object sender, RoutedEventArgs e) { MVVMDemo.ViewModel.StudentViewModel studentViewModelObject = new MVVMDemo.ViewModel.StudentViewModel(); studentViewModelObject.LoadStudents(); StudentViewControl.DataContext = studentViewModelObject; } } } Step 9 − When the above code is compiled and executed, you will receive the following output on your main window. We recommend you to execute the above example in a step-by-step manner for better understanding. Print Page Previous Next Advertisements ”;

MVVM – Events ”; Previous Next An event is a programming construct that reacts to a change in state, notifying any endpoints that have registered for notification. Primarily, events are used to inform a user input via the mouse and keyboard, but their usefulness is not limited to that. Whenever a state change is detected, perhaps when an object has been loaded or initialized, an event can be fired to alert any interested third parties. In a WPF application that uses the MVVM (Model-View-ViewModel) design pattern, the view model is the component that is responsible for handling the application”s presentation logic and state. The view”s code-behind file should contain no code to handle events that are raised from any User Interface (UI) element such as a Button or a ComboBox nor should it contain any domain specific logic. Ideally, the code-behind of a View contains only a constructor that calls the InitializeComponent method and perhaps some additional code to control or interact with the view layer that is difficult or inefficient to express in XAML, e.g. complex animations. Let’s take a look at a simple example of button click events in our application. Following is the XAML code of MainWindow.xaml file in which you will see two buttons. <Window x:Class = “MVVMHierarchiesDemo.MainWindow” xmlns = “http://schemas.microsoft.com/winfx/2006/xaml/presentation” xmlns:x = “http://schemas.microsoft.com/winfx/2006/xaml” xmlns:d = “http://schemas.microsoft.com/expression/blend/2008” xmlns:mc = “http://schemas.openxmlformats.org/markup-compatibility/2006” xmlns:local = “clr-namespace:MVVMHierarchiesDemo” xmlns:views = “clr-namespace:MVVMHierarchiesDemo.Views” xmlns:viewModels = “clr-namespace:MVVMHierarchiesDemo.ViewModel” mc:Ignorable = “d” Title = “MainWindow” Height = “350” Width = “525”> <Window.DataContext> <local:MainWindowViewModel/> </Window.DataContext> <Window.Resources> <DataTemplate DataType = “{x:Type viewModels:CustomerListViewModel}”> <views:CustomerListView/> </DataTemplate> <DataTemplate DataType = “{x:Type viewModels:OrderViewModel}”> <views:OrderView/> </DataTemplate> </Window.Resources> <Grid> <Grid.RowDefinitions> <RowDefinition Height = “Auto” /> <RowDefinition Height = “*” /> </Grid.RowDefinitions> <Grid x:Name = “NavBar”> <Grid.ColumnDefinitions> <ColumnDefinition Width = “*” /> <ColumnDefinition Width = “*” /> <ColumnDefinition Width = “*” /> </Grid.ColumnDefinitions> <Button Content = “Customers” Command = “{Binding NavCommand}” CommandParameter = “customers” Grid.Column = “0” /> <Button Content = “Order” Command = “{Binding NavCommand}” CommandParameter = “orders” Grid.Column = “2” /> </Grid> <Grid x:Name = “MainContent” Grid.Row = “1”> <ContentControl Content = “{Binding CurrentViewModel}” /> </Grid> </Grid> </Window> You can see that the button Click property is not used in the above XAML file but Command and CommandParameter properties are used to load different Views when the button is pressed. Now you need to define the commands implementation in MainWindowViewModel.cs file but not in View file. Following is the complete MainWindowViewModel implementation. using MVVMHierarchiesDemo.ViewModel; using MVVMHierarchiesDemo.Views; using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; namespace MVVMHierarchiesDemo { class MainWindowViewModel : BindableBase { public MainWindowViewModel() { NavCommand = new MyICommand<string>(OnNav); } private CustomerListViewModel custListViewModel = new CustomerListViewModel(); private OrderViewModel orderViewModelModel = new OrderViewModel(); private BindableBase _CurrentViewModel; public BindableBase CurrentViewModel { get { return _CurrentViewModel; } set { SetProperty(ref _CurrentViewModel, value); } } public MyICommand<string> NavCommand { get; private set; } private void OnNav(string destination) { switch (destination) { case “orders”: CurrentViewModel = orderViewModelModel; break; case “customers”: default: CurrentViewModel = custListViewModel; break; } } } } Derive all of your ViewModels from BindableBase class. When the above code is compiled and executed, you will see the following output. As you can see, we have added only two buttons and a CurrentViewModel on our MainWindow. Now if you click the any button then it will navigate to that particular View. Let’s click on Customers button and you will see that the CustomerListView is displayed. We recommend you to execute the above example in a step-by-step method for better understanding. Print Page Previous Next Advertisements ”;

MVVM – Responsibilities ”; Previous Next MVVM pattern consists of three parts − Model, View, and ViewModel. Most of the developers at the start are little confused as to what a Model, View and ViewModel should or shouldn”t contain and what are the responsibilities of each part. In this chapter we will learn the responsibilities of each part of the MVVM pattern so that you can clearly understand what kind of code goes where. MVVM is really a layered architecture for the client side as shown in the following figure. The presentation layer is composed of the views. The logical layer are the view models. The presentation layer is the combination of the model objects. The client services that produce and persist them either directed access in a two-tier application or via service calls in and then to your application. The client services are not officially part of the MVVM pattern but it is often used with MVVM to achieve further separations and avoid duplicate code. Model Responsibilities In general, model is the simplest one to understand. It is the client side data model that supports the views in the application. It is composed of objects with properties and some variables to contain data in memory. Some of those properties may reference other model objects and create the object graph which as a whole is the model objects. Model objects should raise property change notifications which in WPF means data binding. The last responsibility is validation which is optional, but you can embed the validation information on the model objects by using the WPF data binding validation features via interfaces like INotifyDataErrorInfo/IDataErrorInfo View Responsibilities The main purpose and responsibilities of views is to define the structure of what the user sees on the screen. The structure can contain static and dynamic parts. Static parts are the XAML hierarchy that defines the controls and layout of controls that a view is composed of. Dynamic part is like animations or state changes that are defined as part of the View. The primary goal of MVVM is that there should be no code behind in the view. It’s impossible that there is no code behind in view. In view you at least need the constructor and a call to initialize component. The idea is that the event handling, action and data manipulation logic code shouldn’t be in the code behind in View. There are also other kinds of code that have to go in the code behind any code that”s required to have a reference to UI element is inherently view code. ViewModel Responsibilities ViewModel is the main point of MVVM application. The primary responsibility of the ViewModel is to provide data to the view, so that view can put that data on the screen. It also allows the user to interact with data and change the data. The other key responsibility of a ViewModel is to encapsulate the interaction logic for a view, but it does not mean that all of the logic of the application should go into ViewModel. It should be able to handle the appropriate sequencing of calls to make the right thing happen based on user or any changes on the view. ViewModel should also manage any navigation logic like deciding when it is time to navigate to a different view. Print Page Previous Next Advertisements ”;

MVVM – Introduction ”; Previous Next The well-ordered and perhaps the most reusable way to organize your code is to use the ”MVVM” pattern. The Model, View, ViewModel (MVVM pattern) is all about guiding you in how to organize and structure your code to write maintainable, testable and extensible applications. Model − It simply holds the data and has nothing to do with any of the business logic. ViewModel − It acts as the link/connection between the Model and View and makes stuff look pretty. View − It simply holds the formatted data and essentially delegates everything to the Model. Separated Presentation To avoid the problems caused by putting application logic in code-behind or XAML, it”s best to use a technique known as separated presentation. We”re trying to avoid this, where we will have XAML and code-behind with the minimum required for working with user interface objects directly. User interface classes also contain code for complex interaction behaviors, application logic, and everything else as shown in the following figure on the left side. With separated presentation, the user interface class is much simpler. It has the XAML of course, but the code behind does as little as is practical. The application logic belongs in a separate class, which is often referred to as the model. However, this is not the whole story. If you stop here, you”re likely to repeat a very common mistake that will lead you down the path of data binding insanity. A lot of developers attempt to use data binding to connect elements in the XAML directly to properties in the model. Now sometimes this can be okay, but often it”s not. The problem is the model is entirely concerned with matters of what the application does, and not with how the user interacts with the application. The way in which you present data is often somewhat different from how it”s structured internally. Moreover, most user interfaces have some state that does not belong in the application model. For example, if your user interface uses a drag and drop, something needs to keep track of things like where the item being dragged is right now, how its appearance should change as it moves over possible drop targets, and how those drop targets might also change as the item is dragged over them. This sort of state can get surprisingly complex, and needs to be thoroughly tested. In practice, you normally want some other class sitting between the user interface and the model. This has two important roles. First, it adapts your application model for a particular user interface view. Second, it”s where any nontrivial interaction logic lives, and by that, I mean code required to get your user interface to behave in the way you want. Print Page Previous Next Advertisements ”;