No XAML? No Problem! Create Your .NET. MAUI UI in Code with C# Markup!

like don at maui but example not so much i've got good news for you you can write your entire ui in c-sharp with a set of c-sharp markup extensions that allow you to do it in a more fluent way let's check out what that's all about [Music] the c-sharp market extensions have been a initiative by vincent who is my fellow duchy um and he has been doing this also for like uno wpf and all kinds of other platforms he has big plans for it i think um and a lot of people seem to like it but for don at maui it's living inside of the dot at maui community toolkit for now and under my previous video about the donated community toolkit there was a couple of responses about like hey i like to write my ui in code how do i do that do i use comet do i use this what what are my options so that is what this video is all about um a quick note on comet which is a separate initiative which is um you know the c-sharp markup extensions will allow you to kind of like replace the example do not use the example but do the exact same things but with a more fluent syntax we'll see that in a little bit what comma does is basically rip out the whole example layer the whole mvvm layer and replace that with something that is called a mvu style so that also has a very different paradigm of even updating the ui itself and all those things so that's something completely different a lot of people are interested in that as well let me know if that's something that interests you and i will make more videos on that please let me know in the comments but for now let's dive into the c-sharp markup extensions so for this video i did a little bit of preparation work this is basically a file new.maui application it is running in visual studio 2022 the preview version because when i'm recording this um dotnet maui is still in the preview bits um release canada 2 to be exact um but you know it will be out soon and then you can actually use it in visual studio stable download will be ga and the world will rejoice but um back to the c-sharp markup extensions part of the like the file new template is this page right and if i run it on on windows doesn't really matter it should look the same across all platforms when i run this on windows you will see the little.net bot with a little counter a couple of labels nothing too fancy but it's just a layout to get you started right and what i did is i created this here you can see it click me it all works what i did is recreate this layout in c-sharp which you can totally do today right everything that you can do in example you can do in c-sharp so let's go to my project let's go to main page c-sharp i've called it and here you can see the exact same thing but now in c-sharp so um you can see it is a whole bunch of new objects and setting properties and doing all these kinds of stuff and it's well people say that example is for bose but this is this is much more for bose if you ask me um so you know there's a lot a lot happening here and this is not something that you are really you know this doesn't really make a lot of people happy so um with the c-sharp markup extensions you can do this in a much more fluent way now i'll be honest at this point i like my example i do everything example i don't mind that it's a little bit verbose it helps me get a mental image of how the ui is going to look like so i do most of my stuff in xaml and actually i looked into c-sharp markup because you wanted to see it and so i'm not a real expert there um i'm going to show you what you can do maybe if someone with more experience looks at this and is like general you can do things a little bit better you can do things a different way totally fine i'm here to learn please let me know down in the comments but um you know i'm gonna do whatever i found out uh during a quick um investigation of c-sharp markup so please forgive me if it isn't perfect it's just for you so that you know what is out there and how to start digging in yourself basically so let's go back to visual studio here and this is this is just in c sharp code so just to show you that it's the exact same um run the windows one again i added it to my app i added it to the menu so here i have this fly out menu and i can switch between hello world and hello world from c sharp and you can see apart from a little text thing here it's exactly the same thing now let's do this in the c-sharp markup extensions so um let's close this and what we first need to do is add the community toolkit markup extensions package to our project so let's click right-click on our project right here and then i'm going to say manage nuget packages and i'm going to search for community toolkit dot maui and actually i should search for community toolkit.maui.markup so that's the one that you want to have it's pre-released right now so make sure you click that include pre-release checkbox in the nuget explorer then you can say install and it will install it pretty quickly there we are because you know it's it's not a big package we get welcomed by this readme and the one thing that we kind of like want to know is um that we need to initialize this in our maui program the generic host builder so let's copy this use maui community toolkit markup line and go to our maui program.cs and we can just add this here to our builder dot use maui community toolkit markup which initializes this package for us we should add the right using so that it understands and voila now we're done the initialization is done we can now start using the c-sharp markup extensions for don and maui so if we go back to the readme real quick um here's the links to we have the docs for this as well so you can go to the docs and we have a github repository because all of this is open source of course so um definitely go check that out for more information i'll also link these down in the video description below now what i want to do so i have the main page.example the main page c sharp i'm going to go to my project i'm going to right click do add new class and i'm going to name this one main page c sharp markup so we're going to recreate again the same page but now we're going to do it with the c sharp markup extensions so let's do public let's make this a content page as well just to make it live in line with the rest of the code let's make this a a file scoped namespace there we go and here for the usings let's add the using communitytoolkit.maui.markup markup because it's all implemented as extension methods and extension methods are a little bit harder to discover you will have to know the name and then the intellisense will suggest you the right using so you can better turn that around at the right using and then in the intellisense you will see all the extension methods that you can use and it's quite a lot because that's the way how these c sharp markup extensions work so here let's make a constructor public main page c markup and in this constructor we're basically going to do our whole thing um actually to make this a little bit more um easy let's take this c sharp code thing because it's still going to be c sharp code and dock this here on the right side so we can kind of like see what is going on right what we what the thing is that we actually need to do so we're still going to need this count so let's add that to our class because we are going to use that for our counter that's going to work with the button and then we have a scroll view and a vertical stack layout now let's start with that one so let's i think the scroll view we still need to do var scroll view is new scroll view so let's do that and then at the end we can say content is scroll view right so that's that's going to be our content is the property for our page and that's where we're going to set the whole thing the scroll view can only have one child so let's say far vertical stack layout so that's going to be our vertical stack layout and the stack layout is going to have all of our other stuff right so here we can say is new vertical stack layout boom we have that one but actually let's make this the same as here and we're going to say spacing so the spacing i couldn't find a spacing method for the c sharp markup extension so i think you really need to set the spacing like this still but then for like the padding you can say dot paddings and you can set padding for like all the different things right so i'm going to set this for 30. i want it to have 30 on all sides because if you just set it to 30 like this in code you want to have it 30 like all around and now we can have this padding on this vertical stack layout now the one thing i still need to do is set scroll view dot content because it can only have one child is vertical stack layout and basically now we've set up the basics for our page but of course we're not nearly done yet so what i'm going to do inside of this vertical stack layout i'm also going to supply the children children here we are and this is a collection of you know visual elements right so we're just going to get all of our labels in here actually this is not really the c sharp markup extensions thing i could totally have done this on the right side with the c sharp code as well but you know this just fits more into like how to do this and also if you look at the right side so our plain c-sharp code uh we'll scroll down a little bit and if we get to like the counter the count label we will have to have a reference to that label to actually you know set the text right so in this button we're going to set that count label.txt to the new count right so that is something where you need a reference to the label for and there's an interesting way to solve that with the c sharp markup extension so bear with me i'm going to show you that next now here i'm going to do new label and i'm going to set the properties for that so i want to have this text hello world that's just something that we need to set this way but then with the fonts there is something interesting again so let's go over here to our font and i can set here fonts so you can see we have all these things right we can set the family we can set the size we can set bold we can set italic and these are all null so we can just set one of them and the rest will be the default so um if we set this to size it's the only thing we want we can say 18 and the rest will be the default right so this just sets only the size and the rest will still be the default now for the horizontal options we can say center horizontal and we can see here in the telesense that's the same thing as horizontal options is layout options dot center well that's exactly the thing we want so boom now we have the exact same thing but it reads kind of like more nicely at least some people think that i definitely also think that you know if you have to choose between um writing this in code on the right and writing this in code with the c sharp markup extensions then probably the left one is going to be better so um actually i didn't update the text here hello from c sharp markup let's fix that else the demo will fail entirely so we have this one label let's go on to the next and actually i see the semantic properties here so that's kind of interesting i was working with this and i was like how am i going to set that so i went over to the markup extensions repository i checked out like the issues the discussions right there and the semantic properties have not been implemented at this time hopefully we can fix that soon so that we can also make our apps more accessible by using the c-sharp markup extensions so we're going to skip over that for a little bit we can still set that if we really want to but i'm going to skip over it for now i don't need to add it to the children right here because we're already doing that here in line then the next thing is the count label so here we go comma new label and the text is going to be actually let me copy that here we go oh actually i think i skipped a label here uh we need to do this one the welcome label so add the welcome here and again a little font size so boom font size 18 and i also want to center horizontal and boom we got another label right so this is going nicely let's add another one new label text is i'm scoping skipping over this a little bit faster right because we want to actually get to something interesting here and all the labels you can figure out for yourself so okay this is actually the interesting one so we have the count here let's set again the font to 18 oh size 18 but this is the label that we actually want to reference right whenever we click the button we want to update the count here so oh actually we need to do the font attributes also let's set the font attributes we can say bold is true so now it will set it to bold and we still need to again do center horizontal so we can do that and the interesting thing here is that we need a reference to this label to actually work with it with the button we can do that by the dot assign and with the dot assign we can assign it to a variable and we can do that by doing a out and then say label and then say count label so that way we're just getting a reference to that label through this assign method instead of you know placing our label outside of the vertical stack layout do for new label get that name and and mix all the things here we don't want to do that we want to stay inside of this c-sharp markup extension world right so we have this count label now let's see how we can use that with the button so let's go to a new button that's next and the button will have the text is click me and what we have else we again have some font attributes so let's say font bold is true and then we can say sender horizontal but now we still need to invoke that click thing right so how are we going to do that well we can say dot invoke and we have a lambda expression that we can use to actually reference anything by this button so we can say the button is going in our button instance and we can say b dot clicked that's the thing that we do of course everything that you see here you also have like dot bind so you can do data binding you can do all those things in a fluent way as well and go check out the docs for that but i'm just going to go with the events for here dot clicked plus is and i'm just going to do this in line you can definitely also create a separate method for this which is probably better but i'm going to do it in line here sender and event arcs which is fine and we can just define the method thing here so actually i can just copy it from this side count plus plus the count label i need to probably oh i actually named it the same so this should work so let's just place that here count plus plus count label is and i can do the semantic screen reader here right because this is just a block of text that i can use so we can do all the accessible stuff here boom our button is working as well i think that we just have the image left so let's do new image and i'm going to create a new source is new file image source with a file is let's scroll down here on the right dotnet bot dot png and i think we also don't have like properties for the width request and height request or the extension methods i should say oops it's not on the file source it's on the image i can't type under pressure when other people are watching with request is 250 height request is 310 and again we can do the sender horizontal right so in a fluent way and i think with this we have our layout complete so you can see it's a couple of lines less we're on like 85 here and this is 71 so 10 14 lines less so that's already a win right and if we do this and we get a little bit of a better overview um you know it it arguably is more readable it's like more fluent new label with the font and center horizontal um and then with the font and horizontal we're going to invoke so you know this this can definitely count as more readable i think if you format it a little bit more nicely then this is definitely better to use now what i'm going to do to show this in our actual main page i'm going to have to add this to our app shell so app shell and i'm going to create a new shell content here actually if you want to know more about shell definitely let me know in the comments as well i'm learning shell a little bit myself so definitely let me know if that's something you want to learn about i'm going to add a new entry here shell content i need to point this to our main page c sharp markup type the root c sharp markup those need to be unique and now whenever i run it on windows it's going to be a very uneventful demo because we should see three times the same page but they are formatted in code very much differently so we should see our code in c sharp markup which looks exactly the same but it's much more readable in the code so here we are the page is coming up we still have the c-sharp one and example one but now let's go to the c-sharp markup one and ooh i think i skipped a a property here a method here but it looks more or less the same right so i need that to do that top one so to get it 100 perfect let's check what i missed here um actually welcome hello world font size 18 center horizontal so what did i miss here oh it's it's font size 32 so that's probably why 32 boom let's run this again and then we should see the exact same thing let's check it so you don't know so you know i don't lie here we are it looks exactly the same throughout all of these three pages now like i already mentioned my mental model works best if i use xaml but people definitely like to use this one brandon minik is one of them he created a whole real world app which is called git trends you can find it on his account github.com br minik slash git trends which is an app you can download in the app store and it is entirely written in xamarin forms at this point but with the c-sharp markup extension so definitely go check that out and it's open source so you can also check out the source and how he has solved certain things if that's what you're interested in um it is really amazing to see thank you so much for watching again one of my videos of course all the code can be found on a github repository that is linked to this video go check it out in the video description below please like this video if you've actually liked it and it will spread to more people by the means of the youtube algorithm and then more people can come in and enjoy these wonderful videos please check if you have subscribed to this channel already so that the content will come to you instead of you having to go out and search for me well maybe while you're here go check out more dotted value content in this playlist right here or if you want to know what the community toolkit is that i've actually been mentioning a couple of times check out this video here see you for the next video [Music] you

Channel: Gerald Versluis

Views: 29,328

Keywords: .net maui, dotnet maui, .net maui tutorial, dotnet maui getting started, .net 6, .net maui example, dotnet maui tutorial, .net 6 maui, dotnet maui comet, c# markup tutorial, C# markup extensions, .NET MAUI community toolkit, dotnet maui community toolkit, maui community toolkit, .net maui no xaml, .net maui ui in code, .net maui coded ui, C# markup, .NET MAUI, UI in code, user interface in code, ui code, user interface design c#, CommunityToolkit.Maui.Markup

Id: nCNh9G-Q688

Length: 19min 13sec (1153 seconds)

Published: Tue May 03 2022