Style apps using XAML In .NET MAUI

hello guys welcome to my channel in this video I'm going to show a demo about Styles in.net Barbie application so there are three types of style you can use in.net mavi app like a implicit explicit and the global style so when you create a new dotnet mummy project then here in a resources folder there will be a one size folder and here in styles.tml file you will see all the global style defined here okay so for a multiple control here styles are defined here on main page if you see this button control like this so this button control is going to inherit whatever the style defined here let me run the application so you will get better idea so here this button control inheriting whatever Styles defined here in style.jaml so if I change this font size to 18 then it's going to reflect here okay so this is a global style now if you want to apply Style on a page level then you just need to add here content page.resources and in that this add resource dictionary and here you can specify style for any of the control let's say I want to specify style core button control then set here Target type 2 button and now here you can set property like whatever the property you want to set let's say I want to set background color then just set background color property and here in value specify the whatever the pillar you want so now this type is going to apply with this button control so now accept this background color all other property is inherited by this button control if I want to like if I change here font size in global style then it's just going to reflect here also okay so here background color as well as here what is the font size I specified that applied there so basically local style is override by here whatever implicit style I Define so if I change here the font size then Global font size is not going to use because that here I just specify some different font size so you will see that reflects and field okay so this is the implicit style now let me create some explicit style or label and here we use that so here in style.jml I'm just going to create some common style or reliable okay now another style I am just going to create don't be label so here I am just going to use based on so I'm just going to deny whatever style defined here in common style so if you want to derive some style from existing one then you you can just Define based on and here you just need to specify that style name so now this label is let me just specify name also okay so this subtitle label is going to use this label comment Style and here you can just Define some Unique Style okay let's say I this one will say italic subtitle and another semi board subtitle so for this I am just going to set on Emily and whatever the font family is available here in Maui program.cs this semi board on key I'm just going to use here in font family value okay so this boat level are derived from this label comment style so these two common property is going to have this subtitle level as well as 70 volt subtitle label the different is one label has a pond attribute italic and one level has a found family sample now let me use that label here on main page so here here and just specify style so I'm just going to use here subtitle level and another label I'm just going to add that is going to use subtitle in semicolon subtitle okay now let me run the app so you will see reflection here one label is using this italic style and one level using semi gold property Style okay so same way you can Define this explicit style here on Facebook also you just need to specify some key name which I just want to space create style for button and here I will just specify it p and this text color going to be green so if I use now another button with the Styles property okay so now this implicit sorry page level this explicit style I use here okay so that's all for today I hope you like this video and thank you so much for watching

Channel: Programming With Pragnesh

Views: 742

Keywords: Styles In .NET MAUI, Types of Style in .NET MAUI, .NET MAUI Styles, Style apps using XAML, Style Inheritance, .net maui, net maui, maui c#, maui tutorial, maui .net, maui, C# maui, dotnet maui tutorial, blazor tutorial, blazor crud, .net maui app

Id: a6veDIzIu1E

Length: 7min 4sec (424 seconds)

Published: Sat Apr 15 2023