INTRODUCTION TO WPF AND MVVM

SIRAR SALIH

.NET CONSULTANT

OUTLINE

• Windows Presentation Foundation• The Model-View-ViewModel Pattern• WPF + MVVM = awesome! • MVVM Light Toolkit• ViewModelBase• EventToCommand and RelayCommand• Messaging• DispatcherHelper• Live demo• Future of WPF

13.04.2023

Windows Presentation Foundation

• Graphical subsystem introduced by Microsoft to render user interfaces, and allow development of rich, interactive client applications

• Was initially known as «Avalon» and first released in .NET 3.0

• Uses DirectX

• 2D/3D rendering, vector graphics, animation etc.

• Attempts to seperate UI from logic– XAML

• Deployment– Standalone desktop client– Can also be embedded in web

/ 3

13.04.2023

Windows Presentation Foundation

• Microsoft PixelSense (Surface 2.0)

/ 4

13.04.2023

Windows Presentation Foundation

• Silverlight– Most functionality is a subset of WPF

• Latest release: WPF 4.5

/ 5

13.04.2023

Model-View-ViewModel

/ 6

• Architectural pattern based on Model-View-Controller (MVC)

• Seperation of Concerns– Data/Domain objects (Model), GUI (View), logic (ViewModel)

• Eliminates «code-behind»

• The beauty of it: Designers can work indepedently on the views and UX, while developers work on the back-end

• Allows [easier]:– Maintainability– Testability– Blendability

13.04.2023

Model-View-ViewModel

/ 7

View

ViewModel

Model

GUI

Logic

Domain

13.04.2023

WPF + MVVM

/ 8

How about we combine them? That’s awesome!

13.04.2023

Combining WPF and MVVM

/ 9

View

ViewModel

DataBinding

Model

Commands

13.04.2023

DataBinding

/ 10

• Establishes connection between Views and ViewModels

• Enables the View to bind to properties in the ViewModel

• DataContext

• Two-way binding

• Dependency properties

13.04.2023

Commands

/ 11

• Enable the View to call methods in the ViewModel

• Exposed as properties from the ViewModel

• Implement ICommand

13.04.2023

MVVM frameworks for WPF

/ 12

Carbon MVVM

Cocktail

MVVM foundation

Cinch

MVVM Cross

OceanCore MVVM

Onyx

Goldlight

Reactive UI Catel

Jounce

Caliburn

Xomega

Prism

MVVM Light Toolkit

13.04.2023

MVVM Light Toolkit

/ 13

• By Laurent Bugnion• Small and simple• Breaking the monotony• Essentials library• Extras library • Project templates• Code snippets

13.04.2023

ViewModelBase

/ 14

• Utility class that ViewModel inherits from

• Eliminates code duplication

• Introduces the RaisePropertyChanged method, among others

13.04.2023

EventToCommand

/ 15

• Enables the passing of arguments to the ViewModel through the Command

• Interaction triggers are used on top, for events (that fire the command)

13.04.2023

RelayCommand

/ 16

• An alternative to Command and RoutedCommand in WPF

• Also implements ICommand

• Relays Execute to own defined method, therefore eliminates the need to create a class for each custom Command

13.04.2023

Messaging

/ 17

• Easier communication between ViewModels

• Uses Publish-Subscribe pattern

• A receiver ViewModel registeres on a specific type message

• A sender ViewModel creates a message of that specific type and sends it, receiver gets it

13.04.2023

Messaging

/ 18

View

ViewModelView

ViewModel

View

ViewModelMessages

Messages

13.04.2023

Messaging

/ 19

• Message:

• Sender:

• Receiver:

13.04.2023

DispatcherHelper

/ 20

• Useful when working on multi-threaded WPF applications

• Enables the calling of a method on the UI thread from a different thread

• Use this or DispatcherTimer when creating a thread, never use a Timer

13.04.2023

Live demo

/ 21

13.04.2023

Future of WPF

/ 22

• Windows RT– No support

• Windows 8 Desktop– Works

• XAML usage in Windows 8 Store apps

13.04.2023

QUESTIONS?

THANK YOU

/ 23