>> [MUSIC] Welcome back to another.NET
MAUI Beginner Series video. I'm James Montemagno, a Product Manager on the developer community
team here at Microsoft. Today we're continuing our journey, learning how to build native
cross-platform desktop and mobile apps with.NET MAUI. Previously we learned what.NET MAUI is and how to install.NET
MAUI as well. Now what we're going to do in this
video is we're going to create our very first project
with.NET MAUI and I'm going to walk through all of the important aspects of what is
inside of that single project, including a bunch of different
cross-platform APIs and frameworks and a bunch of great things to help you
be super productive. Let's head over to my
desktop and get started. When you launch Visual Studio
2022 for the first time, you'll be able to create
a brand new project. Here will be all the projects
inside of Visual Studio 2022 that you can build based on
the workloads that you selected, but we're going to find the.NET
MAUI ones by typing in.NET MAUI. Here we're going to see three
different project templates; we have.NET MAUI app, we have the.NET MAUI
Blazor Hybrid application, and a.NET MAUI Class Library. The class library is
really nice when you want to share classes and different elements between
different.NET MAUI applications. But let's get started just
with the.NET MAUI app. I'm going to go ahead hit "Next" and we're going to give it a name. MauiApp2, that sounds perfect. I'm going to go ahead and create
this and I want to walk through exactly every single bit that is
inside of a.NET MAUI application. Visual Studio has launched. Now, we can see on the right hand
side is our solution explorer. Over here we have one project of MauiApp2 because I
named it MauiApp2. What's really great here
is this gives you-all of your dependencies and
frameworks in a single project. That means from MauiApp2 project, I'm deploying to Android, iOS, Mac, and Windows. Now, let me walk through
some of the other items that are inside of this project. The first thing that we'll see
here is the platforms folder. Now, this is really great
because this enables us as developers to access platform
specific native APIs. There is a little bit of
scaffolding code in each of them, such as your Android
manifest that defines different permissions
and app resources, and if your application
supports right to left. There's also a little bit of startup
code like the main activity, and the.NET MAUI team has
done a fantastic job of minimizing this boilerplate code
as much as humanly possible. But know that if you need to
tweak something on the platform, you can access it right here. Now, another folder that I absolutely love is
the resources folder. Inside of this are shared
cross-platform resources such as fonts, images, and raw assets. Now, I love this because we not only get to put all of
our fonts and images into a single project here,.NET
MAUI will automatically put those into the correct places when it compiles it
out for each platform. Notice that the.NET
MAUI bot is an SVG. Look at it all those paths. But when you compile
up the application, it will automatically
convert them into PNGs and scale them so they look great
on all of your devices. I'll also note that
there's some SVGs for app icon and a foreground as well. I'll get to those in a little bit. Now, what I love here is that
everything is in this one area, including our app, our
shell, and our main page. Now, before I get to those, let's actually double tap on the MauiApp2 because what I want
to show you is that there are some amazing cross-platform
capabilities built directly into the
project system itself. First and foremost, we're
doing multi-targeting. Here we have Android, iOS, and Mac. Now for on the Windows
platform also include Windows. Here we'll note that
Samsung Tizen platform is also supported from
the Samsung team. If you want to develop
for Tizen devices, you can just uncomment this code
and install the Tizen tooling. Now, as we scroll down,
we're going to see a few other properties that are cross-platform properties such
as the application title, the identifiers, and
even our version codes. What's really great about this
is that you can set these in one place and for each platform they will automatically
cascade down so they are automatically set when you compile and deploy your application. This keeps your version codes, names, and identifiers in sync
across all of your applications. There's another great
resource here too, which is this supported OS version, so you can add backwards
and forward compatibility. I also want to scroll down a little
bit here to this item group. Now, this is where those
resources come in. I mentioned that there was an app
resource and a foreground SVG. Those are used for our app
icon and our splash screen and those are all cross-platform and
generated for us automatically. Here's where our
images are coming in. Automatically, it will bring in just any image that you
put in that folder, but you can also
include a single SVG or PNG or JPEG and also update
it as well with a base size. That's really great for as SVGs. Here are also telling it
exactly where the fonts are located and also the raw asset. If you want to, you can put fonts in
multiple folders, you could specify different things
and automatically this will pick up all the fonts and all
the assets for us. That's it. It's very minimal, which
I absolutely love. Now, at the start of any
application is the MauiProgram, and this is the scaffolding
of the application. Some in MauiProgram and the startup code calls
and returns a MauiApp. This is creating a builder. What's really nice
about this is this a very similar pattern
to ASP.NET Code. Here it's going to go ahead
and create that builder, tell it that it's using this app, and it's going to configure fonts. There's a lot of other things
that you can configure as well, such as activity, lifecycles and services and the
dependency service. What is in this app? If we go into the app here, we can see that the app has some app wide resources in the
both the colors and the styles. Those are located in
the resources folder. Here are the colors which are all
defined in our XAML right here. We can see colors in solid brushes and different
accent colors too. This is great because these are
going to be used in our styles, which is the full style
set that automatically will style every single control
that's built into.NET MAUI. This means all you need to do is
modify a few colors and all of the different controls will update based on what your
application needs to look like. >> Now, you can hit this
little drop-down arrow and you'll see some
code behind here. We usually call this code
behind and it's called XAML.CS. Every XAML.CS is
associated with the XAML, and we can see here
that the main page of the application is being
set to the App Shell. Well, what's an App Shell?
I'm glad you asked. Well, an App Shell specifically is an opinionated shell
of your application. What's great here is that it enables content templates which are lazily loaded when your
application loads up. Here, it's using a
single shell piece of content which is a page, but you can easily add flyout navigation or
top and bottom tabs by just adding more items. Here, I can add a tab and a tab bar, or I can add a flyout item. I can even add menu files as well. It's really flexible and it also enables your eye-based navigation. Here, we can see that the route
of the app is set to main page. That's going to be my main route. Now, there's this main page and this main page will get
inflated with home. If we tap on main
page, this is XAML. It's an XML-based markup. What we have in this
application is a scroll view, one of those layouts with a
vertical stack layout inside of it. Now, this is going to go ahead
and stack up some images, some labels, and some buttons
here to automatically click. Now, in the code behind as well, we'll see that there is a
little bit of code which we can see automatically not only
increments the count, but will automatically set
the text based on the count. If it's one, it'll say click one
time or click multiple times. Let's run this application
now that we're ready. What I want to show you here is that from the drop-down debug menu, select the target framework that
you want to debug on Android, iOS, Mac, and Windows. Now, Android and
Windows can be deployed directly on your Windows device. Additionally, if you're
using Windows 11, you can enable the
Windows subsystem for Android to not even have
to use an emulator at all. Use your Windows
device as the device that you're debugging
on for Android apps. That's great because both
Android and Windows can automatically deploy directly
on your Windows 11 device. If you have Windows 10,
don't worry because there's a full Android Device Manager. Here under tools, we'll see Android and then there's Device
Managers as well. Now, under here when you toggle
between the framework of Android, iOS, Mac, or Windows, it will automatically update
what you're deploying to. You'll also see Android emulators, local devices, simulators,
and remote devices. Now, I do want to mention
here that for iOS, there's two different ways of
deploying the application. You can either connect
remotely to a Mac and deploy and debug through
a remoted simulator. Or you can actually plug an iOS device directly into
your Windows machine and use iOS Hot Restart to deploy directly to it if you have
an Apple developer account. For Mac, you need to be on a Mac. Check out the documentation
to deploy there. Let's go ahead and debug this
application right here on Windows. This is going to go ahead and debug up and compile
our application, and then deploy it directly
onto my Windows device. Now, I have it running. I snapped it right here. You can see that I simply come in and I am clicking the button
and you can see it says, clicked how many times
I have it updated. We have our.NET bar image
that was converted from an SVG directly into a
PNG saying, Hello world. Now, there's some other
great functionality that's built into Visual Studio. For example, let's say I
have multiple monitors and I don't want the application
to overlap on top of it. I can actually come into the XAML
live preview and pin it here. What's really great is that, I can come in and modify the size, and get that window directly
inside of Visual Studio. I can still interact with it in
the real window that's running, but I can see a preview
of it right here. Now, what that means is that, I could go ahead and open up, let's say the main page. I can come in and
say hello.NET MAUI. I'm going to hit "Save" and
XAML Hot Reload will kick in. Now, you can see it
says, Hello.NET MAUI. I can also increase
that font to 100. Now, it's huge and I bring
over the application. You can see is the
application running right there that enables me to
be super duper productive. I'll also mention here that, on the left hand side, I have this live visual tree. Now, this is going to show me every single piece of
content inside of it. Here I have my label. We're going to pin this here. I have a vertical stack layout, and I have this button,
and if I tap on it, it's going to automatically direct
me to that button, for example. That is really nice
when I'm doing this. Now, what I also want to show you, go and minimize this over. If I bring over the
application, as I hover, it automatically updates here
what element I have selected. Nice little hints right there. Now, we've gone ahead and deployed
our application to Windows, but how about Android? Here we go. Going to
go over to Android, and now this is going to show
me my Android emulators. If I don't have one,
it'll help me create one. I'm just going to
go ahead and debug. What's great here is, I am
debugging my application. If I want to, I can
add breakpoints and I could take advantage of
the great capabilities of Visual Studio in debugging and
output and watch Windows too. Now, this is going to start
on my Android emulator and we're going to get
the same application, but running inside of Android. Let's give it a few
seconds to start up, compile, and deploy. Here, application is now running on Android and you can see
that it's absolutely huge. Let's go ahead and fix this up. I'm going to go over to that label, and let's put that back down
to 32 and hit ''Save.'' That's going to
automatically update. Of course, I can click here, I go ahead and actually get a break point and we can
see my count as one, so I can go ahead
and step through it. Let's go ahead and remove that. Awesome. Now, our application is
updated and I'm clicking around. Now, the other thing that's
built in not only is XAML Hot Reload, but.NET Hot Reload. Here, let's go ahead and
change is to actually add 10 instead of one every single time. You can hit ''Save'' or hit
this little reload button here, and you can see that I'm hitting
hot reload on file save. Now, when I click on this, it's increasing the counter
by 10 every single time. I can now only update my
XAML with hot reload, but also my code behind too. There you have it. We
just started building our very first.NET MAUI application and learn everything that's
inside of the project and how to deploy it onto
Android or onto Windows. Now, let's go ahead and hop over to my Mac where we can see we take the same exact project and deploy
it to both iOS and Mac OS. Here we go. I've launched
the same exact file new template over on the Mac. You can do this via
the command line or Visual Studio for Mac 2022, and here we can see we have
the same exact application now running on Mac OS and over on
our iOS simulator. You can also plug your iPhone
into your Mac and then launch the application directly
on to your iOS device. The same would be true if you
wanted to launch the application on an iPad application simulator or on your iPad itself. There you go. We've not only created
our very first project, but we've deployed it to four
different operating systems, and we saw the consistent user
interface that is being created. Hopefully, now you have a
full understanding of what is inside of a.NET MAUI application
when you get started. In fact, what we're going
to do in the next video is, we are going to learn
how to build out a more complex user interface
and handle user interaction. Stay tuned to the.NET
MAUI Beginner Series.
