Migrate to .NET MAUI from Xamarin.Forms Faster Than Ever - .NET Upgrade Assistant for Visual Studio

it has never been a better time to start upgrading and migrating your xamarin forms applications to Don and Maui because there are some brand new tooling built into Visual Studio of 2022 that walks you through the entire process or even the command line to get you up and running in just a minute to be honest with you based on your application I'm going to go through a real world application from start to finish and do the entire migration all from visual studio so tune in [Music] thank you foreign [Music] I'm James and I'm back today talking about how to migrate your existing xamarin xamarin forms applications to done it six seven eight whatever you might be on whenever you're watching this video 9 10 11 12 and of course migrating those xamarin forms apps to the evolution of xamarinforms which is dot net Maui now I'm not going to cover IOS and Android specific if you're not using xamarin forms I actually do have a great blog post covering all of that what we're going to focus on is migrating and updating our xamarin forms apps to.net Maui and this is ever important because in May of 2024 is end of support for xamarin iOS Android Mac and xamarin forms and you'll need to upgrade and migrate over to done it six seven eight and of course if you want to obviously if you're using xamarin forms migrate to Dynamo which is the evolution of xamarin forms the team built in the ability to upgrade automatically to Don and Maui from xamarin forms and there's some brand new Tooling in Visual Studio 2020.2 or from the command line to handle everything now there are a few things that I want to preface here before you actually get started first and foremost you want to take a second analyze your project and look at all of your dependencies go and check to make sure that they've been upgraded to.net maui.net 5678 whatever it is and that includes libraries and of course that includes any control libraries that you're using so if you're using things from like syncfusion or teleric or Dev Express make sure those controls are available or of course if you're using a community package check those out also take a look at any third-party binding libraries it might be using and make sure those are upgraded as well of course reach out to those maintainers or if one of The Binding libraries is available you can always upgrade it yourself so those are some things to consider before you start migrating and updating I also like to do a side by side that's something that I like to do because I don't want to stop shipping my existing application I want to kind of go through the cycle there now this is ever important because in May 2024 that's the end of support for xamarin and xamarin forms so you'll want to migrate and of course you always want to stay up to date with the latest operating system so what we're going to do is go through a full migration today and everything that we need to do so let's go ahead and get started all right so the application that we're going to be migrating is one that I actually did a while ago on one of my live streams but that was really early tooling and a lot has changed so we're going to go ahead and see how easy it is to get up and running so this is the my coffee application you can find it on my GitHub and here we can see there's different you know different styles of espresso there's a fly out here with my coffee's databases image caching settings all those different things inside of there this is actually a fairly real world application we have some dependencies over here like you know this monkey store and mvvm helpers and sqlite we're using the xamarin community toolkit xamarin Essentials and xamarin forms over here we can also see down here we have the Android and iOS app and of course I had a Windows app I'd have a Windows app on there as well and this has all sorts of things you saw custom fonts font icons all those goodies inside of there so the first thing that we're going to want to do is actually go to the download website if you want to learn more about this feature called the Upgrade Assistant this is a great add-in for visual studio or the command line that helps you upgrade your existing applications to the modern Frameworks so for example here it supports MVC winforms WPF xamarin form set on a Maui and so much more so that's what we're going to do the first thing we're going to do is go to extensions manage extensions and we're going to search for the Upgrade Assistant right there now I've already installed it but if you haven't you'll see like a little download button here and then just close Visual Studio it will install it takes a few minutes and you'll be ready to go alright that's it now here the Upgrade Assistant specifically manages in this case our net standard shared project that we have over here that has all of our Uh custom fonts and our packages and it's using obviously xamarin forms and when you right click you'll see an upgrade option now notice that I'm not selecting the Android or iOS project you can't upgrade those I can upgrade this on its standard project so we're going to go ahead and do that and hit upgrade and there's two options here in place and side by side and again I'm a big fan of side by side that way your existing app continues to run it's all great everything like that so we're going to select that the upgrade Target that we're going to select is a new project and we'll hit that next and I'm just going to leave it as my coffee app core this is actually going to go through and create a library that we're going to kind of throw away but we'll see what you'll see what I mean here in a few minutes now you can select what framework you want now I've done at seven installed here with just the current version I have today but if you wanted to try out down at 8 you could do that as well so select what version you want to upgrade to now let's kind of list out all the different components that we have available to upgrade and what this is going to do is going to go through obviously first all of our dependencies and all of our packages and everything like that in there this is going to analyze and say Well xamarin Community toolkit xamarin Essentials and xamarin forms they'll just got to go so xamarin forms obviously now dot Maui evolved to xamarin Essentials is now built into Dona Maui and the xamarin community toolkit is now the dot and Maui Community toolkit as you would expect and then here just third-party packages that I'm using as well then it's going to go through all of the other code that I have so all the helpers all my services all my view models and all my views and it's going to look for all of the different attributes for example that are referencing xamarin forms or in the code behind for example xamarin forms and the xaml that's inside of it now if we look at the upgrade assistance there's some things that I don't want to actually have it move over or modify I'm going to add it later first are my custom fonts we'll just add those manually in a bit and then additionally I don't need it to do anything to this getting started dot text file you might not even have that and I also have this assembly info file I don't really need this because we're going to use new modern.net Maui exports for fonts and xaml compilations on by default so why even bring that over let's just go ahead and remove that everything else let's go ahead and upgrade that selection now what's going on here if I upgrade do the output and go to the upgrade assistance is it's analyzing every single file every single reference every single thing inside of my application that's going to Output here a really rich output if I want to dive through the details but we can also see a real-time display of the Upgrade Assistant upgrading my application and honestly it took like no time at all to do so and this is a relatively complex app with a lot of view models a lot of xaml a lot of things like that now let's see what we have now we have this my coffee app core and if I double tap on that we can see that this is now targeting Android iOS and windows here it has some supported platform but the most important thing is that this is just a library there's a library we can add to an existing.net Maui application for example or we could just use it and you know copy these files into that project if we have one that's what we're going to end up doing so we have all the packages here and we have other reference the shared project so that's nice this actually has a little shared model folder with some coffee inside of it so it knows to bring that in automatically so that's pretty cool all right now a few things that it didn't do is that it did not for example upgrade my packages so the ones that I have that I didn't know about there's just random packages I'm using it didn't upgrade those right those are just still the same version but notice that the community toolkit is now the.net Maui flavor of it right so it's all there automatically and that's really really cool it got rid of xamarin Essentials xamarin forms and the xamarin community toolkit and upgraded it for me automatically now again this is an upgrade assistant so we'll see what it did and how it helped us out but the first thing I want to do is actually just create another folder here and I'm going to add this in I'm just going to call it xamarin forms again this is just to help me organize and I'm just going to move those in there so we can collapse them down so now we just have my new Don and Maui Library here okay let me just go ahead and close all these tabs and what we're going to do is just simply compile it up and let's see if it compiles that's the most important part and the answer is maybe maybe yours will it depends on what happens and how close it was in my case it looks like we have a few issues here the first is that there is a ambiguous reference to color and it needs to know do I mean system dot drawing color Android graphics color Android resources color Microsoft Maui Graphics color well we want system drawing color that's for sure I'm going to copy this because I think there's a few other errors in there with that if we look here we can also see that xamarin forms doesn't exist I was aliasing command as a xamarin forms command so let me go ahead and do that there and remove it and now it's going to be mad at me so we can say yeah use the Maui controls command that's built in cool all right what else do we got going on here all right it's looking good let's go ahead and compile it one more time we'll see if we get further so we compiled our code and the next thing it's going to do is go a little bit deeper here and we can see the same thing we actually used to use xamarin forms colors and that or color I think or colors and that was Alias to system drawing colors so we need to be a little bit more specific here and I'm going to do colors dot black and colors.white to system drawing color.black so some dot drawing dot color dot White all right we're getting closer what else do we have going on here all right if we look at our errors we have a few more this time inside of xaml so now it's doing com xaml compilation if we pull this up we can see that what it did for me inside my xaml is it when it upgraded all of my name spaces it even upgraded my toolkit too from the xamarin toolkit to the down and Maui toolkit but there were some changes inside of the Don and Maui Community toolkit for example item selected event args converter change to selected item event args it moved out around so we're going to need to fix that up in a few areas there we go and do that again there we go there's three of those references and let's see if we're getting closer here and all of our errors have gone away so that's pretty cool like so far everything is compiling so I like that now if I set this as my startup project we can see that I can't actually compile or run it or do anything because it's just a library we actually need an application to put this in but besides that everything else is running we see that we do have a we have our Maui program here and again this is the startup for the download Maui app which is different how it worked with a xamarin forms and this is automatically configured with the Maui Community toolkit which is pretty cool this isn't configuring anything else uh like our fonts or any debugger stuff that a normal file new project would do so we'll take a look at that here in a few seconds but we have our app shell we have our app.xaml and we have all of our other code inside of here and like I said all the namespaces are cleaned up in fact if I go into my settings it knows automatically that I'm using Microsoft Maui storage preferences because that's built in but do notice that there's a few things that you know aren't being used like for example newer C sharp features it's not like it upgraded all my namespaces to newer modern indented you know C sharp like that so that could be something I do in the future for example but we are good we are compiling but we want to put this on an actual app right that would be kind of good so I'm going to add a new project here into it and we're going to create a.m out yeah and this is going to be my Maui coffee app perfect and again you're going to select the same framework version that you selected when you're upgrading the project so for me.net7 in this case so if you had.net 8.8.99.9 so this is kind of important if we look over here let me just go ahead and close all these tabs we have our core and our coffee app now you could specifically like reference this directly but I'm a big fan of single project putting everything inside of it but the reason I created the app separate is that I have now a platforms folder where I can put platform specific code so some of the things for example uh that I was doing inside of my Android application was I was using some of these assembly dependencies for example and I was uh enter um I was implementing this I environment and this itose for example so I could put this code directly in the Android project which would be pretty nice and I have those over here I also have these resources go ahead and expand that here so we can see that I have my app icons fonts images Splash screens all that stuff so I could then get access to all that goodness that Don Maui is doing for me and then we have an app shell and an app now this app by default is using some default stylings but what we saw is I had my own styling so I probably want to use my own and the app shell is just displaying the main page so what I like to do is I like to delete the app app shell and main page now this might be a little bit different for you based on what your project setup is but I'm just going to delete those three because I already have these in my core now one thing though is I do want to keep this Maui program because while it is a little bit different than what I have before um with the core it does have some nice pre-configured fonts so I'm just going to keep these it has a logger in there for me automatically so we're going to keep that now here's what I like to do I like to First go into my coffee app and just copy my nuget packages that I had configured so I'm just going to open up this I'm just going to go and paste these in here so there's some nougats there just paste these nougats in there so we're good to go and then I had this shared project so I'm just going to go ahead and drag and drop that onto my dependencies of my Maui app there we go so that automatically configures it for me and work great so all those nuget packages will come back in and that should restore perfect now at this point again could just kind of drag and drop this as a dependency but I like to put everything in one place just it's way easier for me so I am literally going to take everything but the Maui program and drag and drop it into the my Maui coffee app okay and that's going to make a copy of all of them there and you can see actually in the Cs project writes a bunch of stuff in here so we can just delete all that we don't need any of that there and it's totally good to go with the Maui program uh CS here not only will configure IOS and Android and Windows but also Mac catalyst an output type is XC because it's a root name space it uses a single project inclusive implicit usings because all of our app identifiers so you can reconfigure this from your xamarin forms app for example and then it gives us all our supported platform so this is really nice and we get all of our Maui images Splash screens all that stuff now all we need to do is double check our Maui program and the first thing is that it says oh you need to add you know you're using for the app because it's a different name space we could align the namespace but we're just going to bring in using my coffee app because that is coming from this namespace here which is nice which is what it used to be and then here I can say use Maui Community toolkit so that will automatically add it there which is which is nice perfect there we go all right so we're getting a lot closer and if I set this as my startup project we can go ahead and try to compile the actual project and see what happens at this k at this point because here what we have is we have our main app with all of our stylings and as long as these are valid right something is something has changed I know one change in dot in Maui is that if you are doing on platform the default is required or making sure that all the platforms are supported it does do that check as long as these are all valid this should all sort of just kind of work ideally inside of your application so again we're just going to let it go ahead and compile up here at least on Windows first and we'll see what sort of happens at the end of the day and we're going to get normal output we're going to get normal things inside of our application as far as compiling up and debugging our Maui application so let's just go ahead and give it a second to compile up and then we'll hit debug and see if it runs all right I'm just going to hit debug and then it should install it on my machine and we should be totally good to go and let's fingers cross see what happens here and this is a pretty full world application so we'll see what we have all right we actually have our app up and running amazing there we go now uh we are missing a few things we have our fly out of course which is nice but it does seem like we're missing a few Styles here where it's not expanded across so we could go ahead and take a look at that inside of our app shell and then additionally we're missing fonts and we're missing images as well right so that is something previously before that we would add into a font folder or we may add that into the platform specific to do that so let's go ahead and fix that up and just configure those fonts that's one thing that is going to make this application complete so I have my folders over here and inside of my old coffee app I have resources and I have fonts and I'm just going to go ahead and take these and here under fonts let's go ahead into our app and I'm just going to go ahead and drag these in perfect all right now inside of our application from before we had a little bit of metadata here about what we were calling these fonts aliases so let's go back over into our Don Maui application here all right now I'm just going to go ahead and paste these in here just so I have them there we go and what we can do is we can just simply configure a bunch of fonts so I'm just gonna paste in four of these and easy enough just simply copy and paste and then we don't even need alias in here so that's good so that is the alias I'm just gonna go ahead and copy and paste since these are all the same again copy and paste and then we'll just remove that Alias equals and again you won't have to do this if you don't have custom fonts but if you do have custom fonts like me and font icons and images you'll definitely want to do this perfect all right so that's going to go ahead and configure those fonts for us automatically now the other thing is that how down and Maui handles images they're just an images folder here so you can just drop images in there or even svgs that'll be reformatted for you so we're going to go ahead and take a look I have uh probably this inside my Android app and I have um resources and let's see drawables there's my coffee bag and I can just go ahead and drag that coffee bag in there now how this works in Dynamo is I have videos on this but it's going to look specifically for you know any font that's inside of here we can see this is being added and removed and all these things automatically and you of course can clean up any of these uh things inside of here which I like to do because they're all automatically handled for me so just in case something goes a little funky you can just simply remove those because there's these regexes here that will handle all that configuration for me all right now hopefully if I go ahead and rebuild uh what we want to see is some custom fonts and icons coming in here and then additionally our image that we have that we saw over on our Android app that's just an image that's going on there so hopefully that all comes in and looks something similar to that so again let's go ahead and let it have it recompile and we'll give it a go now when we compiled we actually got an error here and this is because the font files actually have a must must have a specific name they can't have dashes in them so it's actually something we're going to have to fix so here what I'm going to do is I'm just going to rename each of these and I'm going to say fa brands fa regular for font awesome so I'm going to rename fa regular and then f a solid so let me go ahead and renames those so this is something you might run into especially if you're grabbing those and then again I can just go ahead and update these here automatically there we go awesome and again I like to clean up my I like to clean up my my uh things here so there we go we're actually should be good to go all right let's go ahead and recompile it one more time and hopefully now we get a Full Compilation with any of our errors out of the way all right let's go ahead and debug this and let's see if we have our images and fonts and everything up and running and sure enough there we go we have our fonts and our images inside of here now there's something to pull up here is that you can see that between these two there is missing a little bit of space and it's because we're using a grid in this case there are some differences in how Donnet Maui and xamarin forms rendered a few different controls you'll want to check out the documentation which I'll link to below about some of those changes but just like that we have all of our icons and all those things coming up there's probably a few little things for me to take a look at but all in all this is looking pretty good and I actually have a Windows application now which I didn't have before right so that's really nice now one final final bit that I want to talk about is that we are missing some of those dependencies that we were registering previously before all right well what about handling this platform-specific code you can see here inside of my xamarin forms app inside the Android app we have some assembly exports here for dependencies if we scroll down we have the toast and then the eye environment that's setting the status bar color well I'm going to bring this over but we'll no longer be able to use this dependency assembly export to my knowledge that'll just return null it won't be able to scan the assemblies at startup I don't know if the team just removed that for performance reasons or what but that seems to always return null but there's still a way to use it even though I definitely recommend upgrading to the latest dependency Injection Service that's built into Dynamo which I've done a video for here on the channel and I'll link to docs let's go ahead and first just copy this environment over and from simplicity's sakes we'll just add it to the same exact kind of main activity inside of our uh Android code so I'm going to go into the my Maui coffee app platforms Android and then main activity you could obviously create a file here as well that would be nice and work too so let's paste that in there and now what we get is all of our code kind of coming in so we have the set status bar over here we have our build information we can see that the platform and current activity still works because that is built in to the sort of xamarin Essentials migration there but the only thing that isn't coming in for me is this two platform color and again it looks like when I copied and pasted it brought in the according namespaces so that's Nifty so what we'll have to do here is give it an Android graphics color so I'm just going to go ahead and do this here I'm just going to say VAR AC for Android color and I'll say new this takes in a what does it take in takes in an android.graphics dot color and this specifically can take in an RGB there we go so I will say color dot R color dot g and then color dot b perfect and then I'll just pass this AC into here and we're good to go now I can't just copy over this assembly export that's not going to work instead we're going to go into my Maui program here now if I was using the new dependency Injection Service I could say for example here if Android and then end if and you can do this for any of this conditional compilation you can do if you do windows you can do iOS you can do Mac Catalyst you can access those things if you leave the namespaces the same then you won't have to really worry about that but I've only implemented this on Android so it's only going to be available there if I was using the new dependency service I would say servitbuilder.services dot and then I could add you know things like a scope to single tennis transient but if I go into my theme over here we're going to see that I am using this dependency service.get so that's not going to work for me yeah and this is a static class so unless I was to register this theme and then go through this again I might just want to get my app up and running first and worry about these iterative updates later so let's go ahead and instead of doing that we can say dependency service dot register and I'm going to register my environment all right there we go now this is going to come in and resolve out my interface as well so that's really helpful for me now remember that I specifically over here created this in the same namespace all right so if you have a different namespace you want to add that namespace here and be careful in case you end up doing some different usings here oh and we can get rid of these exports as well there we go perfect all right that's literally it so this will register it manually for us and we should be able to now run this on my Android device and I should get back that dependency for me inside of that theme so that would be the ideal scenario there so here we go applications up and running instead of getting this purple bar at startup we should get the matching theme color here so if I go the E we can see I have my environments my coffee up that environment and that should go ahead and set it accordingly just like that which is super duper nice all right so now we've started to migrate and modernize our dependencies which is nice in our application so that's one thing that we need to to do obviously and then of course there might be some other ones that we'll want to register as well so kind of be aware of that as you're going through the process now over on the documentation side this is the final thing I want to end with is that there's some other things you might want to sort of be aware of right when you're upgrading here this is going to be great documentation that's open and updated all the time of migrating those xamarin native projects or xamarin forms projects inside of the xamarin forms projects there's stuff about the Upgrade Assistant upgrading manually layout Behavior changes even how to reuse custom renderers migrate custom renders and reuse effects they're all there for you here's some information about invoking platform code I'll put these in the show notes below of course so I'll show you how to do all the conditional compilation how to register it automatically with the dependency Injection Service and things like that and then finally one thing to really be aware of is that the messaging center no longer is around it is deprecated in.net 7 and was replaced with the.net Community toolkit for mvvm which has a weak reference messenger which I specifically did a video on here on the channel as well so I'll put a link to that too well there you go everything you kind of need to know lots of great documentation and hopefully this gave you a good Insight from going from start to finish and having a full running migrated xamarin forms to Dynam Maui application all right there you have it it's really just that easy to start migrating and upgrading your existing xamarin forms projects to Dot and Maui now there's a few things like I said that you should also consider doing one is you should probably get rid of the old dependency Injection Service and use the new dependency Injection Service that's built in if you're using shell that will Cascade it down automatically now one thing that this also didn't do um is migrate or update any of my mvvm code and this is something where I love the.net Community toolkit for mvbm that simplifies all that codes you probably want to also go through that now the other thing would be icons Splash screens maybe converting some of those pngs over to svgs that would be super good in dropping those in there and of course bring any string translations you may have and all that same code should work and then also upgrading using some new C sharp features right some of those short name spaces some pattern matching in there some of the things that Visual Studio will walk and help you update your code now that you're on Modern C sharp whether 11 12 whatever you happen to be on then again make sure that you're analyzing those renderers and effects and even if you need them anymore now in my case I don't really have any of those so my my upgrading here was a pretty seamless as that as that goes I didn't have any too many third-party dependencies but I also want to double check those nuget packages right upgrade those nougat packages there because as one thing that the upgrade assistant's not going to do it's going to do what it can but it's not going to magically upgrade this random mvvm helpers Library do I even need it anymore it's something to analyze there now this to me is a very very nice way of jumping forward instead of having to go and update all those namespaces and those things automatically or manually I should say and this does it for you automatically some people like to just do file new in this hand convert every file and move it all in there that's definitely a way based on your project and based how big and maybe how Legacy it is but for me I've gone through all of my projects and I followed the same exact mechanism here when I'm done what I end up doing is I sort of put all of my Maui code in the same folder that my xamarin forms was in I align all my name spaces make sure it's all cleaned up I check that in to Source control and you always create a branch when you're doing this or you're totally good to go and I move it off so basically at the end of the day I just have one project one folder that is my.net Maui application it's super seamless I super really hope that you enjoyed this video if you have any questions leave it below let me know how your experience with the Upgrade Assistant has gone like I said I I've been upgrading all my projects and of course there's manual work to do here but this app is relatively complex and it is working fairly good out of the box I'll put a link to the final repo that you can go ahead and pull down and check out today if you have any questions like I said leave them below and if you did like this video give it a thumbs up and jam the Subscribe button thanks so much for watching happy migrating up to.net Maui and I also have videos here on the channel covering all the topics that you might want to go into the dependency service navigation.net Community toolkit all the new resource stuff so definitely I'll leave links to all that below and again thanks for watching and have a good one [Music] thank you [Music]

Channel: James Montemagno

Views: 5,768

Keywords: .net maui, dotnet maui, xamarin forms, .net maui upgrade, .net maui migration, dotnet maui migration, dotnetmaui migration, dotnet maui upgrade, dotnet maui tutorial, migration tutorial, .net maui update, .net maui updating, .net upgrade assistant, dotnet upgrade assistant, visual studio migration, .net maui getting started, .net maui tutorial, .net maui example

Id: 7EaHKGUCIqc

Length: 32min 57sec (1977 seconds)

Published: Thu Aug 24 2023