.NET MAUI Update: Preview 5 with Animations, Shell And Controls

the team is smashing it with don at maui there's preview 5 out now so let's go check out what that's all about [Music] before i show off all the new.net maui goodness there is two new senior developers on my membership for this channel that i need to do a little shout out to so angelo bestetti and tom river thank you so much for joining my channel as a member and paying a small price back for all the things that i'm doing here if you want to be a member become a member yourself please click that little join button down below this video and check out what that's all about before we go and play with all the new bits let's check out what it's all about first david wrote this wonderful blog post we are still recovering from microsoft build and preview four and now already.netpreview.net six preview five naming is still hard it's already out which is really really cool so this is the app that we're going to show in a little bit again you can check out the other video at least on preview four i've shown this as well because this is the demo that came out after build that david and all the other people on the team have been working on as kind of a sample app that we can use for dotnet maui actually i i see i just now noticed that this is a video so let's just click play and you can see this great animation coming in here so that's one thing that is new but before we go dive into that a little bit deeper um he also says we have also published our first batch of preview documentation so the documentation is already coming you can already start looking into what is.net maui from the the documentation and then you have the to actually install it and go look at it so if we quickly go over to the docs.microsoft.com.net maui little pro tip right here you can skip the enus and when you do it will automatically go to a localized version if it's available so you don't have to remember that just docs at microsoft.com dot net slash maui works for all the docs pages little pro tip right here in this video and here we have an overview what is net multi-platform app ui supported platform so that's an interesting one let's go there um android 5 api 21 and higher ios 10 i think those are slightly higher than xamarin forms is right now which makes total sense because you know time went on we have to cut a little bit of that old legacy features so just move on to the new ones mac os 11 so that is quite recent and windows desktop uwp using wind ui three so that's pretty cool but here this is what i found really interesting additional platform support tizen the tizen team is also always also with xamarin forms doing a great great job they're really fast at catching up with even big features just when we merge collection view then collection view boom was also support added for tizen and the same thing now actually with the xamarin community toolkit they've also added i think the media element there so they're doing a really really great job and the more even most important thing maybe most interesting thing is linux a lot of people also on this channel have asked me where is the linux support that's not being talked about well there's being talked about it now um it is just like with xamarin forms there has been a couple of platforms that are supported by the community um so you know if you want to make this happen then you are partly responsible for that um so you can you can make it happen linux is here on the list and you know if it get enough traction then who knows what might happen maybe it will bump up the list and it will be supported by microsoft because you know we love linux now too so that's pretty cool um okay so if we go back a little bit get started installation build your first app migrate from examine forms i still have to make that video i promised you but now there's some documentation to back it up so i might just go through these docs to see if i'm missing anything and then i'll be making that pouring that into a video for you app startup single project and customize control so you know creating your own handlers and that kind of stuff um really really cool stuff there's not that much on here yet but i'm absolutely sure that this is going to grow like crazy and all the stuff will be on here just like xamarin forms because the documentation is so so good okay so that out of the way um here we can still see the looping animation that's going on which is really really great you can see these cards just fading in maybe moving a little bit to the right i don't know maybe just a little bit but animation so animations have been implemented as view extensions the fete2 rotate2 scale 2 and translate 2 and more so that's just a couple of them and you can make use of the new attached handler which is really cool so if we click on this one it will take us to the pr and we now have a couple of new events apparently on a visual element that is attaching handler so that fires before the handler was created remember the handler is kind of the new renderer which is not a renderer but it's the new concept of a renderer also attached handler so then you know the handler is attached and that fires after the handler well has created and set the native view this was always a problem with the renderers right because with the renders you had to do like control is null as not null or the other things the element and you always have to figure out which was what which was the native control which was the forms control and now you just have these events and you have the guarantee that the native view is set and you can only do all your things with that so what is happening it's here used for doing the animation so on the frame whenever the handler is attached then there's probably some code inside of there that will actually do the animation so we'll see about that in a little bit and here we have a flex layout where we have the bindable layout so that's cool i think the bindable layout is now going to see binaural layouts see what's going on here we already have bindable layouts in xamarin forms and they're probably going to expand that a little bit to other layouts as well although i think you can already use it for all the layouts basically but you know it's just here included for reference so you can set the item template so you can use templates now i'm not sure if that's already possible in today's version and the item source and you can just use that in a flex layout which is you know makes it very adaptive to all kinds of viewports and devices so that's really cool and here you can just say okay unattached the frame on appearing so on appearing i think the life cycle events are also getting some love in dot net maui because that was also a thing examine forms they were in there but not always that reliable so i'm pretty sure that the team took this opportunity to make that right for don and maui and then you can say transition in and it will loop through all the items which is the tiles that we see here and it will do that little animation fade to so it just does the fade the the moving was just in my head probably so that is how you can do that and of course you can create custom doc animations as well which is described in the documentation um so that is now in that dotnet maui as well you can go check that out now in this release there's several new controls added the activity indicator that we all know and love the checkbox by james montemagno he's still very proud of that the image and the stepper so that are new controls well new old controls that were already in xamarin forms but now ported to the new architecture in dotnet maui so i don't know if this is a an app that's out there let me actually check that out and incorporate that in this video and it's much easier in maui preview 5. we've made it much easier to just say use maui app and i think that will automatically find out for you like if you are using handler controls or renderer controls or whatnot and before you had to use that use forms compatibility mind you that method has disappeared that's not needed anymore and i think this is all handled now in the use maui app so see startup wiki i think that might be good this is on dot net slash maui so github dot com slash dot net maui wiki application startup links like always below in the video description and you can find here what all is happening in the application startup so it uses the host builder which is really cool because that is a general thing in the dot net space now we can have this minimal startup we do something with the windows i went over that in other videos so go check that out if you haven't done so already register fonts compatibility so i'll go over this a little bit more whenever we are looking at actual code and whenever i'm going to make specific videos for this but yeah so here is basically how you can get started there is some info on the wiki right now so go check that out if you're having trouble with anything on here so new controls that is pretty cool and we have shell i think shell is in here now as well i'm not sure if it's entirely complete it probably says it somewhere here but now we have shell that was another question that a lot of people had is shell going to be in dot and maui it absolutely is because everything that is in xamarin forms five today will be in dotnet maui but better and more polished so that's great nothing is taken away for you very important and now shell is here at least the new uh the first bits so go check that out i think the syntax is going to be mostly the same so you know that would be an easy port you just have to change the namespace and boom your maui app your maui shell app has now been ported oh so this is the control gallery this is actually an app that i think it still is an app that we used which was much more ugly than this that was used by the team to you know check out all the issues if there were regressions the actual ui tests were ran on this and now you can see this is used as like a sample app for all the controls that are in here probably the ui tests are going to happen with this as well so this is probably in the net maui repository actually so let me see if i can get that up and running for you so we can click through that as well the very latest information about all the controls layouts and features if you're dependent on a certain control or looking forward to what's going on here then go to this page dot and mouseless wikis status where you can see the status of all the controls and all the properties that have been implemented yes or no with a little legend at the top like pending underway or done and you can see more and more green is showing up here so more controls have actually been implemented so you can check out if that control that you're worried about or that you're heavily dependent upon in your current app then you can check out if that is already implemented yes or no so that's a very good thing a single project that is the thing that's ongoing as well so these things are happening these are kind of like going in parallel because that's a totally different theme but looking at this little screenshot here i only see like the.net 5 or the maui 5 project you know we already had the project which could do ios android and mac os the win ui project was actually two projects win ui and win ui package and you had to run that package project whenever you wanted to show it up in running in your windows environment now the package project has disappeared so i guess that's not needed anymore you just have that win ui project and i think in the longer term that win ui project is going away as well and should be in the maui project so you just have that single project for running all your apps so i think you need to update the project reunion preview thing i'm going to do that just after this and a single project msix packaging tool okay so that's in both in preview uh make sure that you install these i'm not gonna show that all to you i'm sure you can download these installers and do next next finish um so i'm sure you can figure that out but i think with that um getting started with dotnet maui preview five we're going to use the maui check tool go check that video out if you don't know what that is um i have a video about that as well that's a tool that can get you the latest bits for dotnet maui the latest preview easier than ever um and i think we can also run this with visual studio 2022 preview one so let's just not delay any further let's go check out how we can run all this goodness and how it looks like whenever we're running all this so i've opened up a little command line window actually let me get the regular command prompt and i can zoom that in easily there we go and i have the maui check tool already installed so let's just run that and see if that gives us anything oh i need to update it first that's something that might happen the tool is already also under development so we need to update that first we can do that with the instructions that are shown on screen dotnet to update min min global red.net.maui.check so let's do that successfully upgrade it from five five to zero five six so that's great now let's do maui check again and it should run it should give us all the things so i'll just let this run for a little bit maui templates yes please give me the newest bits i want them and congratulations everything looks great so enter to exit and that's all there is to it now like i just mentioned i already installed the project reunion and that other msix for the single project packaging or something like that so let's just dive into visual studio 2022 um and see if we can get all this running okay so remember how i just said we're gonna do this on visual studio 2022 well forget about that i went to visual studio 2019 16.11 pre one i think we're still on because you know the extensions that you have to install with uh for project reunion and the single project thing that we've just seen they're not compatible with 2022 yet so if you want to get the best experience at this time you probably want to stick with 1611 for a little while longer but i'm sure that for 2022 things are will be coming along very shortly so this is visual studio 2019 you can see the weather app i've cloned the repository got all the latest bits you can see it right here and the thing that we've just seen in the blog post is like if we go here to the favorites then you can see that smooth animation of them transitioning in so that's really cool and why i'm showing you this on android is because now we can see uh the difference between this one again i've shown it in the last video but you can see that this is really responsive because here you know you can see that it fits on this android screen this is a phone but if we now go over to visual studio right here and i set my starter project to win ui and if you notice right here we only have one win ui project left so before you have the one ui package one if you've seen the other video you might still remember that but now we have this one and this one is also set to disappear and go up in this single project right here but for now we're stuck with the when ui project and what's really cool we can just press play here again you really have to have installed the extensions that i mentioned earlier but then you can just press play now and it will start the debug session and it will come up with that window there we go here it comes and you can see so this is the response of things i'm talking about right in android you would only see this this space right here and you could have this carousel view right here but for this on uwp now you have this full window that you can use this full screen this full resolution so you can place much more information on it that is what makes this really cool and again if we go here to this little favorites page then you can see the smooth transition here as well so that is implemented on android uwp ios undoubtedly so that's now there on all of these apps and what is really cool is that you can also use this with dot-net hot reload of course so let's check out if we can add another animation here that was mentioned in the blog post so let's go to my solution explorer and i think it's on a page and we have that favorites page i think we saw a little code snippet from that in the blog post as well so here we have a grid a scroll view all things that you know already from xamarin forms and here in this frame you can see the new attached handler so here we have that event if you think back from a little minute ago this is the event that is fired whenever the handler has done its work the forms component is already available the native view is available to you so then you can go into this attached and you can do your things we check out the code behind right here we can see that here on attach there we go so it takes the frame because it was attached to a frame and it adds that to this little tiles collection that we have going on here and it increases a count i don't think this count is even used so it uses this and then when we transition in so here on appearing we do this transition in and then we have this item.fade2 which is looping through these tiles so as the frames are added it will go into this collection and then on the appearing of the page it will do that little cool animation now note that we are still running so this is still here you can see the debug session is still going on and now let's try if we can add item dot let's make a little rotate too so let's make a rotate 2 what do we need to do here i think we need degrees or rotation yeah 360. let's do that and let's also do 800 for the length there we go save that and i think right now what we need to do is that we have to click this little hard reload button here apply code changes and then if we go back to our application then we should be able to go back to the home right here and we go back to the favorites you can see it does the rotate as well together with the fade so we have this basic animations going that you can implement right now which is really cool maybe the rotate one is not as fancy as the um the little fade that's coming in but you know it looks kind of nice at least you uh have it all to your in your toolbox so now it's up to you to make it look pretty and now if we go back to our solution explorer i don't think that much has changed that is actually in here besides just you know there's new stuff that is available to you right now i talked a little bit about that control gallery thing so let's just have a quick look at that so we can see what controls are already implemented at this time so earlier i said the control gallery is something that is used at least in xamarin forms that's the name for the project that we had to you know which lists all the controls and all the properties for the controls and it would be used for the ui tests to see if everything still works there's no regressions but this is it seems that something david cooked up um it's might move to the repository i don't know i've saw already some control things in the dot and mao repository as well but for now it's this separate control gallery so if you look at this you can see this is running on mac catalyst so that's cool and it is the single project thing so if we go in here source control gallery you can see this is the single project so android mac catalyst ios is all in here it seems that might actually use shell or you know can you shell so that is pretty cool as well i pulled out the latest codes from this and there's not that much fancy stuff going on here you just have a whole bunch of pages that you can say like hey this is a slider page or this is a whatever page so for each controller is a page so this is probably kind of like the controls that are implemented right now actually what is interesting is that this probably then uses shell you can see here title colors activity because shell is now new in preview 5 of net maui as well right so you can see that it works i think this is the exact same syntax as you would do on xamarin forms just a different namespace that you need to import here um so that is pretty cool and what we get out of the box so we're now back on mac os you so you need to run this through the terminal you need to build because in visual studio for mac the tooling is not really up to date yet but whenever you do you can definitely get this running and here we are so this is then a shell app on maui preview five um and because we declared it like with the flyout items and whatnot we have that here in this menu right so that is pretty cool just as you expect shell to work and then if we go to activity indicator you can see that is implemented is running and it's a little bit styled as well with the color it might be hard to see on the screen but the color is a little bit different so then we have a button so here is all kinds of buttons with different properties that are set um so primary fill primary outline all kinds of things probably the enabled and the disabled states the check box i already mentioned that one as well has a nice little animation going so the check box is in here available for you to use the date picker is that oh the date picker is here so that's cool as well uh what we have the image is also already there shapes do we have already some shapes well you can see i don't know what this is supposed to mean here at the end but we have shapes do we have the slider already the slider is here as well so that is awesome uh what do we all have else the stepper is already in here as well so here you can see basically margin padding oh this pushes away my little navigation bar so let me do that um and the switch with all kind of properties so you here you can see basically all the controls that are implemented right now it seems to be you know nearing completion which is to be expected whenever you know we progress through all the previews a lot of the controls are now already in here already available so you can check that out and i'm sure david will update this and there will also be a sample project in the mao repository there probably already is but i just don't know where it is exactly or how to use it at this time and that is kind of the state and the new things that are available in dot net maui preview 5. i've already mentioned it a couple of times there is definitely more content coming on.net maui i'm still waiting on you know until the previews are a little bit more mature but there is already the docs now with some cool stuff in there so i will go through those see if i can get that to work and already start creating some content let me know what specifically you're interested in for don and maui let me know in the comments down below and then i will make videos on that i'll pre-origize them let me see what i can do there while you're down there in the comments please click that like button for this video and if you haven't done so already maybe subscribe to my channel or if you've already subscribed take the next step and join my channel as a member because for a small fee you will get a shout out in this video maybe you will get a special rule on the discord server all kinds of things that you can do as a member which is really cool other than that i'll be seeing you for my next video keep coding you

Channel: Gerald Versluis

Views: 7,872

Keywords: .net 6, .net maui preview, .net maui, .net maui example, .net maui template, .net maui command-line, .net maui getting started, .net 6 maui, .net 6 preview, .net 6 xamarin, .net 6 android, .net 6 ios, .net 6 maui preview, .net framework, .net core, .net preview, dotnet maui, dotnet maui preview, dotnet maui preview 3, maui dotnet 6, dotnet maui getting started, .net maui winui 3, .NET MAUI preview 5, .NET MAUI Animations, .NET MAUI Shell, .net maui sample

Id: 7N3cbDd2y2k

Length: 23min 25sec (1405 seconds)

Published: Mon Jun 21 2021