Hey there and welcome back to another
episode of .NET MAUI 101. In this episode we're going to look at event
triggers which allow you to trigger some code based on a controls event
without having to tightly couple it. Let's see
what it's all about. Welcome back to another episode of
.NET MAUI 101. I'm your host Gerald and in this episode we're
going to talk about event triggers. Now in other videos we've already seen
data triggers and property triggers, all kinds of triggers. But
this episode is about event triggers and it's kind of a special one because
this allows you to hook up to an event of a control. We're going to
see it with an entry in this case where the text is changed, but
you can also do it with a button that is clicked or a checkbox that is
checked, something like that. And you can
trigger a piece of code that will then do something of your
choosing. So it sounds a little bit cryptic like this.
But the advantage of this is that you don't have to tightly couple the
code and your code behind so your controls and your code behind so
that you can reuse these triggers and this logic for the
controls that you're applying it to without having to duplicate code and do all
that kind of stuff. I think it will all become clear if we
just go look at it. So let's switch over to my screen and
see how to implement this. Here in Visual Studio 2022, I created
a new .NET MAUI project and I've left the template as
much as default as possible. But I did implement some
bits here and there. So if you scroll over this, you can see
like, hey, the scroll view is here, the images here, the entry isn't here
because this is a label typically that shows you hello
world. But I changed it to be an entry because with this entry, we're going
to show the event trigger, right? So we have the triggers, we've
seen that in other videos for the data triggers and whatnot. I highly
recommend that you go check those out as well. You will find them near the end of the
video or down below in a video description so that you know
about all the triggers and when to use them. But this is the event triggers. So you
have to do this EntryEntry triggers and then
you can say event trigger and then you have to specify
the event so that's the event of this entry that it's going to respond to,
right? So whenever this event happens, it's going to invoke
this event right here. And this event is a custom one.
There is no built in events for .NET MAUI because this is
very custom stuff. But you have to override a specific
base class for this. So I have the numeric validation
trigger action and it can be found because I have this
local XML namespace and I've declared that here, right? So these XML
namespaces is just a handy way of not having to write this whole
clr-namespace, yada, yada, yada thing, but I just can write
local and now it can find this numeric validation trigger
action. So I have that here in my Solution Explorer and I have this
NumericValidationTriggerAction so that's there now this overrides or
this inherits, I have to say from data triggers
action. And you can strongly type that with an entry. Now if you're going to do
this with a label or I don't know, checkbox or whatever control you
can come up with, you're going to have to fill in that control here, right? And
that's basically only because it knows then for this invoke that
it's going to be an entry or whatever control you're going to
use that's going to be provided here, right? So this is where it kind of
like loosely coupled. It's still tightly coupled to the type of control that
you're using, but it doesn't really know which control, right? So you don't say
like, hey, I have this event on this control and it's only going to
be used for that one and I have to figure out which control to
reference in my UI, right? That's not something that you typically want if
you want to write clean and reusable code. So we're going to get this entry in
this case provided for us and that's what you have to overwrite,
right? So this invoke is going to be the thing that is invoked whenever
something is triggered for that event trigger. Now in this case, it's going
to validate whenever it's a valid numeric, a valid double in this case. But you can do
anything here. So you can trigger whatever logic is
right for you. So here I just have this double result
and it's going to check is valid, try parse and then
whenever it is, whenever it is valid, then it's going
to set the color to black and else it's going to set the color to red for
the text color, right? So we can easily see that something is valid
or not valid. So whenever I run this on my Windows
machine, I'm going to see that Entry, but it's going to have Hello, World.
But it should fail. So it should be red, right? That's what you expect.
However, we're using a different event, right?
So I'm using this TextCanged and since the text is already
filled here, the TextChanged is not triggered. So my validation
trigger is not triggered as well. So it's not going to be red.
So that's also something to keep in mind whenever you want to do this,
you want to make sure that it works for all scenarios, right? So you
can see it's black right now, but whenever I change something, it turns
to red, right? Because now that text change event triggers that triggered
my trigger. There's a lot of triggers in here and now my
text is red but if I remove all of this and now I put a number in
here, then it's going to be black, right? You can see that it's
all okay whenever I do that and even if I do, I don't know
the comma and the things are always hard but the comma works,
the dot works as well. So it does all these valid things and
whenever I put text in here then it doesn't work. Well it
works but it's not valid, right? So that's how that
works. But you saw also some code in comments, right? So what you
can also do is provide some extra information here. So whenever you just
provide a property here with a min value for instance,
you can suddenly check in your logic now hey,
was it is valid here, if not it's going to be
false and is the result more than this minimum value? And now in your
example you can say hey, I want to have this minimal value here
so I can say min value is five. So now it will not only check if
it can parse and if it's a number, but it will also check if
it's more than five. So whenever I put in 1, 2, 3, 4 or 5 itself, because it had to be more than
5, right, is going to be red as well. And this way you have this
very flexible way of coming up with all kinds of logic to
implement form validation, rook, all kinds of other things of
your choosing that you can implement by just having this XAML and a little
piece of code which is very reusable. So if I remove all of this and if I
put in 1 now, it should have been valid before but
now it's invalid and if I put in 6 then all is okay. And that's how
to work with Event Triggers in .NET MAUI. There is a couple
of things that are very good to note here. So with triggers you
have enter actions and exit actions. I don't have a video about that yet,
let me know if you want to know what that's all about. But they
are not used for event triggers. So whenever you're using
event triggers those don't work. Another good thing that is really good
to know is if you're going to share these triggers in a resource
dictionary, any state that you might have in there is also shared between
controls. So there's basically one trigger instantiated for the whole of your
application or the whole of your page and that is shared among the
controls. So if you have any kind of state in there that's going to be
shared among those controls so that's good to know. If you see any weird behavior
then that's what you definitely want to check out. I've
linked the official documentation down below so you can review that in detail at
your own pace. Please don't forget to like this video. Subscribe to my
channel and I'll see you for the next video which is all about
multi-triggers. What's that all about? Check it out right here.
