>> Hello. Thank you, Scott. Thank you, Jamie. I'm back and we are going to
talk even more about .NET MAUI. This is an intro talk. I'm going to show you how to get
started and we're also going to do a bit of a deep
dive into what was actually going on with that amazing podcast app that we
showed in the keynote earlier. If you're joining us live, hopefully you'll join
us for the keynote too. If you're joining us on the
recorded version of this talk, I'll make sure I cover everything so you don't have
to go back and watch it, but it was awesome. All my friends were there
so you should check it out. Let's take a look at what came out yesterday with .NET MAUI Preview 10. My colleague David Ortinau, another Program Manager
on the .NET MAUI team, wrote a wonderful blog
highlighting all this stuff, but here it was condensed
into a slide for you. The best way to use the
latest and greatest .NET MAUI is with Visual Studio 17.1, which is the preview
branch right now. Yesterday we shipped
Visual Studio 2022, general availability and it's also shipping the preview
version that came out yesterday. All of that's up there on
the visualstudio.com site. Grab preview 1 and
that is where you're going to have the best
experience with MAUI. I'm not going to spend too
long on slides because I promised on Twitter I will get
to as many questions as possible. Let's take a look at how
all of this magic happens. We're going to start right here
in the Visual Studio Installer. This is 17.1 Preview 1.
I hope you can see it. I have my giant purple
cursor from Scott because he also used this machine,
that's been fun. If I click this mobile
development with .NET workload, and if you're a Xamarin developer, this is the same workload you
used before with Xamarin. You can see I have some
optional components here, IntelliCode, Xamarin, and now in 17.1 I have the
.NET MAUI preview checkbox. That's going to grab all
the latest bits for you. Just check it off. There's
no command line, anything. You don't have to do
the workload install, you don't have to use MAUI check
if you've heard of that tool, you can just go right forward
in the IDE, it's very simple. Then that will install
everything and that also installs all of the developmental
tools you'll need to do your Android development and
iOS and Mac and blah blah blah. I would also check off the universal Windows
platform development box if I were you because
that is how you get all the cool XAML, Hot Reload stuff. That's when you change
your XAML and it reflects in the running app. With the dynamo workload, I still have my podcast up open. But before we look at that, let's go to the new project dialogue and if I could use those mouse, it would really help, "New project" and I'm going to search for MAUI. Nice. I have three templates
I can choose from. The first one is just your
standard old .NET MAUI app. It looks very, very similar to
the website that Dan Roth showed, the min blazer site if
you watched his talk, which was right before this. We also have a MAUI Blazer app. That includes the basic building
blocks for pulling in Blazor and Razor code into
your .NET MAUI App if you want to do the Hybrid app. Then we also have a
class library template, which we're not going to
look at too much today, but let's just build on
a library with .NET 6 for .NET MAUI because of this. Then let's go take a bit of a deeper look at the podcast
app we showed earlier. One of the greatest things
about .NET MAUI is that everything's in this single project. I saw a lot of buzz on Twitter
about how excited people are for in particular being able to
use SVGs in your MAUI app. This is totally new if
you're a Xamarin developer, you've always had to use PNGs or other types of images
and make sure that they're all the right scales and resolutions for
any possible device your users could be pulling out of their pockets
to look at your app with. But with SVGs, it
just scales for you. Then we also have a PNG in here. The good news is if you don't
have SVG versions of things, you can still stick PNGs in. You can always go into your platform specific folders as well and create a resources folder
here and in there add different images you might want
with different scales and sizes. For example, if you're
putting screenshots of your app in your app, the screenshot on iOS is going to look different than
the screenshot on the Android. If you need to put
those specific images in for just that platform, you can do that in the platform
specific sub folders here. Something else that I didn't
get to show this morning in this demo was that this is using all the great new C#
features that you saw Mad stock about
and Maria talk about. My personal favorite
is global usings. This takes so many lines
out of my project. Look at this. All the namespaces for the actual
project folders, my models, and view models and all that stuff, plus the MAUI and the
extensions namespaces, all that is just in this folder. If I look at my view model here, there's no usings and I just have the semicolon so
nothing is indented. It's way easier to read and
use and it's super clean, makes my life a lot easier
when I'm demoing it and also when I'm
writing it. That's good. That is the whip around of
the code I actually showed. We looked at a couple of pages. We'll run this here and let's
talk about the target selector. When you do the File
New MAUI project, it's going to give you-all of the target frameworks
we support by default. You're going to have .NET 6 Android, iOS, Mac Catalyst, and Windows as long as you have the one App SDK stuff
that you need installed, and that'll all work perfectly. Do we have these little things here? Use MAUI and single project, which just lets the compiler know that this is a MAUI
app using single project, so not to expect
different platform heads. The great news is if
you are upgrading your Xamarin Forms app to .NET MAUI, we are going to have
upgrade assistant support. We've been working on it. We have some demos of it
on the Internet somewhere, but it's not quite out yet. You can actually keep those expanded out app heads
if you'd prefer. You don't have to
use single project. We're not going to force
you into anything, but it's pretty good, so I would suggest using
it, but you don't have to. You can just set this to false
and you'll be good to go. My target frameworks selector, it actually pulls from in here what I have in my project file to
populate this list right here, my framework's list: Android, iOS, Mac Catalyst and Windows. Let's start with Windows
again just like we did in the keynote and it gives me the right targets here for what
I am trying to run this app on. We'll go over Windows
machine, give it a second. It's going to load
up. Boop, boop, boop. It's thinking, it's
doing all the things. You can see that we still have a
bunch of warnings in this app. The great news is
that if you actually do want to get the
code for this app, it will be out either later
this week or early next week. We're open sourcing. It is
all going to be on GitHub, it's just not there yet. So you'll be able
to check it out and see exactly what we
did in a little bit. This is the app and we have full XAML hot reload and .NET
hot reload support here. I can click around, I can turn
on dark mode, all the things. We'll go back actually.
Right now the listen together component is
hidden in my shell. I'll go to my page here, I'll go to my desktop shell and we'll talk about why I
have two shells in a second. But we'll uncomment out this. See if I remember my hotkeys and we'll make sure that
popped right up. Yeah, listen together right there. The component is not loading
right now, that's okay. Oh, it did load. In the room that Dan
and I were in and the keynote is still
open, so that's good. That is just how easy it is
to hot reload your XAML, literally adding and removing
top level components from your navigation right
there while the app's running. Then let's look at .NET hot reload. I'll go into the settings page and let's do the settings
page view model. You saw me flip it to dark mode. Use dark mode, it's
the best mode and it's just this little toggle
that flips it off and on. But with .NET hot reload, I can actually test all the
different changes I want to do, even if it's in my view model. Doesn't have to be in the
code behind of a page, it doesn't have to be in an API
or anything or in a service. It can be in my view model
while the app is running. What I'm going to do is
I'm actually going to comment this whole thing out. I can't even change it
back to light mode if I wanted to because like I
said, dark mode is the best. When I hit the little
hot reload button, boop, boop, boop, let
the magic happen, wait for that to pop back up, and it told the Windows app, hey, this toggle doesn't do
anything anymore, and that's that. That is .NET hot reload, just that easy. I know you've seen it all over the place if
you've been following along with the Visual
Studio launch or the .NET course content from today. There is truly hot reload
everywhere, it is amazing. Fire emoji is everywhere.
It's so good. It works for MAUI,
works for Windows, works for Android, all the things. Speaking of Android, let's talk a little bit more about
what happened this morning with the Windows Subsystem
for Linux or Android. Oh my goodness, the amount of times
I've done that, it's all good. Like I said, with the installer, it's going to install everything you need for native Android development, including giving you
these little buttons to open Android Device managers, SDK managers, log file, reading and all that stuff and
of course the command prompt. This is the ADB command prompt. The Windows Subsystem for Android, you can install from
the Microsoft Store. It's also going to give
you this Amazon Appstore, which is how you can go
in and download existing apps that you can run on your Windows machine from
the Amazon Appstore. What I did was I installed
this one, Flight Tracker 24. It's very simple, I like it a lot. This is actually a
native Android app right now running on top of Windows. It looks just like a Windows App. It's almost difficult
to tell the difference, but you can tell because it's using the Android styling for its buttons. Android by default,
depending on the version, likes all caps buttons. Not my personal preference, but works great for them
and it's a nice way to tell the difference between if I'm
running a Windows or an Android app. I opened this and when
I opened this app, it actually spun up the
Windows subsystem for Android. I can go into the Settings app, make sure that developer mode
right here is toggled on, and this is saying that devices on the same private network
can come into this. That's great. I don't even have
to be on this specific thing. I would recommend setting it to
continuous just because that means if I close that flight
tracker app accidentally, it's not going to close my Windows subsystem
for Android altogether. Then you might have to refresh here, but overall you can just copy my IP address and then I'm just going to type
ADB Connect, paste. I'm already connected. It's going to say already connected, awesome, everything works great. Then I can go change my target
framework here back to Android, and it pops right up. Of course this is
not my only option. I also could create an emulator, I could plug in an actual
physical Android device, I could plug in my phone. You can still do all the different
things that you did before, but especially for folks like me
who are running on older machine, this machine is brand
new and wonderful, so an emulator would run great. But my laptop at home
or on the plane, not great for my emulators
right now. This is perfect. I'll just hit "Play",
give it a second, and it's going to spin right up. I mentioned this earlier
and I'll mention it again, it is part of the Amazon Appstore, so you do not have Google
Play Appstore API. If you're using
something, an example, a lot of folks was using this
specific Google Play Maps APIs, those things aren't going to work in the Windows Subsystem for Android, but you can still launch your
app and play around with it, just those components aren't
going to be able to hit the API. Which means this is still a
pretty nifty way to get things started and test things out and
to hot reload and all the things. I still have a lot of the same
tooling I have on Windows here. I have my Live Visual Tree so I
can do my XAML Hot Reload and investigate what's going on with
my UI and go to different places. I have my live preview
window still pops up. We don't just yet, in this particular release, have support for the
Windows Subsystem for Android with live preview, but we will because it's awesome. It does work with Android emulators. If you're running an emulator,
you can use Live Preview there. Let's talk about why I have
two different shell files, those navigation description
things. I have my desktop shell. But in here, my Android app, these are actually bottom tabs. On the Windows app
and on the web app, they're both on the left, the
discovery, subscriptions, listen, all that
stuff is on the left, just like in a hamburger
menu type of thing. But in here, their
tabs on the bottom. I can see that in my Live
Visual Tree on the side here. I'm going to click this to bring
me to where this is defined, which is in my MobileShell file. Instead of, here I
have ShellContent, that's all it is,
which is that side. I have a FlyoutHeader
and all that stuff, so it describes my always
open flyout on the side. I have tabs, just a tab bar with tabs. It's the same icons, same title, and everything
that I was using before. It's data binding to the
same page and pages, but it's just a tab instead. That's a really nice way to give these custom experiences through your users depending on
the platform they're on, if they're on desktop or mobile
or iOS or Android or whatever. Let's do some C# hot reloading. Let's go fix that
thing I commented out. Let me set myself back to different themes now.
I'll uncomment this. Hit "Save". Go and find
my Fire emoji, hit that, give it a second to think, everything lights back up, click on it, go to my Settings page, and now I should be able to turn
off dark mode just like that. You can see I'm super productive. I am using the same
tools and buttons and code and things that I use with a Windows app
and with the Android app, and it makes it really easy for
me to context switch and test my app on all the
different platforms I might be deploying it onto. Like I said earlier, this is only half the magic. Before I flip over my Mac, I do want to show you
that I can target, got to stop this, I can actually
target iOS from Windows. I can see all the target
platforms and frameworks here, but I can't deploy a
Mac Catalyst app on my Windows device because
it's not a Mac device. It can't run a Mac desktop
app, which makes sense. That being said, there are some ways I can handle iOS. I'm
going to click it. I don't have anything
set up to demo, but I wanted to show you that
there are three different options. There's remote
devices, which means I could plug my iPhone into a MacBook, pair that Mac over the Internet,
there's a little button, pair a Mac right here,
does it all for you, as long as you're on
the same network, and then debug it to my
device plugged into that Mac. I could use a remote simulator, which is the same
thing I'm paired to my Mac again over the Internet, then I have a remote
simulator that pops up and shows me in Windows, even though it's actually
running on my Mac, or you could do my favorite and the easiest thing which is
we use something we call, used to be Xamarin Hot Restart
and now it's just hot restart, more hot things, hot
reload, hot restart. That is when I actually
take my iPhone. I plug it right into this PC and I can deploy to it
from Visual Studio. I don't need my Mac. It can go in my bag. I can close it. It doesn't need
to be on the Internet, anything. The only requirements
for that are that I have an Apple developer
account and I have iTunes installed on the machine. It's all you need to do, so it
can communicate with the iPhone. It will deploy it right in, and then I can have
my iPhone right here and swipe around on
it and edit my code, do my hot reloads all from
Visual Studio for Windows. There's plenty of
demos for that online, which is why I don't want to spend too much time talking
about it today, but go check that out if that's something that you think
you'd be interested in or if you don't have a Mac
yet and you want to get that third platform out on
Visual Studio for Windows. We're switching over
to Mac. Boop, magic. You can tell this is my Mac
because it has all the stickers, all my Xamagons, great stuff. I need some new .NET stickers,
but we'll get there. There's a lot of amazing
ones in the store. I saw Jamie and Scott talk about, so go check that out. Let's look at Visual Studio for Mac. We do not have MAUI support yet. It is currently in progress. It is something we are
working on every day, but there is a new Visual
Studio for Mac preview out and you can of course open a solution file in Visual Studio for Mac and
use it as a text editor. Some things do work like I
can see my targets here. I can see all the iOS simulators
I deployed to. I can see my Mac. I can see the Android emulator
I have created because a lot of that stuff is the same that you
would've seen with Xamarin too. Those tools still exist. It's just a matter of
wiring everything up correctly. This is
the same solution. I've got my GlobalUsing too, I've got all my
beautiful C# features. I've got my pages and blah, blah. Then one thing I wanted to
mention is that there's a new git experience in
Visual Studio for Mac, which is something we have
heard so many requests for, and I'm really excited to be able to show it so you can see
where I've made changes. I can stage all, I can make
my command so I can pull and push over right in VS
Mac. It's brand new. It's modeled very much after the Visual Studio for
Windows experience, so it's hopefully
familiar to you if you're switching between the two IDEs. There's a lot in
Visual Studio for Mac. It's going to be
running on .NET 6 soon. It's going to have
native M1 support soon. It was completely rebuilt from the ground up with a
fully native UI stack, so it's super snappy. It's got right-to-left tech support, it's got really just a
modern and Mac-like look and feel while still
staying true to what you want to see in a Visual Studio. I can see my View windows have actually been completely reorganized to look and be organized in the
way that they are on Windows. Instead of trying to spend forever finding what window
you're looking for, you can do that all in VS Mac. Let's run this again. What I did actually to build this
before was I went and I built this components project
from the command line, and then I built this app itself from the command line
just using .NET build, and then I gave it the path. That's all I had to do. It builds it all for me. Command line is magic. I love it. Then I can start and stop it from
inside of Visual Studio for Mac. If I want to make code
changes and stuff, I am going to want to rebuild it
from the command line right now, because VS Mac, we're
still working on picking up the proper changes so
that we can redeploy it. But yeah, boom, up and running. I can click around and interact. All the things you've seen
this app 100 times now, so I'm not going to bore you
with that. Then I can stop. I can go and I can switch my target. Because I have a library
project right now, it's actually going to ask me
to rebuild everything here and I'm not going to make you watch
me rebuild this podcast app. But if you don't have
a library connected, you can switch between targets in VS Mac and just debug
on the different ones. That's a really quick way
to get things working. Also, your XAML Hot
Reload will work, so have fun with that. If it doesn't work, file a bug. As we always say, helper for a
problems, our favorite place. Go on in there, let us know. That's really good to have. Your C# or your .NET hot reload
hasn't come over to VS Mac yet, but that's another thing
that is in progress. Like I said, this is
a preview version of Visual Studio for Mac as well. It runs side-by-side with
Visual Studio 2019 for Mac, so you can have both this and VS 2019 installed and it
won't screw anything up. It's got its own little
world to lives in. Don't worry too much about that. I would highly recommend
trying it out. I have a little bit
under 10 minutes left. I do want to give it a few
minutes for questions, but before that, I would like to pop once more back over to my Windows so we can look at a few more slides. Let me open this, make sure this is the right stuff. Let's talk about how to get started. You can do get.dot.net/6, that website if you want to. But for MAUI, all you
have to do is just download Visual Studio 2022 preview. Then that's the last link here. Then check off the .NET
mailbox, checkoff UWP, so you've got those XAML Hot
Reload development tools and everything else you need was just going to get installed for you. The other one thing I
wanted to call out, I mentioned this earlier, I think, is that you should try
out the upgraded system if you have .NET 5 or done a framework apps or anything
that you want to bring over to .NET 5 or .NET 6. It is now stable, so go for it. We are going to be building .NET MAUI support into the
upgrade assistant, and there is some basic
functionality there. Let's try it out, let us know. We're going to publish more blogs and docs about testing
out our branch of the upgrade assistant
throughout the early new year, early 2022. Can't
believe we're there. We'll have more info to come, but definitely get familiar with it with other apps
you have that aren't XAML forms or dot net MAUI so that you can give us feedback
on what you want to see there. That is it, I'm going to open
it up to Scott and Jamie, and we'll see what
questions rolled in. >> Let's take a look
at the big board. >> So many. >> Reminders, you
can go and tweet us at dotnetconf hashtag, dotnetconf. >> We'll answer your questions live. Patrick asks, can you show how you choose between the
different shell pages, desktop versus mobile that
you just showed in .NET MAUI? >> That is a great question. The cool things about
MAUI is that you can do platform specifics anywhere. It really depends on your app. You can do it right
in just the program, the MAUIprogram.cs if you want to. That's not where they
did it in this app, this is where we just
configure fonts and stuff. You can do it in the
actual pages, themselves. I wonder if it's in, let's look at the mobile shells
AML and see if they did it here. No. I actually don't know where
in this code base we set it. But I know it's somewhere
because we had to. Let's see. We'll give it a couple more tries. Maybe, probably not an helpers. Now, that make sense. Maybe in ViewModels,
shell ViewModel. That's got to be it. Apps, sections, all of these things. This is where we set
all the images if we want to, for the ViewModel. Yeah, there are a whole
bunch of different ways. The nice thing is
you can use if devs, if you want to, you can
use is platform or device. platform and then use the
Xamarin Essentials api, which is now the .NET 6 essentials. Not sure what we actually
named that Essentials api for MAUI to find
all the different ways. That's actually a good question. I will find it and tweet you because
I should know where this is. >> No worries. It's
live TV, it's all good. >> Can .NET MAUI have some background tests to run
even if the app is closed? >> Yes, great question. We don't necessarily have
that functionality built in, but all of the packages that exist, shiny is a really popular
one if you've heard of it, to do background tasks with
your existing Xamarin apps. All of those packages, we're going to bring up the .NET 6 and we're going to make
sure the community has a really clear path to
bring up your packages. Most of them will
actually just work. It's if you have UI things that
is going to make the difference, that you're going to need to
bring some things over to MAUI. But for background tasks, I would be surprised
if you just retargeted shiny and pulled it into your app. It should just work.
It might just work. I don't know. We'll find out. >> Cool. Here's one from Joe. Can we use fluent UI web
components within dynamo? >> Great question. Because you
can use blazer within MAUI, you can use anything you want
with blazer within MAUI. Yes, you can use those
fluent UI web components. That's actually what we
had in the podcast app. That blazer component that we
put in the listen together page, that was all blazer codes. They could have chosen to use Fluid UI or anything else or
silent however they want. It wouldn't affect
the shell around it, the actual native app around it. It would just affect
the blazer code. >> Cool. >> Who else we've got here? >> Is the upgrade assistant
also used to migrate an existing Xamarin
Forms app to .NET MAUI? Is there another tool or do
we have to do it manually? >> Great question again. No, you do not have
to do it manually. The upgrade assistant will have
support for Xamarin Forms to MAUI. It does not currently. That is because MAUI
isn't fully released yet. We're still changing things. It would be silly to build an
upgrade assistant for something that isn't fully stable yet. But yes, you won't have
to do it manually. The upgraded system
is an amazing tool if you haven't tried it already. It does namespaces and it basically is like a
really magical find and replace and then also try converts your project files
to the latest .NET. It'll do some XAML updates for you. It's a great tool. Definitely check it out.
We will have MAUI support. There might be some
tweaks you have to do by hand after the upgrade
assistant has run. But we're hoping it
won't be too many. It's really going to
depend on your app and your needs and how much
custom code you have written. >> Very cool. >> It's coming. >> Patrick, wants to know
if global usings that we've seen will work with or what's
their relationship to XAML files? >> Good question. Global
usings are a C-sharp feature. No, they do not work with
XAML files right now, although I would love to see that. We should probably figure
out how to do that. >> That sounds fun. >> It's always possible.
What else we got here? >> Time for a few more
questions. This is a long one. >> Here's a long complicated one. Does .NET MAUI have different
outputs for each platform like Xamarin Forms or does produce
one output for all platforms. For example, the output
produces a AppDelegate for iOS or MainActivity for
Android. What's hidden, what's not? >> We still will create the native projects
platform archive package, whatever you want to call it, for whatever you want to target. You can publish in
archive for release, which will give you an APK or
an app bundle for Android, an IPA for iOS. Whatever the app x for Windows is and whatever
it is for Mac as well. When it comes to things like your
app delegate, your Info.plist, things that are very
platform specific to give you permissions and things
just for a certain platform, those still exist, those are
in that platforms folder. Then you can expand it to
iOS or Android or whatever. Do any tweaks you need to do there. Slowly but surely we're
pulling as many attributes as possible up into the top level, up until the shared level. Some basic permissions we want
to move into the single project. Things like your app, name and version are already up there
in the single project. But there are still some
things you have to do platform-specific
and they're probably always will be because
the platforms are so different and that's
what makes them unique. >> Very cool. Well,
thanks so much for your hard work appreciation to the team for working
on extra credit. >> Thank you, Maddy.
