Reusable styles in your app | .NET MAUI Minutes

[Music] [Applause] hi everybody welcome back to net Maui minutes where we go over some basic net Maui Concepts in just a couple minutes I'm matd monilla I'm on the Maui team and today we are going to dive into one of my most asked beginner questions which is how do I style my app to look the same across all the different pages and all the different platforms so what I usually see people do is you have a page and in that page you want everything to look certain way so you make your button background color whatever it is and you make your fonts and your text whatever size and however you want that to look and then you go into a different page and you have to do it all over again or what I'll see people do is they run the app on Android and it looks totally different than when you run it on iOS because we use the native controls under the hood and so they go in and they add a bunch of platform specific things for Android to make it look right and a bunch of platform specific things for iOS to make it look right when you don't actually have to do any of that you can use use Styles right within your Maui app and it's super simple and we actually ship with styles to get you started so I am in Visual Studio here we're in the file new Maui app nothing too fancy I have live preview up on the side here so you can see the running app as we play around with it um and this app has in my solution Explorer a styles. zaml file it is in the resources folder and it's right here styles. zaml and that is the app wide stylesheet so we give you a whole bunch of different things in this resource dictionary which is basically how you define a bunch of different styles um for all the popular controls especially ones that we know look really different across platform so it gives you a really familiar look and feel by default with the template app but our theming for this might not be what your brand is or what you want things to look like you might want different defaults or you might want to just overwrite it in certain places and you can do all of that with Styles without too much work so first let's talk about the different types of styles there are two one is implicit which means it's applied automatically and that's what all the Styles in our style sheet is so if you give a style a Target type so for example this button down here um and you don't give it any other information it will just apply to every button in your app but sometimes I don't want that to happen sometimes I want just for a specific button or a specific text box or whatever it is to be styled differently and so I need to make it an explicit Style by adding a key and so you can see right there just by typing in key it actually removed the style from my button because it's not implicit anymore so I'm going to give this key this style the key button style and then I'm going to go back into my main page here and I'm going to apply that I can click on this button and it will take me to where it's defined very helpful and I will apply it just as a style so the style is called button style but you have to Resource it you have to excuse me reference it as a resource because it is in a resource dictionary so I'm going to type static resource button style right here in my examl so that's what that looks like and the style just got automatically applied right back super easy so if I want to keep this style by default implicitly to all of the buttons in my app so I can delete that um I can delete that stays right there but I can also overwrite it right in this page or in the resource dictionary the the app wide Styles file um by creating a new style so let's do that right now I'm going to make a mini resource dictionary right in this page so it only applies to things on this page and it overwrites anything coming in above it for example from that styles. zaml file and we are going to give this a style so each Style just to to Define it all you have to do is give it a Setter and of um the target type so for example we're going to style the button again so let's give it the target type button and then in this set are I'll type property and because I gave this style tag the target type already it tells me what's valid for a button very helpful so I'll do background color and we'll do value pink now if I were to restart my app here it would rebuild everything and replace entirely that implicit style here um with the implicit style I just created in this resource dictionary but I can also add a key to make this an explicit style um and I will call it button style and I can apply that all while the app is still running right now button style same situation we need to do a static resource and button Style just like that and there I got my pink background if I wanted to add a second style super easy I can do that copy paste this one for example and we'll call this button style two and I can actually base this on on the existing style I already have so I'll base this on button style and then I will change this from background color to let's say text side or text color and the text color which is currently purple will make it what will pop up let's see blue see how that looks and then I will go and apply my style down here button style two yeah there you go that's pretty hard to see cuz uh blue looks just like that purple so let's change it to White there you go easy now one last thing I want to show you is that you can apply multiple styles to something if you want um but instead of doing it with a key you do something called a style class so you get rid of this based on thing because you can apply it to multiple you can apply multiple at once um so I'll call this class uh text button text perhaps and I will call this one I will change this key to a class as uh button background I'm going to copy paste that because I know I'm going to spell background differently when I try to type it then we will go down here and in my button instead of having a style we will have a style class and that is just a list button background and button what do I call it text yeah nice and then I'm going to restart the app so that the app can pick up all those Styles I just made because they're implicit again now so I need to reload and render the page pop up and there we go there is my pink button with my white text um that I overwrite overwrote using style classes hopefully this was enough to get you started with some of the different methods you can use to uh create Styles in your application definitely scroll through the Styles file that we have given you in the template it gives you a lot of cool ideas on different controls and things you can use but also of course check out our documentation which we will link in the show notes and we hope to see you at another net M [Music] [Applause] minutes

Channel: dotnet

Views: 4,598

Keywords: .NET

Id: gl9--LlIeyg

Length: 7min 16sec (436 seconds)

Published: Thu Dec 21 2023