>> 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.
