Basic Understanding How Data Binding and MVVM works in Xamarin Forms

Here are some simple insights about Data Binding and MVVM. If you already know about this topic or have heard about this before, I hope I could still contribute some ideas to you. If not, this basic representations will help you understand in a simplest manner.

Simple Understanding about Data Binding

Data Binding,

Allow properties of two objects to be linked so that a change in one causes change in the other.
One of the most important markup extensions in Xamarin.Forms and in other xaml based development tools.
Is also a process that establishes a connection between the application UI and business logic. - MSDN

In this image below,

The Data Binding serves as the bridge between the “View or UI” and the “Object”

“View or UI” so simply say, the “page” represents the binding target while the “Object” or we can say, the binding source.

Properties in Object represents,

1
2
3
4
5
string
int
bool
decimal
// and other C# property data types

Properties in Target represents available bindable ui elements.

In Xamarin Forms here are some of the common bindable ui elements or properties,

1
2
3
4
5
6
7
8
Text={Binding objectSource}
TextColor={Binding objectSource}
Command={Binding objectCommandSource}
ItemSource{Binding objectSource}
Content={Binding objectContent}
BackgroundColor={Binding objectSource}
Color={Binding objectSource}
// and much much more ...

The image below, shows a simple visualization in implementing data binding.

What are the Main Benefits?

Binding framework synchonizes automatically.
No need to write bunch of save and update codes in your app which is very time consuming.
Changes in source are pushed to the target directly.

Establishing Data Binding in Two Step Process:

The BindingContext (property target must be set to the source)
Binding Markup extension (Binding must established between the target and the source)

Common Mode Types

OneWay
- From Source to Target only.
TwoWay
- From Source to Target and Target to Source.
OneWayToSource
- From Target to Source only.

Other Benefits?

Data Conversion.
Output Formatting.

Simple Understanding about MVVM (Model-View-View-Model)

Is an Architectural Design Pattern.
MVVM was invented in XAML in mind.

From Bindings to MVVM

In this image, Model is compose of CustomerName(string) and CustomerAge(int). ViewModel represents the connection from Model to View. We use Notify Property Changed to automatically push the changes back and forth from View to ViewModel vice versa and the Binding acts like the agent to connect the ViewModel and the View.

You can also see the UI Button from View that it has a bindable button with a command stored in the ViewModel.

Here are some benefits of MVVM:

Separation of concerns.
Developers can create unit tests for the view model w/o using the view.
Easy to redesign the UI of the app w/o touching the code behind because the view is implemented entirely in XAML.
Since it’s architectural design pattern, it’s maintainable solution.