Presentation is loading. Please wait.

Presentation is loading. Please wait.

Adam Schultz MVVM and WPF. MVVM Model, View, ViewModel A software architecture designed to separate out User Interface design, Business Logic, and Data.

Similar presentations


Presentation on theme: "Adam Schultz MVVM and WPF. MVVM Model, View, ViewModel A software architecture designed to separate out User Interface design, Business Logic, and Data."— Presentation transcript:

1 Adam Schultz MVVM and WPF

2 MVVM Model, View, ViewModel A software architecture designed to separate out User Interface design, Business Logic, and Data Logic.

3 History Based on a similar architecture (MVC — Model, View, Controller) Built specifically for WPF and Silverlight in.NET using XAML (front end) and.NET languages (“code behind”) Announced in 2005 by John Gossman — a WPF and Silverlight architect at Microsoft at that time.

4 Separation of Concerns Distinct separation between “User Interface” logic and “Back End” or “Business” logic. UI developers and Business Logic Developers do not need to be dependent on each other. Both teams can work on their code simultaneously –Productivity! –Time savings!

5 Why Separate Concerns? UI’s often go through multiple iterations, especially at the end of a development cycle Separating UI from Business Logic allow changes to be made to the UI easily and without impacting the rest of the system.

6 MVVM MVVM attempts to use similar separations made in MVC [Model, View, Controller] while including the data binding capabilities of WPF. This is done in an attempt to have the Model and the Framework drive as much of the application as possible. If this separation is done properly, there should be little to no business logic in your Views (UI portion of the code).

7 Model The Model is the application’s representation of the Data This can be either an object representation of your data, or a set of data calls (normally to a database or a web service) to retrieve your data. Usually includes business rules about the data itself –Required Fields –Formatting Requirements –Required associations to other data No other logic is found in the Model. It is just Data.

8 View Also known as the “Presentation Layer” Displayed content visible to the end user goes here Includes any logic about how to display any visual elements Views should be written under the assumption that any business logic is handled elsewhere

9 ViewModel ViewModel is responsible for exposing objects from the Model in such a way that the View can use these objects. This is normally done through properties in the ViewModel that are then bound to in the View This is where the business logic of an application is found. No longer need to write code like this: –TextBox1.Text = “New text from Database”; Can be viewed as the “State” of the data in the Model

10 Binder This is the utility that populates Views with information from the ViewModels. In WPF, this piece is used by writing binding statements to display data from the ViewModel inside the View.

11 Which one do you use? Anything concerned with the visual appearance of the UI, or anything displayed to the user should be placed in the View Anything that deals with the logical behavior of an application should be placed in the ViewModel. This logic should have no knowledge of how it is displayed, or even which View it will be used in.

12 View or ViewModel? Code that determines how do display controls programmatically? –(ex: conditionally show a text box)

13 View or ViewModel? Code that manipulates what items to show in a view? –(ex: the specific items to show in a drop down list)

14 View or ViewModel? Code to highlight the color of a selected item in a list?

15 View or ViewModel? The Rules defining the fact that an Email Address is required on a form submitted by a user

16 WPF Windows Presentation Foundation.NET implementation of MVVM WPF allows for easy separation of the User Interface from an application’s Business Logic

17 Recommended Resource http://www.wpftutorial.net Great resource for all things WPF They even have a section on MVVM comparing it to MVC and MVP –http://www.wpftutorial.net/MVVM.htmlhttp://www.wpftutorial.net/MVVM.html

18 XAML Front end code (used in MVVM Views) An XML based language for defining the placement and styling of controls Contains an associated “Code Behind” – a.NET class for programmatic layout

19 XAML

20 Common Layout Controls: Grid http://www.wpftutorial.net/GridLayout.html Similar to an HTML table

21 Common Layout Controls: Grid Define Rows and Columns

22 Common Layout Controls: Grid To place a control in a grid, place it inside the element –define the Grid.Row and Grid.Column properties

23 Common Layout Controls: StackPanel http://www.wpftutorial.net/StackPanel.html “stack” Controls on top of each other

24 Common Layout Controls: StackPanel No need to define columns or rows. Panel uses as much space as it needs to display its inner controls

25 Common Layout Controls: StackPanel Can also “stack” horizontally

26 Bindings Bindings allow information to pass between the View and the ViewModel “Bind” to a property in the ViewModel By default, WPF uses “Two Way” bindings.

27 INotifyPropertyChanged Bindings can also be used to have the View redraw a value. The object containing the property should implement this interface Content automatically is updated when using this interface

28 INotifyPropertyChanged

29 Using INotifyPropertyChanged

30 Property Changed This binding will update the ViewModel when the user enters text With NotifyPropertyChanged, this textbox will be updated when the ViewModel changes its value in code No more direct coding: –TextBox1.Text = “New Text”;

31 Questions

32 Lab


Download ppt "Adam Schultz MVVM and WPF. MVVM Model, View, ViewModel A software architecture designed to separate out User Interface design, Business Logic, and Data."

Similar presentations


Ads by Google