Meetup - Getting Started with MVVM Light for WPF - 11 may 2019

iFour ConsultancyIntroduction To MVVM Light
Enlighten yourself with MVVM light

● Introduction
● WPF
● XAML
● MVVM
● Binding View & ViewModel
● ViewModel Properties
● Commands: Relay Command & Delegate Commands
● Observable Collection
● EventToCommand Behavior
Topics

Windows Presentation Foundation (WPF)
● An entirely new graphical display system for Windows
● Empowers rich-media applications
● Provides clear separation between the UI (XAML) and the business logic (C#,VB.NET)
● Influenced by modern display technologies such as HTML , CSS and Flash
● Hardware-accelerated
Introduction to WPF

● Includes a number of extremely rich typographic and text rendering feature
● Text rendering takes advantage of ClearType technology
● Uses caching of pre-rendered text in the video memory
● Resolution-independent architecture
● Graphics are Direct3D applications
● Direct3D (part of DirectX) is used in graphical applications where performance is important
● Uses the video card hardware for rendering
● The result: high-quality rich-media UI
● Vector-based graphics allows to scale without loss of quality
Introduction to WPF contd.

WPF Features
Feature Description
Control inside a Control Allows to define a control inside another control as a content.
Data binding Mechanism to display and interact with data between UI elements
and data object on user interface.
Media services Integrated system for building user interfaces with common media
elements like images, audio, and video.
Templates Define the look of an element directly with a Template
Animations Building interactivity and movement on user Interface
Alternative input Supports multi-touch input on Windows 7 and above.
Direct3D Allows to display more complex graphics and custom themes

● XAML = Extensible Application Markup Language
● Simple language based on XML to create and initialize .NET objects with hierarchical
relations.
● Used to create user interfaces in WPF, Silverlight, declare workflows in WF (Workflow
Foundation) and for electronic paper in the XPS standard.
● WPF classes have parameter less constructors which makes it perfectly fit for XML languages
like XAML.
Introduction to XAML

● Easy to create, initialize, and set properties of objects with hierarchical relations.
● XAML code is short and clear to read
● Separation of designer code and logic
● Graphical design tools like Expression Blend require XAML as source.
● Enables visual designers to create user interface elements directly.
● XAML is just another way to create and initialize objects.
Advantages of XAML

● By default, MainWindow.xaml will look like.
Basic Syntsax of XAML

● MVVM stands for Model – View – View Model.
● Model - Deals with the data without interrupting
business logic of application
● View - Representation of UI, which contains all the
controls, commands and defines the visual layout.
● View Model - Bridge between view and model. It
introduces Presentation Separation.
Introduction to MVVM

● Main objective of MVVM is Separation of UI and Logic.
● Chances that using ‘Code Behind’ in application can be hard to manage.
● MVVM assures higher productivity as layers of application can be developed simultaneously.
● Multiple frameworks available that follows MVVM structure. Few of them are:
● MVVM Light
● Prism
● Caliburn Micro and many more
Introduction to MVVM Contd.

● View handles UI events and maps them to the viewmodel via commands.
● Here, binding sets the value of the Text property of Textblock.
● TextBlock’s Text would still be empty because there is nothing which links ViewModel class to
the Window.
● Both can be linked using DataContext property.
Binding View & ViewModel
1
2
3
4
public class ViewModel : ViewModelBase
{
public string FirstName { get; set; }
}
1 <TextBlock Text="{Binding Path=FirstName}" VerticalAlignment="Center“ HorizontalAlignment="Center"/>

● By assigning Viewmodel to view as its DataContext, we can bind members of viewmodel to
view.
● Few ways to assign DataContext are shown as below :
Binding View & ViewModel

ViewModel has no knowledge about View and properties. So, What binds View and
ViewModel?
● ViewModels implement INotifyPropertyChanged interface, so property changes in ViewModel
can be passed onto View.
● This interface defines PropertyChanged event, that needs to be raised by the ViewModel when
one of its property changes.
ViewModel Properties
Here , property AutoSaveTime will get updated in viewmodel ,
but whether its changed value will reflect in view or not? , that depends on
mode of binding used in view.

● Types of Binding
● OneWay
● TwoWay
● OneTime
● OneWayToSource
ViewModel Properties and Bindings
OneWay Data is bound to its source; i.e., business model to its target; i.e. UI.
TwoWay Data is getting updated from both sides; i.e., source and target.
OneTime Same behaviour as OneWay except it will only update the user interface one time.
OneWayToSource Reverse of OneWay binding; it updates the source property when the target property changes.

Binding is actually a Markup Extension. Let's discuss about the Members that are there in Binding :
● Source : Holds the DataSource. References the DataContext of the control.
● ElementName : Acts as a replacement to Source.
● Path : Defines the actual property path to get the String Data.
Binding Members

● Mode : Defines how the data will be flown.
● UpdateSourceTrigger : Defines when the source will be updated.
● The value of UpdateSourceTrigger can be :
● PropertyChanged : Whenever anything is updated in the control, the other bound element
will reflect the same.
● LostFocus : Whenever the property loses its focus, the property gets updated.
● Explicit : If it is used, need to explicitly set when to update the Source
Binding Members Contd.
BindingExpression bexp = mytextbox.GetBindingExpression(TextBox.TextProperty);
bexp.UpdateSource();

● Converter : Used when the source and the target have different data formats or need
some conversion
● StringFormat : A formatting string that indicates the Format to which the data will
follow.
● ConverterParameter : Used in addition to Converter to send parameters to Converter.
● ValidatesOnDataErrors : When specified, the DataErrors will be validated. IDataErrorInfo
runs custom Validation block when Data object is updated.
Binding Members Contd.

● Implementation of the ICommand interface that is part of the .NET Framework.
● Used in MVVM applications.
● The ICommand interface specifies three members:
● The method Execute(object) is called when the command is initialized.
● The CanExecuteChanged must be raised by the command implementation when the
CanExecute method needs to be reevaluated.
● The method CanExecute(object) returns a Boolean.
True -> command can be executed
False -> control will be automatically disabled
What is Command?

Relay Command
● Implements the ICommand interface and can therefore
be used to bind to Commands in XAML.
● The constructor takes two arguments;
● An Action which will be executed if ICommand.Execute
iscalled.
● A Func<bool> determines if the action can be
executed.
public ICommand MyCommand => new RelayCommand(
() =>
{
//execute action
Message = "clicked Button";
},
() =>
{
//return true if button should be enabled or not
return true;
}
);

Relay Command <T>
● Allows to directly pass an object to the command.
● Implements the ICommand interface and can therefore be used to bind to Commands in XAML
● The CommandParameter property is used to pass the object to the command.
1 <Button Command="{Binding MyCommand}" CommandParameter ="{Binding MyModel}" />

Relay Command
● Some notable effects:
● If canExecute returns false, the Button will be disabled for the user
● Before the action is really executed, canExecute will be checked again
● You can call MyCommand.RaiseCanExecuteChanged(); to force reevaluation of the
canExecute Func.

● Implementation of the System.Windows.Input.ICommand interface.
● Can be used to create commands in a ViewModel.
● Calls methods (delegates) that are assigned to the command when the command’s
Execute and CanExecute logic is invoked
● The following delegate commands are available.
● DelegateCommand<T> - Specifies a command whose Execute and CanExecute delegates
accept a single parameter of type T.
The Delegate Commands

● DelegateCommand - Specifies a command whose Execute and CanExecute delegates not
having any parameters.
● CommandParameter Conversion
● Automatically converts the command argument to the parameterized type if possible.
The Delegate Commands

● Collection of objects of a same type just like List or Array.
● Resides in System.Collections.ObjectModel namespace.
● Collection is notified each and every time when new object is added or removed from
it.
Observable Collection

● Duetothis,UIelementbidtoobservablecollectionpropertyisupdatedautomatically.
● ReasonbehindthisbindingisthatObservableCollectionimplementsinterfacenamed:
● INotifyCollectionChanged
● INotifyPropertyChanged
Observable Collection Contd.

● This demonstrates, how you can bind item source of Grid to ObservableCollection.
Observable Collection Contd.

● Event is fired whenever there is input from user via keyboard or mouse as well as when UI
element is loaded or initialized.
● When using MVVM pattern, there should not be tight coupling between view and code behind.
● In this scenario, we can not handle events in code behind.
● EventToCommand behavior allows to bind an event to command.
● Let’s see an example of Event Triggers with InvokeCommandAction.
EventToCommand Behavior

● Below are the steps of how to use InvokeCommandAction:
● Add the System.Windows.Interactivity reference
● Add below reference to the xaml file:
● Set Event Triggers for Button:
EventToCommand Behavior Contd.

● ViewModel class will be used to bind the Mouse’s Double Click Event defined in
xaml to Command.

Another way to bind an event to command
● EventToCommand class provided in MVVM Light Toolkit.
● Add Namespace
● Set Event Triggers for Button
● Viewmodel binding of command will be the same.

MVVM Light Messenger
● Allows exchange of messages between objects..
● Used for sending messages between viewmodels.
● Implementation of Mediator pattern in MVVM
Light toolkit.
● Decreases coupling between viewmodels.

● Messaging requires three steps
● A message to send
● A sending event
● A receiving property
Messenger Contd.
1
2
3
4
5
6
7
namespace MvvmLightMessenging.Messages
{
public class ButtonMessage
{
public string ButtonText { get; set; }
}
}

Messenger Contd.
1
2
3
4
private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
{
Messenger.Default.Send<ButtonMessage>(new ButtonMessage(){ButtonText =
"Button Pressed!"});
}
1
2
3
4
Messenger.Default.Register<ButtonMessage>(this, (message) =>
{
this.Data = message.ButtonText;
});

Meetup - Getting Started with MVVM Light for WPF - 11 may 2019

More Related Content

What's hot (20)

Similar to Meetup - Getting Started with MVVM Light for WPF - 11 may 2019 (20)

Recently uploaded (20)

Meetup - Getting Started with MVVM Light for WPF - 11 may 2019

Editor's Notes