>> Welcome back everyone to The Xamarin Show.
I'm your host James Matzo Magno, and today,
we're going to do a little Xamarin Forms 101.
I'm going to introduce you to commands or
commanding from our user interface.
If you watch our previous Xamarin Forms 101 on data binding,
you can think of this as the inverse of data binding.
Where data binding set a,
whenever I update something in my code behind,
update my user interface.
Where commands say whatever my user
interacts with my user interface,
automatically invoke a method in my code behind.
You can use them independent or together most likely
using MVVM, or Model-view-viewmodel architecture.
Commands are found mostly
with things such as buttons or toolbar items,
where your users click in on something
and instead of registering for events,
you say call this method.
So, let's go ahead and set up a command inside of our application.
Here, I have a very simple Xamarin Forms application.
Over here of my Android, iOS application.
Here inside my main ViewModel or my main page I should say,
I have a button that says "IncreaseCount"
and a label that has a data binding to display count.
So what we want to do is
automatically update this display count
whenever I click on the button.
So, one way of doing this, want to say hey,
let me just expose that button in
the code behind here with x colon name,
and then I can come into my main page code
behind and say button name,
or Buttoncount.clicked plus equals
introduce a whole event update it.
But obviously here the problem is that this isn't
super maintainable code or testable code.
What we want to do is leverage that MVVM architecture again.
So, Model-view-viewModel.
Take that business logic that we were right in
the page code behind and put it in
a separate file and leverage some of
Xamarin Forms built in features to automatically update.
So, let's take a look at what we have in
the main page besides those buttons.
We also have the binding context in
place and the binding context is the Main View Model.
Now inside of that Main View Model,
I've gone ahead and implemented,
I notify property changed and set up our
binding to display count which you saw for the label.
So, whenever we update our count,
will want to essentially say on property change which we see here,
to update the display count and that
will tell Xamarin Forms to update.
If you're brand new to data binding,
take a look at the previous episode which
I'll put in the show notes below.
But what we want to do is use some commands.
So what I have is a simple method called "IncreasedCount".
Whenever this method is called,
it increases the count and updates that display count.
So, it says, ''Hey, we've updated the count,
go ahead and get the latest or
freshest version of display count for me,
but we need to call it.''
So what we're going to do,
is I'm going to introduce a public ICommand,
and I'm going to call this Up IncreaseCommand.
This will have a public getter behind it.
Now, "ICommand" lives inside of
these system Windows input, namespace.
If I go to definition,
we can see what's inside of it.
It's actually very, very simplistic interface.
It has an event handler, this is CanExecuteChanged.
A method that is
CanExecute that takes in a parameter and returns true or false.
Then in Execute method that will execute something for us.
Now, the nice thing is that this is an interface,
it's a standardized interface that's used in MVVM.
The nice thing is that
Xamarin Forms has a command implementation built in.
So here, I can add using Xamarin Forms.
Then what we can do inside of our constructor is let's say
"IncreaseCommand" equals a "new Command".
Xamarin Forms command is really nice.
It has a few nice little helpers built right in.
So for instance here,
we can pass it an action or a method to execute.
We can send it an action that's typed with a parameter.
We can also pass it in function to say "CanExecute".
CanExecute is very nice,
because based on the CanExecute it returns
true and false Xamarin Forms will
also update that buttons enabled state.
So, that's a nice thing.
So, we can say hey,
actually disable it when it reaches 10 or if the user
hasn't entered perhaps a username and password on a login screen.
Additionally, here the same thing but with the typing.
Now, what we're going to do is simply pass in an action.
So, sends an action is just really a method we
can pass in "IncreaseCount". There we go.
Now, "IncreaseCommand" whenever execute is called,
will execute this method.
The nice thing is that you can go ahead
and say "IncreaseCommand." ,
and then you yourself can
execute this command manually if you decide.
So execute is what will be called
whenever Xamarin Forms button command is clicked,
but we can see here Execute,
CanExecute and CanExecute change,
and a few other things are here for us inside of that interface.
Now, if you're using other popular MVVM frameworks,
they may have their own command as long as it is
an implementation of Icommand, you're good to go.
Xamarin Forms will work with any ICommand implementation.
So now that's it. We've added a new one.
Remember this is public ICommand.
So if we come back into our page on our button,
we no longer need our x colon name,
we're not going to expose anything in the carbine,
and here I can say "Command".
We're going to use the same exact binding that we use
for any other data binding for strings or integers or anything,
but here we're just going to do a binding to our command.
Now note that there's also command parameters,
so you can pass in and a few other things and be sure to read
our documentation to learn more about advanced commands.
That's literally it. One command,
when the user presses it,
will then call into our "IncreaseCount",
which right here will increase
our count and then raise a property changed.
We'll go ahead and run this application
again with all of our changes in place.
So, the nice thing that we have here is that again
no code is in the code behind it all.
There we go, our application is starting up.
Now, every single time I increase it,
I click on it, it increases the count.
There we go. Every single time.
Just like that, whenever I click,
it increase the commands and place
super testable code, and I'm good to go.
Just like that, we've introduced
commanding into our application which pairs
very nice with that data binding which
you saw earlier and inside of this code.
Be sure to follow our series Xamarin Forms 101,
so you can get app and start building beautiful,
cross-platform native applications with Xamarin Forms.
Hope you enjoyed this episode of The Xamarin Show,
be sure to check us out over a
Xamarin show.com on Channel nine and on YouTube
and subscribe to the latest episodes
right down there or over there,
wherever is that, ding that bell and get notified.
Till next time, I'm James.
This is The Xamarin Show,
and thanks for watching [MUSIC]