.NET MAUI - Working with styles

hi everyone welcome to this video where we will talk about dotnet Maui and how to work with styles if you like my videos please subscribe to my channel and press the like button for this video okay working with styles when you're building your application of course want to make it beautiful I will not show you today how to make it beautiful but I will give you the tools so you can implement the beautiful designs that you get from your designers so let's get started and dive in to visual studio so here I have created a new project from the project template so if we go here to resources we have a folder called styles and here we have two sample files we have colors and we have styles so we can start to open the Styles file and this is Samo and here we can see that we have styles for activity indicator for indicator view so what Microsoft has done in this template is that they have given us a starting point so it will be easier for us to start to work with stylus and then we have this color list where they Define all the colors that they want to use I don't really like the approach they have taken here I like that they have this color list but I don't like that they Define white black gray 100 gray 200 I prefer to use name on colors like for example dark background color light background color so you have one for use for dark mode and one to use with light mode so I would Define that but otherwise it's good to have this color list because it makes it easy for you to change colors if you're branding for a company for example changes and you will have a red primary color instead you can just go here and change it I have worked with applications apps webs where they have name on Styles it's like red label and then the color has changed and the label is blue but is the name still Red Label so that's why I prefer to avoid those namings so when styling a.net application you can either work with Styles or you can style the elements directly for example if we go here to this label we can set text color is blue for example but if we should do that for every label it can take a bit of time and it's and it will take even longer time when you will change the color if you ever will do that but so we can go to Styles here and we can see that we probably already have a label defined here by default yes here we have so here we can change or and we can add the others properties as well so one setting a style we have this style element and then we have setters and Setters is for one property for example text color and then we have a value for it and if we want to have different values one in dark mode I want a light mode we used app Theme binding and this will automatically detect what the system has but there are ways to change that in your app too so if you want to add another property here we go and say setter the property you want to change for example font attribute and we set value to bold just like this so now this will be on all labels but if we also want to have a specific label style we can also do that so for example we can go here and create a new style still will Target the type label but if we set X colon key we can give this style a name so like say header label and we set some properties like font size and we set that value to header and now we can go back here to the main page and we can point to this style so we say style is static resource header label and you will also get intellisense for that so when adding to these styles file it will be on a global level or on an app level and we can see that if we go to our app saml here we're merging this resource dictionaries together colors and styles we could have put all those values in the same if we wanted to but it's a good idea to separate them but if we want to have a style only for this page we can do that too so then we say content page dot resources and then we can add a resource dictionary here and then we can add Styles here so let's say we style this label again label and we say sector property background color value red and now this will be for all labels on this page if you want you can set the key here and you can reference it like this here too so if we now run this it will get the background color from this style that we defined from this page it will get those properties from this style and it will get the font size from this I had a label so we can try to run this on let's say mac so here we now have the application as you can see this is red the background from this style in the main page here so we touched app Theme binding and that is a really good way to implement dark mode and light mode in your apps so if I now want to change this background color let's say for this vertical stick layout I can do that background color and we can do like this app Sim binding and then set a value for dark then we can set the color directly here or we can use a resource so we can go here to the colors and then we can make our own colors the way I want it so color X column key dark back around color and it can be this that is very dark but not full black and then we create another one and call it light background color and then here we can go for white in this example so and then we go back to the main page and we say static resource dark ground color light static resource light background color just like that it's easy peasy and now we can go and run this and see what happens so now we have our vertical stack layout here so then I can open system settings and change appearance to light and we need to restart application we can trigger this in the code also that we reload the page for example and now you can see it's white so that is the easy way to work with applying binding and you should I recommend you to use that everywhere okay this was a very short introduction to Styles I hope it helped you to get started working with Styles and the reason that the video is so short is that it is really easy is it really easy concept so go and create beautiful apps thank you for watching this video subscribe to the channel like the video and we'll see you in the next video thank you very much

Channel: Daniel Hindrikes

Views: 3,434

Keywords: dotnet, dotnetmaui, maui, app development, cross-platform, crossplatform, cross platform, visual studio, ios development, android development, windows development, mac development

Id: s0cNRQAftZc

Length: 9min 54sec (594 seconds)

Published: Fri Dec 09 2022