Hey, and welcome to another episode of
.NET MAUI 101. In this episode we're going to talk about data triggers
which allow you to set properties on your control based on a data bound
value. What that's all about? Let's go check it out. Welcome back to another episode of .NET
MAUI 101. I'm your host Gerald, and in this episode, we're going to
talk about data triggers. Now in another video, I already talked about property
triggers. There are multiple types of triggers. Data triggers, property
triggers, event triggers. You're going to see all of them on
this channel. So make sure you're subscribed. And with property triggers, what you
can do is change the appearance or even trigger actions based on a
property of a control. Now in this video, we're going to see
how to do that same thing, but now based on values that you can
data bind from your code behind, basically. So whenever a
value changes in your code behind, whenever you have a count
value in your view model, then you can change the appearance or maybe if something is enabled of your
button, your control, without having to actually reference your control and do
that thing. So it sounds a little bit cryptic.
Let's just dive into the code and see how all of this works. Here in Visual
Studio 2022. I created a File, New .NET MAUI Project. And I already
prepared some things for you. I already implemented a data trigger so that you
can see how it works. So this is just the File, New Project template.
So you can see the differences here. You can
spot that very easily. And I will walk you through what I've changed. So here
we have this button. So you have this counter button that will
increment whenever you click it, right? So that's all there. But now I added this
button triggers, right? So you have this button triggers. And
in here you can have this data trigger. You can have a property trigger, you
can have a multi trigger. Again, there are multiple types of triggers. But now I
have this data trigger and you're going to have to say, hey, this
target type for this trigger is going to be a button, right? So you're going
to have to let it know that this is a button that's mostly for the
setter right here so that it knows which properties it can apply here.
Then we are going to set the binding, and this is binding to a
Count field. I'll get to that in a minute. And then whenever the Count, in my
case, this is an int value is going to be 10. Then it's going to
apply whatever is in here. So it's going to apply this Setter
with IsEnabled False. So it's going to disable the button whenever the
counter goes to 10. Now I can also do multiple things. I can add
multiple setters in here. So you can also do things with the
background color, if that's what you want. Or basically any property that is on
the button you can influence through this thing. So now the binding, again, this video is too short to go
over all of data binding as well. But here we have I've changed
a little bit that this is a property now. So I have this
Count property, which notifies the UI. That property
has changed. So this is very much Data Binding 101. I set
the BindingContext so that I mimic kind of like, hey, I have
this view model. Instead of just having this field,
right, that's important that you have this property and all the data binding
ingredients are here. So don't worry about it too much. You should have
that. This is about the data triggers. So whenever I have all of this in
place, I can now run this on, well, any platform that is supported
by .NET MAUI. So we're going to see it on Android right here. But it also
works, of course, on Windows, iOS, macOS, all the things, because
this doesn't really have to do with the platform, but this
is really the abstract layer that .NET MAUI adds. So whenever I start
clicking here on the button and I get to 10, you can see that it now disables,
right? It becomes gray and I cannot increment it any further. So that is
with the data trigger right here, I don't have to
specify this. counterButton IsEnabled whenever the count becomes
10. I can just solve this with all XAML right here and basically no
code involved other than the data binding that I already have. Now,
doing this for all buttons can become a little verbose, right? So
what I can also do is disable this one. I'll put this in a comment
and go up here. And I also have this here in a style. So if
I uncomment this one, I have it in a style right
here. And this style applies to a button. So it says TargetType
="Button". If you want to use the explicit styles, you have to do an
x:Key here and you have set a name like myButtonStyle. And then you have
to... I know there's a typo in there, but
I'm not going to fix it. And you on this button have to do
style="MyButtonStyle", but then with the typo
as well, right? So that it matches. So now it will use that style. But I'm
just going to use it on any button because I only have one
anyway. So I'm going to remove this one. And if you don't do this, it's an
implicit style and it will be applied to all the buttons. So now I
have this same thing. I basically can copy and paste
whatever I had there. You can see the syntax highlighting is a little bit weird.
This is a current bug in Visual Studio, the version that I have. But you can
see the same things. TargetType="Button" Binding="{Binding Count}", Value="10", Setter
IsEnabled False. But now I also do the background color will
become red, right? So that's the extra thing that we are going to see. You can add
multiple Setters in here. So if I run this again, it will now use it
through this style which makes it much more reusable and I don't have to
do this on all my buttons. And whenever I do the same thing now
it will disable the button and it will show the red background so that
you can see that it goes through this style. And now it will
work for all the buttons, right? So that's how you can easily reuse
this in your XAML and make that less for both. That's how you use
data triggers in .NET MAUI. That makes it all clear, right? And
this is such powerful stuff. The example that I have here can be
used for validation, right? So you can also do it for the
entry. Whenever the entry value that is data bind to your entry, whenever
that property is empty, you're going to disable the button and now you
suddenly have your first form validation going on for .NET MAUI, right? So this is
such powerful stuff. All the triggers, the property triggers, data triggers
and there is much more. Speaking of which, we actually have
event triggers as well. So go check out the video that is popping up on your
corner on event triggers and I'll be seeing you for that one.
