Today, we're going to be taking a look at how we can turn any event on a
control and turn it into an MVVM command.
So tune in so you can MVVM.
If anything.
Hi everyone.
I'm James Monson, Magna.
I am back with another Xamarin, a one oh one video.
I'm really excited because I've talked about this a few weeks ago.
When we were taking a look at how to end the VVM the list view in Xamarin forms.
Now I love the Xamarin forms list view, and I love a lot of the other
controls, like the collection view.
But one of the kind of main problems that I often have is there's
not enough commands built in.
Um, there's a lot of events, which means like I can register and unregister
events like when an item is selected or an item is tapped, but really I
want to M VVM MFI that I want to data bind those events into a command.
So.
Taking an event and turning it into a canal.
Well, luckily for us, uh, we can do this with any single event in Xamarin forms.
In fact, there are amazing libraries out there from the Xamarin community
toolkit that has everything built in.
So this is really cool.
So we're going to hop over and take a look.
Now, if you remember, we've been building out our coffee application and what we
have right here is the list of coffees.
Okay.
And if you remember from the previous episode, and if you don't, I'll put
it up over there in that corner, make sure you, of course, subscribes
you see all the episodes over here, but we MVVM MFI the list view.
So we did a lot of things such as getting rid of the selected item and tapped
events, and we did some data binding.
So here we said, whenever the item is selected, So tapped on, basically go ahead
and, um, data buying that to the selected coffee property in the view model.
So if we go back over here, we can see that here it is selected
coffee and it's a two-way data bine.
So it goes to, from the UI to the UI and back and forth to the view model.
So what happens here is if the value is not, no, I simply pop up this box
here that says you've tapped on it.
I still wrote the value.
Then I immediately said it's a no, so I'm deselecting it right away.
So it's kind of like, you know, removing that tapped event
that I needed inside of it.
And then what I do is I set the select a coffee here.
So when it quarries the current value it's no.
And I say the property has changed.
So I'm getting the event.
And I'm sending an event right back right away that says, Hey, go do this.
But if we actually look at this, this is actually kind of not the greatest code,
because I am calling in asynchronous method here and I'm not awaiting on it.
And I can't really a wait on it.
I could do a dot result, which is terrible.
I have another video that says don't ever do that.
Um, but I can't await on it because this is a property.
So the ideal solution is to turn this in to a.
Command.
And we can do that with event to command, um, converters and things like that.
Now I mentioned earlier, the Xamarin community toolkit, the Xamarin
community toolkit is absolutely awesome.
It's a collaboration with the Xamarin community and the Xamarin
development team, building out all sorts of awesome things that you may
need in your Xamarin applications.
So for example, You may need some behaviors, all sorts of behaviors.
The one we're going to look at today is event to command.
There's all sorts of converters.
Every time you need to do an into bull inverted bullying is not no, um, tapped
event, arguments of facts, such as safe area extensions, like image resource,
and translate extensions helper methods.
Object models.
And of course, awesome views like an avatar view, camera view, dock
layout expand or lazy view media element range, cider shields,
all of these awesome things.
There's all sorts of awesome videos on the Xamarin show, um, with Gerald and the
community members that are building this, that I'll link to what we are going to
take a look at this thing, uh, up here in the behaviors called event to command and
as the name implies, it turns any event.
Into a command, which is really cool.
So they have some examples here.
This one, for example, is the turning the clicked event into a, my custom command.
Now you wouldn't really want to do this because a button
already has a command on it.
So for example, down here, they say, well, what about a list view, literally the
case that we're going to do today, which is what about the item selected event?
Well, here, you can say, use an event to command behavior.
And when this event is fired, call this item selected command.
And in fact, on top of that, you can pass down arguments using the item
selected event, arcs converter that will take those selected event arguments and
turn them into a coffee, for example.
So let's go ahead and do that.
Inside of our code.
Uh, what we want to do is not write all this code in here.
We're going to remove this.
I'm going to say set property, um, ref to the selected coffee and passing the value.
So to now it's just a normal property.
Okay.
Um, we're gonna stop the bugging to just a normal property like we would expect,
but what we're gonna do now is come up.
And here let's go ahead and call this selected.
Okay.
And now just like when we favor it, it'll go ahead and check to see if the
coffee's no, and then down here, we'll say selected, you know, pop up the name
of the coffee proper async await here.
So we can go ahead and then copy and paste this around and we'll
call this the selected command.
Okay.
And then down over here.
We'll say selected command and this'll be selected.
There we go.
So now whenever we want to do the selected command, it's going to
come in and do the right thing.
So it's going to say select a coffee, coffee, bingo, Bango.
We're going to go now let's head over into our XAML.
So the first thing we want to do is make sure that we have the
Xamarin community toolkit installed.
Uh, it's a new get, um, it's available right now, version
1.02 as time and of recording.
It came out with Xamarin forms five, uh, and, and you need Xamarin forms, five.
It uses the latest and greatest features, but here it is one oh two and I've
installed it into all my projects.
Okay.
Just xamarin.community toolkit break from Microsoft.
Then what we can do is I love how they did this.
Have this copied over here.
For the namespace, you don't need to reference any of the DLLs or assembly,
how it works is they have this global, um, namespace, which is really cool.
Just like Xamarin forms has a global namespace here too.
So here's the toolkit, um, full on right here, which is really, really cool.
So then what we're able to do is come down.
Into our list of you.
Let's go ahead and zoom in our list of view dot behaviors.
Okay.
And your lists, you can have all sorts of different behaviors inside of it.
So now I'm going to say X, T C Xamarin, uh, sorry, community toolkit.
There we go.
And we're going to do an event to command behavior.
The, uh, event name is going to be item selected, just like we have before.
Then we can say command and that command is going to be a
binding to our selected command.
All right.
Very cool.
Now, at this point, this we'll call that command, but we also need to
have the parameter that is passed in automatically be this coffee.
So, what you can do over in, uh, this event is register something.
Called a event arc converter, and this will then know how to
convert your argument to the very specific item that you want.
And this takes a static resource to a converter, but luckily for us,
this is a converter that is built into the Xamarin community toolkit.
So I literally just kind of copied and pasted this over from the documentation,
but I'll go through a really quick.
Inside of our resource dictionary.
So this could be colors.
It could be strings.
It could be anything we're going to say.
We would like to create a new item selected event, arcs converter.
There's also an item tapped event, artist converter, or you can use
our own source codes available.
Very simple.
Here's a key so we can reference it by key.
So then down here, that's the key.
These two things line up here.
No.
In fact, even if I just do, um, uh, the key here, um, it's going
to ask for the key and that key is going to be this one right here.
Okay.
So what we have, let's recap it again is item selected.
That's the event name it's going to go call the selected command and then pass
in the item selected event RX converter.
All right.
So when that happens, Instead of just doing all that gobbledygook inside
of our parameter, which is no good.
Or our, yeah.
Our, our property back here is going to call items selected.
So let's go ahead and add a tap here.
All right.
So we'll compile this puppy up and do the same thing that it did before.
If all is good and working as, as I would assume, and pop up a
display alert dialogue over here.
So let's go ahead and get our application up and running.
Bubba Bubba.
Here's our coffee.
Tap on one here.
Look at that.
It automatically called the code right here and we get
a coffee back over here too.
So immediately now we have this coffee.
I can go ahead and see what the name is, the Kenya.
And I can go ahead and continue on.
Boom now it's there.
Now.
I know what you're saying, James.
Oh my goodness.
It is still selected.
We want it to not be selected.
That's a great point.
Uh, so we can do a few things here and I actually just did a pull request
to the community toolkit to fix this, this sort of unselect issue.
There's a, there's a work around here is because if we come here and say
selected coffee, Equals no, there's sort of a problem right now is that
the converter says if it's no thrown exception, because it won't know
how to convert it to this coffee.
Well, we can get around that actually by simply saying, just pass me an object.
Just give me anything.
It doesn't matter what it is.
I don't even care.
Give me an object.
It's going to be great.
And we'll say RX here.
So now in our selected command, Instead of passing in the coffee.
What we're going to do is just give it an object to say, give me anything.
And what we can do is say.
VAR coffee equals R as coffee.
So this is very similar to like what the item selected used to be behind
the scenes and say, oh, if it's, if it's, if it's no, you know, just
go ahead and not give me anything.
So check this out.
So now that we have this as an object, instead of a coffee, we're
going to cast it ourselves locally.
What I can do is now debug it again and set it automatically
to know before I do the pop-up.
So it'll, de-select it.
And that's going to work because.
If you remember, we still have our selected item with a two way data binding.
So it's still going to work because we have that set up.
All right.
We have this up and running again.
I'm going to go and tap on it again.
Notice that I do get my coffee, my arms, our coffee, that are passed to me.
I'm going to go ahead and now I hit, I hit continue and it actually
sent me again, something else.
And this is where it would have thrown the exception because when I set it to know
it doesn't know that it's an object, so it doesn't know how to cast it correctly.
So what it does now is it simply comes in and it gives me these selected.
Event arguments.
So it couldn't cast it correct before, because it doesn't know what knowledge is.
And since we just say, give me any object, it continues to work, but this
won't do anything because it's no.
So now if I continue on the first time it got called boom, it's going to be there.
Okay.
So you can actually see how this works.
Tap on this.
It's not, no.
So it has this thing it's going to de-select it.
While that pops up.
So it's all just kind of order of operation that's going on.
So it triggers it to know pops up, back up, and we're good to go.
So now you don't get any weird, you know, things in the code behind you
don't get any, anything in that, um, property that's inside of here and
you don't get any selected events.
You get the same thing that you get before, but just like that, it's with
pure MVVM goodness, right into your code.
Well, to be honest, that's really all that I have for you today.
It's a nice short, quick one, but I love event a command because it really sort
of shows the flexibility of MVVM and what you can do with converters and behaviors
and all this good stuff built directly in to Xamarin forms and Xamarin MVVM.
Now I just sort of.
Took a peak at event, a command because it's really, really powerful.
And it's only one of the hundreds of features in the Xamarin community toolkit.
I'm not going to go through everything in the Xamarin community toolkit because
we're building this app and we'll probably use some stuff in the Xamarin
community toolkit, but I will link to some episodes of the Xamarin show or
Gerald, like I said earlier is going through all the features, just like
I've done previously on the Zammarin developer, YouTube for Xamarin essentials.
So I hope that you really enjoy sort of this.
Sneak peek into some of the advanced features that you can do of the, you
check out all my previous app on Xamarin one oh one and more than anything.
If you really enjoyed this video, there's a few things that you could do.
You could first give it a thumbs up that helps the YouTube, a magical algorithm
to recommend this video to other people.
And of course you can hit subscribe and ding that notification bell subscribes
obviously helps subscribers grow.
Channel notification bell right there.
When you ding that you'll get an alert.
Whenever I release a new video here on the channel, and don't forget that
I also Twitch stream every single Friday at twitch.tv/james Monto Magno.
And I upload all those videos.
Also here, I've been building out a clone of the Peloton application fitness
app, which is really, really cool.
So I hope you take a look at those, um, in the playlist available
here, right on this channel.
If you have any questions, leave comments below.
Thanks for watching.