Introduction to WPF and MVVM
-
Upload
sirar-salih -
Category
Technology
-
view
735 -
download
3
Transcript of Introduction to WPF and MVVM
![Page 1: Introduction to WPF and MVVM](https://reader033.fdocuments.us/reader033/viewer/2022061609/558781b2d8b42acc4c8b475b/html5/thumbnails/1.jpg)
INTRODUCTION TO WPF AND MVVM
SIRAR SALIH
.NET CONSULTANT
![Page 2: Introduction to WPF and MVVM](https://reader033.fdocuments.us/reader033/viewer/2022061609/558781b2d8b42acc4c8b475b/html5/thumbnails/2.jpg)
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
![Page 3: Introduction to WPF and MVVM](https://reader033.fdocuments.us/reader033/viewer/2022061609/558781b2d8b42acc4c8b475b/html5/thumbnails/3.jpg)
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
![Page 4: Introduction to WPF and MVVM](https://reader033.fdocuments.us/reader033/viewer/2022061609/558781b2d8b42acc4c8b475b/html5/thumbnails/4.jpg)
13.04.2023
Windows Presentation Foundation
• Microsoft PixelSense (Surface 2.0)
/ 4
![Page 5: Introduction to WPF and MVVM](https://reader033.fdocuments.us/reader033/viewer/2022061609/558781b2d8b42acc4c8b475b/html5/thumbnails/5.jpg)
13.04.2023
Windows Presentation Foundation
• Silverlight– Most functionality is a subset of WPF
• Latest release: WPF 4.5
/ 5
![Page 6: Introduction to WPF and MVVM](https://reader033.fdocuments.us/reader033/viewer/2022061609/558781b2d8b42acc4c8b475b/html5/thumbnails/6.jpg)
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
![Page 7: Introduction to WPF and MVVM](https://reader033.fdocuments.us/reader033/viewer/2022061609/558781b2d8b42acc4c8b475b/html5/thumbnails/7.jpg)
13.04.2023
Model-View-ViewModel
/ 7
View
ViewModel
Model
GUI
Logic
Domain
![Page 8: Introduction to WPF and MVVM](https://reader033.fdocuments.us/reader033/viewer/2022061609/558781b2d8b42acc4c8b475b/html5/thumbnails/8.jpg)
13.04.2023
WPF + MVVM
/ 8
How about we combine them? That’s awesome!
![Page 9: Introduction to WPF and MVVM](https://reader033.fdocuments.us/reader033/viewer/2022061609/558781b2d8b42acc4c8b475b/html5/thumbnails/9.jpg)
13.04.2023
Combining WPF and MVVM
/ 9
View
ViewModel
DataBinding
Model
Commands
![Page 10: Introduction to WPF and MVVM](https://reader033.fdocuments.us/reader033/viewer/2022061609/558781b2d8b42acc4c8b475b/html5/thumbnails/10.jpg)
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
![Page 11: Introduction to WPF and MVVM](https://reader033.fdocuments.us/reader033/viewer/2022061609/558781b2d8b42acc4c8b475b/html5/thumbnails/11.jpg)
13.04.2023
Commands
/ 11
• Enable the View to call methods in the ViewModel
• Exposed as properties from the ViewModel
• Implement ICommand
![Page 12: Introduction to WPF and MVVM](https://reader033.fdocuments.us/reader033/viewer/2022061609/558781b2d8b42acc4c8b475b/html5/thumbnails/12.jpg)
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
![Page 13: Introduction to WPF and MVVM](https://reader033.fdocuments.us/reader033/viewer/2022061609/558781b2d8b42acc4c8b475b/html5/thumbnails/13.jpg)
13.04.2023
MVVM Light Toolkit
/ 13
• By Laurent Bugnion• Small and simple• Breaking the monotony• Essentials library• Extras library • Project templates• Code snippets
![Page 14: Introduction to WPF and MVVM](https://reader033.fdocuments.us/reader033/viewer/2022061609/558781b2d8b42acc4c8b475b/html5/thumbnails/14.jpg)
13.04.2023
ViewModelBase
/ 14
• Utility class that ViewModel inherits from
• Eliminates code duplication
• Introduces the RaisePropertyChanged method, among others
![Page 15: Introduction to WPF and MVVM](https://reader033.fdocuments.us/reader033/viewer/2022061609/558781b2d8b42acc4c8b475b/html5/thumbnails/15.jpg)
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)
![Page 16: Introduction to WPF and MVVM](https://reader033.fdocuments.us/reader033/viewer/2022061609/558781b2d8b42acc4c8b475b/html5/thumbnails/16.jpg)
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
![Page 17: Introduction to WPF and MVVM](https://reader033.fdocuments.us/reader033/viewer/2022061609/558781b2d8b42acc4c8b475b/html5/thumbnails/17.jpg)
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
![Page 18: Introduction to WPF and MVVM](https://reader033.fdocuments.us/reader033/viewer/2022061609/558781b2d8b42acc4c8b475b/html5/thumbnails/18.jpg)
13.04.2023
Messaging
/ 18
View
ViewModelView
ViewModel
View
ViewModelMessages
Messages
![Page 19: Introduction to WPF and MVVM](https://reader033.fdocuments.us/reader033/viewer/2022061609/558781b2d8b42acc4c8b475b/html5/thumbnails/19.jpg)
13.04.2023
Messaging
/ 19
• Message:
• Sender:
• Receiver:
![Page 20: Introduction to WPF and MVVM](https://reader033.fdocuments.us/reader033/viewer/2022061609/558781b2d8b42acc4c8b475b/html5/thumbnails/20.jpg)
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
![Page 21: Introduction to WPF and MVVM](https://reader033.fdocuments.us/reader033/viewer/2022061609/558781b2d8b42acc4c8b475b/html5/thumbnails/21.jpg)
13.04.2023
Live demo
/ 21
![Page 22: Introduction to WPF and MVVM](https://reader033.fdocuments.us/reader033/viewer/2022061609/558781b2d8b42acc4c8b475b/html5/thumbnails/22.jpg)
13.04.2023
Future of WPF
/ 22
• Windows RT– No support
• Windows 8 Desktop– Works
• XAML usage in Windows 8 Store apps
![Page 23: Introduction to WPF and MVVM](https://reader033.fdocuments.us/reader033/viewer/2022061609/558781b2d8b42acc4c8b475b/html5/thumbnails/23.jpg)
13.04.2023
QUESTIONS?
THANK YOU
/ 23
![Page 24: Introduction to WPF and MVVM](https://reader033.fdocuments.us/reader033/viewer/2022061609/558781b2d8b42acc4c8b475b/html5/thumbnails/24.jpg)