Category: mvvm

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 – Hooking Up ViewModel ”; Previous Next In this chapter, we will cover how to hook up ViewModel. It is a continuation of the last chapter in which we discussed the View first construction. Now, the next form of the first construction is a meta-pattern which is known as ViewModelLocator. It is a pseudo pattern and is layered on top of the MVVM pattern. In MVVM each View needs to be hooked up to its ViewModel. The ViewModelLocator is a simple approach to centralize the code and decoupling the view more. It means that it does not have to explicitly know about ViewModel type and how to construct it. There are a number of different approaches to use ViewModelLocator, but here we use the most similar to the one that”s part of the PRISM framework. ViewModelLocator provides a standard, consistent, declarative and loosely coupled way to do view first construction which automates the process of getting ViewModel hooked up to the View. The following figure represents the high level process of ViewModelLocator. Step 1 − Figure out which View type is being constructed. Step 2 − Identify the ViewModel for that particular View type. Step 3 − Construct that ViewModel. Step 4 − Set the Views DataContext to the ViewModel. To understand the basic concept, let”s have a look at the simple example of ViewModelLocator by continuing the same example from the last chapter. If you look at the StudentView.xaml file, you will see that we have statically hooked up the ViewModel. Now as shown in the following program, comment these XAML code also remove the code from Code-behind. <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” xmlns:viewModel = “clr-namespace:MVVMDemo.ViewModel” mc:Ignorable = “d” d:DesignHeight = “300” d:DesignWidth = “300”> <!–<UserControl.DataContext> <viewModel:StudentViewModel/> </UserControl.DataContext>–> <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> Now let’s create a new folder VML and add a new public class ViewModelLocator which will contain a single attached property (dependency property) AutoHookedUpViewModel as shown in the following code. public static bool GetAutoHookedUpViewModel(DependencyObject obj) { return (bool)obj.GetValue(AutoHookedUpViewModelProperty); } public static void SetAutoHookedUpViewModel(DependencyObject obj, bool value) { obj.SetValue(AutoHookedUpViewModelProperty, value); } // Using a DependencyProperty as the backing store for AutoHookedUpViewModel. //This enables animation, styling, binding, etc… public static readonly DependencyProperty AutoHookedUpViewModelProperty = DependencyProperty.RegisterAttached(“AutoHookedUpViewModel”, typeof(bool), typeof(ViewModelLocator), new PropertyMetadata(false, AutoHookedUpViewModelChanged)); And now you can see a basic attach property definition. To add behavior to the property, we need to add a changed event handler for this property which contains the automatic process of hooking up the ViewModel for View. The code to do this is as follows − private static void AutoHookedUpViewModelChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { if (DesignerProperties.GetIsInDesignMode(d)) return; var viewType = d.GetType(); string str = viewType.FullName; str = str.Replace(“.Views.”, “.ViewModel.”); var viewTypeName = str; var viewModelTypeName = viewTypeName + “Model”; var viewModelType = Type.GetType(viewModelTypeName); var viewModel = Activator.CreateInstance(viewModelType); ((FrameworkElement)d).DataContext = viewModel; } Following is the complete implementation of ViewModelLocator class. using System; using System.ComponentModel; using System.Windows; namespace MVVMDemo.VML { public static class ViewModelLocator { public static bool GetAutoHookedUpViewModel(DependencyObject obj) { return (bool)obj.GetValue(AutoHookedUpViewModelProperty); } public static void SetAutoHookedUpViewModel(DependencyObject obj, bool value) { obj.SetValue(AutoHookedUpViewModelProperty, value); } // Using a DependencyProperty as the backing store for AutoHookedUpViewModel. //This enables animation, styling, binding, etc… public static readonly DependencyProperty AutoHookedUpViewModelProperty = DependencyProperty.RegisterAttached(“AutoHookedUpViewModel”, typeof(bool), typeof(ViewModelLocator), new PropertyMetadata(false, AutoHookedUpViewModelChanged)); private static void AutoHookedUpViewModelChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { if (DesignerProperties.GetIsInDesignMode(d)) return; var viewType = d.GetType(); string str = viewType.FullName; str = str.Replace(“.Views.”, “.ViewModel.”); var viewTypeName = str; var viewModelTypeName = viewTypeName + “Model”; var viewModelType = Type.GetType(viewModelTypeName); var viewModel = Activator.CreateInstance(viewModelType); ((FrameworkElement)d).DataContext = viewModel; } } } First thing to do is to add a namespace so that we can get to that ViewModelLocator type in the root of our project. Then on route element which is a view type, add AutoHookedUpViewModel property and set it to true. xmlns:vml = “clr-namespace:MVVMDemo.VML” vml:ViewModelLocator.AutoHookedUpViewModel = “True” Here is the complete implementation of StudentView.xaml file. <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” xmlns:viewModel = “clr-namespace:MVVMDemo.ViewModel” xmlns:vml = “clr-namespace:MVVMDemo.VML” vml:ViewModelLocator.AutoHookedUpViewModel = “True” mc:Ignorable = “d” d:DesignHeight = “300” d:DesignWidth = “300”> <!–<UserControl.DataContext> <viewModel:StudentViewModel/> </UserControl.DataContext>–> <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> When the above code is compiled and executed, you will see that ViewModelLocator is hooking up the ViewModel for that particular View. A key thing to notice about this is the view is no longer coupled in a way to what the type of its ViewModel is or how it gets constructed. That’s all been moved out to the central location inside the ViewModelLocator. 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 ”;

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 ”;