In Mobile App Development
Building cross platform apps with .NET MAUI in Visual Studio 2022 - read the full article about app development 2022, Mobile App Development and Native and cross-platform solutions from Microsoft Visual Studio on Qualified.One
Youtube Blogger
>> Hello everybody, thank you for joining. I am Maddy Leger.
I am a Program Manager on the .NET MAUI team.
I am here to talk to you about how you can build cross-platform apps for iOS, Android, Windows, and Mac with Visual Studio 2022 using .NET MAUI.
.NET MAUI is new with .NET 6.
Its in preview right now.
Itll be shipping in 2022 as a GA product.
But the purpose of .NET MAIU is that you can have your cross-platform native UI built-in .NET with XAML and C#, and run that same single codebase on all four of these target platform, Windows using WinUI, macOS with Mac Catalyst apps, and then of course, iOS and Android apps for your phone.
Everything is from a single project with a single project system, a single codebase.
Its all in .NET 6, and the future .NETs whatever comes after six.
Its modern, you get the newest project file types that we use in Visual Studio, and it was optimized to be used with Visual Studio 2022.
Like I said, youve got to deploy to all your different devices, mobile and desktop.
Well look at how we can do that within VS.
The previews are out now so you can actually try it today.
The best Visual Studio to use right now with .NET MAUI is going to be the Visual Studio preview release.
Its 17.1 right now as of this video airing.
The GA brand new VS 2022 has some basic support for .NET MAUI, but if you want that full file new experience, I would definitely recommend using the preview release and you can do that at aka.ms/vspreview.
Ill put it in the show notes so that you see it.
But definitely check it out and then you can get more info on MAUI from the GitHub.
All of that is to say .NET MAUI is the most productive way to create native performance, Android, iOS, macOS, and Windows apps, all from a single code base.
This is actually one of our sample projects running on all four different types of platforms.
The screenshots of it, you can see it looks the exact same.
We have the .NET bot saying hi.
Lets take a look at how we can actually get all this rolling right now in Visual Studio 2022 preview.
On PowerPoint, this is the VS 2022 preview branch, and this is a file new .NET MAUI project.
What I did was when I opened the Visual Studio Installer, I clicked on the Xamarin Mobile Development workload, and then theres a little checkbox that says .NET MAUI parentheses preview, and that is checked by default now for you in the preview branch.
You dont really have to do anything but go, take a look at it.
Then I was able to go file new project .NET MAUI, and this is what popped up.
I didnt change anything except for uncommenting out this line right here.
These lines; these two target framework lines here in my new SDK style project file with .NET MAUI, tell me all the different frameworks that I am targeting with this app, with a single code base right here.
Im targeting iOS, Android, Mac via Mac Catalyst, and then of course Windows.
Lets take a look at what this project actually looks like.
Let me pop this open.
Its one project in my solution, and in this project I have just a XAML file, thats where all my UI code is.
My logic for this app, its a sample template app, its very simple, its just in the code behind.
I have my app entry point, MAUI program.cs, C# file.
Then, I have a platforms folder which if I ever needed to put any platform specific code for just the Android app or the iOS app or whatever that can go in my platforms folder.
Then I have my resources folder, which is my favorite part of MAUI, that you can share everything across all the platforms with just one copy of it.
Previously, if you were building a multi-platform app using Xamarin or something else with .NET and VS, youd have to have different versions of the images for every platform you wanted it to be on.
But in this case, you just have one SVG, one app icon and the app icon foreground, and we load them all in through the project file here.
Its a wildcard for images, its a wildcard for fonts, so anything I stick in there is going to be good to go.
Then those will all get loaded and sized properly for the platform Im targeting.
Whats also really cool about MAUI is that we have app icon and splash screen helpers.
Instead of having to build custom ones for each platform, you can just include a foreground file here, and an app icon, and then just call it, is app icon true, give it a background color if you need it.
It will smush all those things together to create the app icon for you, like the little launch icon when people click on the home screen, and likewise with the splash screen.
Those are some really nifty tools we added into MAUI just from the fundamental SDK layer to make developing really easy.
But this is a Visual Studio talk.
Lets take a look at how we can get this all working for fun with the IDE.
I can target all the different platforms right here with my framework selector.
You see all the ones that I have in my CS project file are listed here: iOS, Android, Mac, Windows.
Im going to deploy this to my Windows machine to start.
While this is building, well give it a second, is just going to think up.
Its going to pop up my second monitor.
But VS 2022 has a bunch of cool features, not to mention, the themes are amazing.
I have been loving playing around with them.
But this is my favorite shade of purple, so I actually left it, but I did spend a lot of time before this customizing a new theme for myself.
The app actually popped up for me right here in XAML Live Preview, which you might have seen in the keynote.
XAML Live Preview is a tool in the IDE to basically screen mirrors, your running app.
Heres my Windows app over here, it popped up on my second monitor, my main monitor.
I can drag it and interact with it, but its a pain to bring this over and resize it, and then resize VS and [inaudible] so I can develop on one monitor.
Instead, I have my live preview tool here.
I can add my rulers, and see the pixels and everything and clear that.
I can zoom in and out, and its reflecting the app live.
So as I click on it and interact with it, its updating here in this window too.
This is a very simple app, this is the template, like I said, when you file new, this is what youll get.
The only difference is it wont say hello Windows, itll say hello, world.
One of the best things I think about .NET MAUI is the XAML Hot Reload feature, it changed the XAML and then updates immediately.
Changing texts is a pretty basic example.
You can delete a bunch of stuff at a bunch of stuff back, my favorite one to demo is always changing the background color to something obscene like hot pink.
Because that looks disgusting, but you notice it.
I didnt have to save the file or anything, I just was able to change that XAML and then Im like, I dont like that, thats disgusting.
Undo it and it goes right back to it.
With live preview, its all in the IDE, I dont have to like look at my second monitor and be like, "Did it change?" No, sorry there.
XAML Hot Reloads, great, big fan, but we also have something new in Visual Studio 2022 called .NET Hot Reload because XAML Hot Reload can only change XAML.
What if I wanted to change my C# code? This button here, like I said, its very simple, its just the code behind, in my XAML page, I have a little incremental here, count++.
Then, if I click it, it increments it by one.
But what if I wanted to increment this by two? I can change this to count+ equals two, very expert code here.
Then, Ill hit this little Hot Reload" button.
Youll see that my state of my app actually saves.
My current count is still 13, even though a bunch of stuff is happening behind the scenes.
Now, when I click the button, it goes up by two, so it stays odd, the whole time, the odd numbers.
Then I can change it back up if I wanted to.
All those different things.
But my state is totally maintained when I do the .NET Hot Reload.
The way that it works is anything within a method for mobile, Android and iOS, anything within a method, the method just gets reloaded, and so when I click the button again, it triggers the new method I just sent over with .NET Hot Reload.
Its really awesome, especially for me when you make ridiculous API calls, and you have no idea what youre doing and you need to just tweak them as you go.
This has been a game changer for me and its new in VS 2022.
Windows is just one of the platforms.
Im going to stop debugging that, and were going to switch over to Android.
>> Let me just check that everything, good were saved.
Then you can see my Android emulator pop right up here.
I had created this before, its persistent across my different Visual Studio instances.
If I ever wanted to create a new Android emulator, I could use this Android Device Manager right here.
Im going to deploy it. I think I have to switch and then switch back frameworks because I have a little bug right now that were fixing.
Switch and switch back to Android and then deploy.
Its the same XAML page we just had on windows, so youll see it says, "Hello World" now.
All the things we had before, it didnt save all my files for me, so well get that odd counter increment.
Its thinking down here, deployment was successful, fantastic. Its launching.
You can see my little launch screen, my purple with the .NET logo and the same thing as before the Android emulator pops up on my second window, but instead of resizing my IDE, I can just have it all beautifully right here and then Ill zoom this out.
Well switch this from Hello World to Hello Android, easy just like that.
Now Ill click this button, were incrementing by two, how wonderful and now its all even numbers all the time.
Then what if I want to change this to a decrementer? Hit the countdown, hit reload it.
Same situation, same as I had on Windows, same code, same live preview, same hot reloading, clicked it, reloaded it, and now its going to go down by two.
We can even get into the negative numbers, pretty exciting. Same experience, across-platform.
This is one of the things to me that I think has made Mallory really fun is like I feel at home developing for Windows and for Android at the same time.
But thats all platforms of course.
Lets stop this and lets take a look here.
Am I different platforms? We have Mac Catalyst and iOS we havent talked about yet.
Mac Catalysts because that runs natively on your MacBook or your iMac or whatever.
We cant deploy that here because this is a Windows machine, its not a Mac.
But I have an iPhone and I would like to get this app running on my iPhone without having to have my MacBook in the loop.
So its off it hasnt been updated in a while. I dont even know where it is.
But I do want to get this iOS app here running on my phone and it has the files that needs to launch from file new template.
It just doesnt have the ability to build without a Mac unnecessarily until we came out with the Xamarin and now .NET MAUI Hot Restart.
Ive signed in with my Apple ID to Visual Studio and I did that a while ago.
Its persistent across all my VSs.
I have iTunes installed so that it can communicate with my iPhone.
If I switch my target there to iOS, you see I have these local devices, simulators and remote devices not pop up and in local devices that actually recognizes my iPhone.
I can select that. Let me just do that little frameworks switch thing one more time.
It just needs refresh the cache basically, to remember to build for iPhone instead of Android.
Its very weird. We filed the bug. Do not worry.
Then Im going to go and deploy this on my iPhone.
Down here you can see its doing a bunch of stuff.
But the most important thing is it actually previsions profile for the iOS app, which would traditionally have to be done on your Mac, but its doing it all on Windows.
I actually have my iPhone screen here so you can watch it using something called Reflector.
This is not working for Live Preview yet, so you got to now witness the pain of having to like drag this over and resize it and all that.
Which is like feels archaic now that I have Live Preview to just pop it up for me.
But its doing all the things.
Its going to ask me to launch it, once I have connected to a MacBook, once I actually dont have to launch it anymore myself.
But because I havent connected this to a MacBook yet, this app, I will launch it manually.
Its going to take a second to load up. You can see that.
Its actually the old launch screen.
Thats because the way Hot Restart works is we actually build like a Shell app that weve provisioned that you stick your code into.
Its the same app in there now, and I can click it and interact with it.
I know it says Hello Android and the counter is still going down by two, but its there.
Its running on my phone very exciting.
Then Im actually now able to unplug my phone and test this app without debugging as well.
So will stop this.
That was a whirlwind tour of .NET MAUI in VS 2022 and as Im sure youve seen in all of the other amazing presentations, theres a lot in VS that shipped this year, not to mention 64-bit.
Hello, very cool.
Check out all the other talks, but lets look at, just for a second, the roadmap for MAUI.
The roadmap, its pretty simple.
Use the preview version of VS 2022 if you want to use .NET MAUI.
Yeah, thats the best way to do it.
Like I said, at the beginning of the demo, if you want to use VS 2022, 17.0, which is what shipped now the GA version.
It has some basic MAUI support, but if you want it to install it for you, if you want it to have the templates and all that wonderful stuff and previously to go.
Then now will ship at some point in 2022 as the GA version of Visual Studio so MAUI will be part of your day-to-day life until .NET MAUI itself shifts GA probably around Q2, 2022.
Were waiting to make sure that we have all the tooling we need and that the quality bar is where we want it before we ship it GA, but it will be part of .NET 6, which is shipping this fall.
Some resources if you want to learn more about .NET MAUI, of course, the GitHub, the blog is part of the .NET Blog now so you can just go into the MAUI category.
We have docs up. There is a beautiful sample app that David (phon) or another pm on our team, has built.
Its a weather app. So you can check that out.
Its a more realistic example of what like a really pretty MAUI app could look like.
Not just your file new Hello World.
Like I said earlier, there is a preview link, AKAMS VS 2022 preview and that is how you get the branch of Visual Studio that you need to get rolling with MAUI just like you saw today.
That is all I have for you.
Hopefully you enjoyed this whirlwind ride of VS 2022 and developing for iOS, Android, Windows, and macOS with .NET MAUI.
Youll hear plenty more about this throughout the next few months as we get closer and closer to shipping.
Feel free to reach out anytime, whether its on Twitter, over my e-mail and all the different ways and Ill hopefully be able to answer some of your questions and enjoy Visual Studio 2022.
Microsoft Visual Studio: Building cross platform apps with .NET MAUI in Visual Studio 2022 - Mobile App Development