Building cross platform apps with .NET MAUI in Visual Studio 2022

Video Statistics and Information

Video
Captions Word Cloud
Reddit Comments
Captions
>> 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. It's in preview right now. It'll 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. It's all in .NET 6, and the future .NETs whatever comes after six. It's 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, you've got to deploy to all your different devices, mobile and desktop. We'll 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. It's 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. I'll 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. Let's 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 there's a little checkbox that says .NET MAUI parentheses preview, and that is checked by default now for you in the preview branch. You don't 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 didn't 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. I'm targeting iOS, Android, Mac via Mac Catalyst, and then of course Windows. Let's take a look at what this project actually looks like. Let me pop this open. It's one project in my solution, and in this project I have just a XAML file, that's where all my UI code is. My logic for this app, it's a sample template app, it's very simple, it's 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, you'd 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. It's a wildcard for images, it's 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 I'm targeting. What's 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. Let's 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. I'm going to deploy this to my Windows machine to start. While this is building, we'll give it a second, is just going to think up. It's 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. Here's my Windows app over here, it popped up on my second monitor, my main monitor. I can drag it and interact with it, but it's 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 it's reflecting the app live. So as I click on it and interact with it, it's 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 you'll get. The only difference is it won't say hello Windows, it'll 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 didn't have to save the file or anything, I just was able to change that XAML and then I'm like, ''I don't like that, that's disgusting.'' Undo it and it goes right back to it. With live preview, it's all in the IDE, I don't 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, it's very simple, it's 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, I'll hit this little ''Hot Reload" button. You'll 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. It's really awesome, especially for me when you make ridiculous API calls, and you have no idea what you're doing and you need to just tweak them as you go. This has been a game changer for me and it's new in VS 2022. Windows is just one of the platforms. I'm going to stop debugging that, and we're going to switch over to Android. >> Let me just check that everything, good we're saved. Then you can see my Android emulator pop right up here. I had created this before, it's 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. I'm going to deploy it. I think I have to switch and then switch back frameworks because I have a little bug right now that we're fixing. Switch and switch back to Android and then deploy. It's the same XAML page we just had on windows, so you'll see it says, "Hello World" now. All the things we had before, it didn't save all my files for me, so we'll get that odd counter increment. It's thinking down here, deployment was successful, fantastic. It's 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 I'll zoom this out. We'll switch this from Hello World to Hello Android, easy just like that. Now I'll click this button, we're incrementing by two, how wonderful and now it's 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 it's 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 that's all platforms of course. Let's stop this and let's take a look here. Am I different platforms? We have Mac Catalyst and iOS we haven't talked about yet. Mac Catalysts because that runs natively on your MacBook or your iMac or whatever. We can't deploy that here because this is a Windows machine, it's 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 it's off it hasn't been updated in a while. I don't 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 doesn't have the ability to build without a Mac unnecessarily until we came out with the Xamarin and now .NET MAUI Hot Restart. I've signed in with my Apple ID to Visual Studio and I did that a while ago. It's persistent across all my VS's. 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. It's very weird. We filed the bug. Do not worry. Then I'm going to go and deploy this on my iPhone. Down here you can see it's 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 it's 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 it's doing all the things. It's going to ask me to launch it, once I have connected to a MacBook, once I actually don't have to launch it anymore myself. But because I haven't connected this to a MacBook yet, this app, I will launch it manually. It's going to take a second to load up. You can see that. It's actually the old launch screen. That's because the way Hot Restart works is we actually build like a Shell app that we've provisioned that you stick your code into. It's 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 it's there. It's running on my phone very exciting. Then I'm 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 I'm sure you've seen in all of the other amazing presentations, there's a lot in VS that shipped this year, not to mention 64-bit. Hello, very cool. Check out all the other talks, but let's look at, just for a second, the roadmap for MAUI. The roadmap, it's pretty simple. Use the preview version of VS 2022 if you want to use .NET MAUI. Yeah, that's 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. We're 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. It's a weather app. So you can check that out. It's 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. You'll 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 it's on Twitter, over my e-mail and all the different ways and I'll hopefully be able to answer some of your questions and enjoy Visual Studio 2022.
Info
Channel: Microsoft Visual Studio
Views: 53,397
Rating: undefined out of 5
Keywords:
Id: LUlbO5MjPjU
Channel Id: undefined
Length: 16min 28sec (988 seconds)
Published: Mon Nov 08 2021
Related Videos
Note
Please note that this website is currently a work in progress! Lots of interesting data and statistics to come.