Hey everyone. Welcome back to .NET
MAUI 101. I'm your host, Gerald, and in this episode, we're going
to learn how to create that consistent look throughout your app with styles. Now, if you've been working with .NET
MAUI applications, you probably know that you have numerous various styling
options on Buttons, on Labels, on all the visual elements.
You can set text colors, you can set background colors, you can set
gradients if that's what you want. You can do all these kinds of crazy things. But of
course, we're developers and we don't like to repeat ourselves. So that is where
styles come in. With styles, you can create styles that you can
apply throughout your whole application, either implicitly or explicitly on all
of your visual elements so that your look will have
that consistent look throughout your whole application. Let's dive in
and see how that actually works. Here we have just a File, New .NET
MAUI application which is running on Windows. Nothing has been changed.
This is just a default template, the little .NET bot waving at you
saying hello, world. And here is where we're going to see how to apply
styles. So let me stop running this actually. And here in our
MainPage.xaml on the Content Page, what we're going to do is add a
Resources node. So here we are. And inside of
those resources, we need to specify a ResourceDictionary. So inside of
that Resource Dictionary, you can now start defining
styles. So this style, we have it right here. We need to
specify a TargetType, which is the visual element that is going to be the
style consumer, basically. So let's say Label for
here. It can be a Button, it can be anything; CollectionView, you name
it. You can input any TargetType here as well. And there is
immediately an important thing here if you want to also apply these
styles to things that inherit from your label.
So maybe you've created your own label, then you want to say also
ApplyToDerivedTypes. You also want to do that. But that is something for
you, a little homework for you to figure out label. And then we
can say x:Key, we can give it a name is labelStyle.
So let's do that. And now we have created our style. And
inside of the style, we can work with setters. And each setter is going
to set a property on our label in this case, or if you
define it for a button, you can do it for a button. So we're going to
do setter and we're going to specify property. And you can see
because we have that target type, the IntelliSense will already start
helping us with the property here. So here we see all the
properties that are on a label and we can say TextColor and we can set the value for that. And because
again, because we know it's a property TextColor, we can also now specify
which value, IntelliSense will help us with that. Let's say it to
fuchsia. And then we can specify all the
setters that we want here, basically. So we
can do setter property and we can say font size. So we can
also set the font size and you can set all the properties that
you want here. So let's set this to 32, close this one. And now we have
defined our first style. So let me go actually
find a label here down here, the Hello World one. And what
we're going to do is say style is and then we're going to specify
static resource. And you can see it already comes up with the
label style. So it already knows that we have this style and we can apply
the label style. Now if we do that, if we save this and I run this
on the Windows machine again, you should see that this label now has
a fuchsia color and a font size of 32. Maybe it
already had 32. Yeah, it already had. So we're not going to
see much change there. But it already had the font size. And this is kind of
like interesting also in terms of how this all kind of like cascades
because the styles can cascade, right? So this kind of like style will
not have precedence whenever you set the
property right here. So you can also kind of like override properties
depending on how close you get to the label, basically. So if
we set this font size to something different, it's going to be
overwritten here with this font size here as well. Kind of like how it works on the
web and with CSS as well. So you can see we have this
hello color now with a fuchsia color. But this is known as
an explicit style because we have to
explicitly say style is this style. What if you don't want
to do that? What if you want to make all of your labels a
certain color just because that is whatever your styling is? So you
can remove this style right here. And what you then
need to do is remove this key. And whenever you do, boom, we've set
it as an implicit style. And because I'm using XAML Hot Reload,
it already automatically updated my running app. So you can see that
now all the labels, which is two in this case now have this fuchsia
color. So that is how you can create explicit and
implicit styles. Just specify or not specify the key and you can do
those keys on the control that you actually want you. So
let's stop this. This only works for the scope of
this page, right? This only works for the
labels on this page, which is fine, but you probably want to have this
consistent look and feel throughout your whole application. So what we can do
is take this style. We're just going to copy this and we're going to go to our
Solution Explorer and we're going to go to our App.xaml here. You can see we already have the
application resources a resource dictionary and we actually have merged
dictionaries. Now that is something a little bit more advanced. If you want to know
more about that please let me know down in the comments but I'm going to add
another resource dictionary here. Resource dictionary and you can
then paste your style in here and now suddenly it
is something that works throughout your whole application. So now all the
labels in our application will have this fuchsia
text color. So the interesting thing if you want to
explore more we have these resource dictionaries here. You can see the
colors and the styles which is something that is provided with the file new .NET
MAUI application template right now so you can just go here to
your resources, your styles and you have all these kinds of styles
for all the controls basically. So there's a lot of crazy stuff in here
also making difference between light theme and dark theme that's definitely
something that you can do as well. So here you can kind of like tweak the
styles that you have in here as well. Also VisualStateGroup, all
that kind of advanced stuff. If that is something that you want to
know more in this series please let me know down below in the comments.
And just like that you have learned how to create a consistent look for your
application by using styles and by putting them in resource
dictionaries. You don't have to duplicate all your style everywhere and if you
make use of that correctly then you can write less code and still have
amazing looking .NET MAUI application. Now who doesn't like
that? Now if you've seen some concepts fly by that I didn't really touch upon then
make sure to let me know down in the comments so I can include it in
this .NET MAUI 101 series but make sure before you do that it's not
already on the .NET MAUI 101 playlist and make sure that you click this
button so that you're subscribed to my channel and you will be notified of new
content automatically. See you for the next one.
