>> Welcome back everyone to the Xamarin show.
I'm your host James Montemagno,
and today we're going to do a little Xamarin Forms 101.
I'm going to introduce you to one of
my favorite features when using
the MVVM or Model-View-View-Model architecture,
and Xamarin Forms is called Data Binding.
Data Binding enables us to know that for all intense purposes,
separate our UI from
our business logic but still allow them to interact.
What I mean by that,
is that I can have my UI where I'm entering a field,
and then I can have my code behind react to it and update
a different control or better yet
perhaps when I go and pull some data down from the server,
it updates my user interface automatically.
Maybe I get a click event,
I can go and react to that without writing
anything in the code behind of my XAML User-interface.
Let me show you what I mean.
So, let's head over to Visual Studio.
I have a very simple Xamarin Forms application,
basically, File New.
Here on my Android iOS app and my blank page for MainPage.Xaml.
Now inside of here, I've a very simple stack layout.
I have an entry where I'm going to enter a name,
and then I have a label here.
This a label we'll say firstName,
lastName, and whatever I enter inside of the entry.
Now without any MVVM or any data binding,
I could do all of this using the code behind of the Xamarin page.
I can say x colon name and say entry name.
Then I could come into my code behind here.
I could say EntryName.Register
for an event update do the same for label, back and forth.
However, the problem here is
that this sort of gets a little bit messy.
I have different names here,
everything is in one file,
I'm not really able to test that easily,
and that's where MVVM and data binding come in.
So, the first thing I'm going to do here is,
I'm going to say "Add new
class" and we're going to create a new class,
and we're going to call it MainViewModel.
Now this is main page,
some MainViewModel sort of sinks them together.
We're going to make this a public class,
and to enable data binding what we're going to do is
implement an interface on our ViewModel,
that Xamarin Forms will register for events
for and we're going to call it, INotifyPropertyChanged.
We'll go ahead and bring in the namespace
of System.ComponentModel.
Then we're gonna go ahead and implement the interface.
The interface is a simple public event of property changed.
So, what happens here is Xamarin Forms of
registers for property change notifications,
that we can then notify Xamarin Forms about.
So,what we'll do here is create
a new void method called OnPropertyChanged.
You can of course call this anything that you would
like PropertyChange, there we go.
I'm going to pass it in a name.
Now, this method is a method that
we're going to call ourselves from this class.
So, whenever we want to notify
the user interface that one of our properties has changed,
we will invoke PropertyChanged.
We're going to use some C sharp features
to ensure that it's not null,
and then I can say invoke.
We're going to pass it a new PropertyChangedEventArgument
and pass it the name. Here we go.
So, now what we need to do is sort of introduce
our properties that we want to do data binding to.
So, the first one here is going to be named,
and by default would String.Empty.
Then what we can do is we can say public string,
and it's important here that it's public string
because that's what we're going to do the data binding to.
Xamarin Forms of use reflection,
and it's MVVM built-in data binding framework to automatically
find those names for public members.
So, this will be a public string name.
Mean here what we'll do is we'll say "get",
and whenever we get the name will simply return
whatever our private variable is.
Now, and we set it, we're going to do a few different things.
The first thing we'll do is we'll say,
if name equals the value that's passed in,
there's no need to do anything and it already is equal.
Else, we'll say name equals value,
and then what we can do is we can say
OnPropertyChanged and we're going
to take the name of the property which is name.
Now there's some nice things that we can do here,
such as nameof and nameof will
allow us to pass in our property name.
So, we can ensure that even if we refactor later it will
automatically update what's being passed in here.
Now, we also want a display name.
Now what's cool here is that we'll just
say public string DisplayName,
and what we can do is since we're never going to set it manually,
we're only ever going to get it,
we can just say "Name Entered",
and then name like that.
Now Xamarin Forms will read this once,
and it will be blank.
However, we also want to update it here.
So, what we can do is not only erase the notification for
name but also for displaying. There we go.
So, now at this point we have
a view model that's implementing INotifyPropertyChanged.
We've implemented our own method on PropertyChange that
will invoke and notify Xamarin Forms to update the UI.
Then we have two fields,
the first one here has a private backing field.
Then here, whenever we change it,
we're going to tell it to update name and display name.
When we tell it to update display name,
it will then go to our PublicStringDisplayName,
and update it automatically based on the new name.
So, now, we can do is come into our main page.
We need to set a binding contexts.
So, on every page or actually every control,
there is a BindingContext,
and here we can set it equal to our main view model.
Now notice that when we created the page,
there was this local namespace.
Our XAML IntelliSense was smart enough to automatically
find local colon MainViewModel.
Now, you don't have to set it here inside of the XAML.
You can also come into the code behind,
if you desire and say
"Bindingcontext equals new MainViewModel such as that.
But the nice thing is that when we said
it inside of the XAML here,
we get some nice features.
So, now we are able to do is set this entry and this label.
So, we'll get rid of the name because we don't need it,
and we're going to use a very special syntax.
I'm going to do curly braces and we
can see all of the different sort
of property special characters we can add such as on platform,
resources, but we're going to use binding.
Here, when I say "Binding" notice
that we can set all sorts of different properties.
There's modes, such as one-way and
two-way data binding which I'll link to the documentation,
so you can find out more,
converter properties sources, string formats,
all sorts of good stuff.
But here, it automatically finds our properties,
so I'll say name.
Now for our label, I'll say "Binding" and then here "DisplayName".
That's it, that's all I need to do to get
my binding context in my entries.
So, now when I go ahead and run this on
either iOS or Android or any other platform that I support.
We're going to get our full two-way data binding system in it.
So, here we go,
now our application has started up.
What we should see is automatically there's nothing
in the entered name but also named entered is displayed,
because our binding here.
If I go to the definition,
if I go to the code behind, I mean,
we can see that display name is enter name but it's empty.
So now, when I bring backup the emulator and I
say "James" notice that entered name
automatically updates
as I type automatically.
We've updated our name,
and then invoked the name for
the display name to automatically update. There you have it.
In just a few lines of code,
we've introduced simple data binding into our application,
so we no longer need to write anything in the code behind.
Our code is maintainable, it's a readable,
we get nice binding markup that lights up inside of our XAML,
and additionally it's very testable.
I love data binding, again,
it's one of my favorite features and there's
a lot of other things that you can do.
Such as, converters parameters to those converters,
different dynamic resources, string formatting,
all sorts of good things that you can do inside of those bindings.
So, be sure to read the documentation and the links
below to see all of the binding goodness that you can do,
to any of the different properties including lists,
and labels, and entries,
and buttons and all that good stuff.
So, that's going to do it for this Xamarin Forms
101 brought to you by the Xamarin show.
Thanks for watching, and make sure to subscribe,
so you get all the latest Xamarin shows right in your inbox.
[MUSIC]