Aloha and welcome back to .NET MAUI
101. I'm your host Gerald and in this episode we're going
to talk about Property Triggers which allow you to change the visual
appearance of a control based on property values of that
control without any code. Let's see how that works. Welcome back to .NET MAUI 101. I'm
your host Gerald and in this episode we're going to talk about
property triggers. Now before I go into that, you must know that
there are multiple types of triggers in .NET MAUI. I've linked to
the documentation page down below and of course I've got videos on all
of them. And with those triggers you can change the visual appearance based
on certain criteria. So with property triggers you can do
that based on a certain property value. We're going to see that in this
video. For data triggers, you've also have data triggers. You
can do it on a certain value in your data. So in your code behind
or from other controls. Or you have multi triggers
which can combine a couple of values. We'll see all of that in
different videos. For this one, I'm going to focus on property
triggers. So imagine that you have an entry and whenever
that entry is focused, you want to have it to have a
different background. Maybe your designer came up with this crazy design. And to make
clear to your user that a certain entry is focused, you want to have a
little style option. Now what you could do is go
into your entry, hook up the is focused event. Then you
are going to write some code like hey, now the background
color should be this and that, which is not great. I mean it works.
Whatever works is a great solution. But you can do that much
prettier in XAML with property triggers. So let's go check that out. So here we
are in Visual Studio 2022. I created a File, New .NET MAUI project
and I already implemented the property
trigger right here. But I left most of the default template as intact
as possible. So you can spot the differences really easily
of what I'm doing here. So basically here in the middle of the
screen, you can already see the property trigger. Now this was an
Entry, sorry, a Label originally with the text Hello World with the
waving .NET bot, right? And I changed that in an Entry. So we can have a
look at that example that I just mentioned with the Is focused. So
we have this text which is a default property.
Semantic properties, FontSize, HorizontalOptions, all
great. But here we have the interesting thing. So the entry is not self
closed, right? So we have this tag right here which is closing. And then
you can specify Entry.Triggers. So this is just a different notation
in XAML for properties, right? I could also do
Entry.HorizontalOptions like this, but it gets verbose
really quickly. So you probably don't want to do that. But for these more
complex type of properties, this is the way to go. So Entry.Triggers and
then we can specify one Trigger in here, right? So you can have
exactly one trigger as opposed to Multi Triggers that we will see in another
video. Then on that trigger we have a couple of attributes. So we set the
TargetType so it knows what type this is going to be used and what
properties are available here. And then you could specify the
property in this case is focused. We'll see another property in a little bit as
well. But you can do is focused, is password, is whatever. You can
basically set any property of any control here and then
you can match the value right here. So whenever this is basically matched,
so whenever is focused is true or I could make this also false,
then it will apply whatever is going on here and you can
have multiple setters in here and you already know the setters from the
styles and that kind of stuff. So you can do the setter for the
property background color and the value will be yellow. So what do we expect to see
here? If I run this on Windows, we expect to see this entry.
I think the entry is focused because it's the first entry now on the screen
it will be focused by default and it will have a yellow background
because it's focused. And whenever I get the focus off there, it will not
be yellow anymore, it will go back to the original state, which is in
this case a white background. So you can see the yellow
background is right here. And if I click the button, the
focus goes away because the focus goes to this button right here. And now it
goes back to its original state and
whenever I click it again, you can see it becomes yellow. No
lines of code, just some stuff in XAML to do this. Now if you are a
good XAML citizen and you don't like to
have all that fluff in there, you want to do this through styles, right? We
hear you. You can totally do that as well. So here if we
scroll up a little bit, I've got this style here in comment,
so let's uncomment that. And again, style
TargetType="Entry". But you can also do style triggers, right? So
you can also have triggers in styles. Now here we have the same
trigger, right? So you could just take it from here, copy it or cut
it and paste it in here and now we have the same
thing and that's also why we need that target type, right? So we
could basically maybe infer it from the style here and here, obviously
from the control it belongs to. But like this, it's like very
explicit, you know what it is and for the style that's very useful as well. So
we have this TargetType="Entry". This time I'm going to go with
property IsPassword, right? And whenever that is true, I'm going to set the
background to red. Now obviously you can also have
multiple setters here. So I can also do the border and whatnot and the
font family. If that's something that you want, you
can set all the things on that control to whatever you want. The thing that
you want to watch out for is of course setting something through a
style and on the control itself that will start conflicting and not really
be nice. So for this and of course, the one last thing
about the styles, this is implicit, right? Implicit styling. I also got a
video on styles. Go check that out. If you want to have it on specific
entries only, you have to specify the key and then on each entry you want to
say style Is and then the value in that key, right?
So that's how that works. Okay, so let's convert another Label into an
Entry. Let's just make this an Entry as well. And now I'm going to
set this to IsPassword. And that's true. So now we expect this
to have a red background, right? And whenever I set
the Is password to false, then it should have a regular
background. So again, no line of code, just some declarations in
example. And you can see that this now shows the right styling. So does the
hot reload work here? If I do false and I save that, does that also apply
it? Yes. So you can see this IsPassword="false" and now
it defaults to how it looks by default, right? So that's how to work
with property triggers. I think this is really, really cool and really
powerful. It's one of those features that is really easily overlooked. But you
can do amazing stuff with this, right? You don't want to write code
that is very much coupled to your UI, which is exactly what you need to do
whenever you want to do these things based on interactions now, not
anymore. If you are using XAML, you can easily apply these
changes in appearance by just declaring some more example. And
whenever you throw out this example and bring in some new one, you will
automatically throw out these styles and bring in new ones, right? So there's no risk
on forgetting something that is here and there. Now, I already
mentioned there is also data triggers and multi triggers and all kinds of
triggers. So go to the next video right now, check out the Data Triggers,
which is right here, and I'll see you in that one.
