[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 and today we're continuing our journey
of building native, cross-platform, desktop and mobile
applications with.NET MAUI. Now, previously we
learned what.NET MAUI is, how to install it and everything
that's in a file new project. Next up is actually creating
user interface and taking advantage of all the
different layouts and controls built into.NET MAUI. We're going to build a
small application that is a to do list that enables
us to keep track of all the things that we
want to do and also how to update our user interface
when the users interact with it. So let's hop over to Visual
Studio 2022 and get started. This is the application
that we're going to build, it's called My Tasks. Here on the Home Screen we'll
be able to enter a task, click "Add" and add it to this list. There's going to be
a Collection View, which is a nicely
optimized list display that enables a whole
bunch of new features and grouping capabilities. So we're going to
check that out today. Now, as of current, our application
looks like this because all we've done is created a brand
new.NET MAUI application. Now, what's great about the template is that it's fully responsive. So here we have a light
theme and dark theme, and you can click to increase it, which is absolutely awesome. Let's go ahead and turn
this into my tasks. The first thing that we need to do is go ahead and head
over to the code. Now, this is the default template. So here we have some images, some labels, and the button. Now, what we're going to
do is delete all of it. Now, we actually don't need a scroll view here because if
you remember from the photo, this down here, this
has apples, bananas, and oranges is going to be a CollectionView and
that already scrolls. What we're going to use in the
base is going to be a grid. I like grids a lot because they are rows and columns and
I can put that into my head that here there'll be
three specific rows that image, the enter tasks and add button
and then the CollectionView. There'll also be two columns. Here we're going to have a column for center task and
then another one for the button and both the logo and also CollectionView
will span both of them. We've deleted all the code, but we also want to take a
look at the code behind here, this main page, XAML CS.
Now there's code behind. At one point when we did file new represented some interactions
with the main user interface. So we're going to go out and delete
those because we're not going to use those button clickers there. Let's go and delete them. I'm going to hit "Debug." The reason I'm going to do
that is because I'm going to start building my user interface directly with XAML reload so we can make changes and
see it update in real time. Our application is launched. It's a blank screen now,
and all we have is a grid. Let's go ahead and define those
different rows and columns. So I'm going to say
row definition and the IntelliSense helps me out here, I want to say 100. Those are three density pixels that automatically adjusts
based on the resolution. For the second row, I'm just going to use auto that's
just going to tell it to use as much space as it possibly
needs for the controls. Then the last row or row 2, so 012 of index 0, that
one's going to fill it. We're also going to use
the column definitions. Here again, there's
going to be two columns. Now, if I wanted them to
just size themselves, I could say auto, auto. But I want them to be a
little bit different size. In fact, I want the first one to
be 75 percent of the second one. So I'm going to say 0.75
star and 0.25 star, and that's going to give a ratio
of 75 percent and 25 percent. Now, so far, we still don't see anything because we haven't
put anything in it. The first thing that we're going to do is we're going to
put an image in here. Let's put an image and then
I'm going to go ahead and say Grid.ColumnSpan so it spans
both columns, set it to two. Then source here, well, we don't have any
images in here yet, but we could use that.NET bar under
resources. So dotnet_bot.png. So let's go and put that
in there dotnet bot.png. I'm going to close that
tag and sure enough, there's dotnet bot.
Hey, dotnet bott. Now, what's great here
is that I could also set the background color if I wanted to so see what exactly is filling. Here we can see it fills
the entirety of it, which is pretty great and it's directly in the
center as the default. I like that so far,
but we can see that is actually filling
every single corner, which means that everything
is going to be filled. Let's go ahead on this grid and
put a padding and I'm going to put a padding of ten as
a little inset here. So dotnet bot is a little bit inside and not hugging
that home bar. Next up, we're going
to put in an entry. So here's an entry and I'm
going to put in a placeholder. An entry is a text entry field and you can do all
sorts of great things, like make a password
and things like that. The placeholder here will be enter
task and I'm going to make sure that it is at grid.row
equals 1. There we go. I can say hello world. Now, the important thing
to note here is that the automatic default is 0, 0. So I didn't need to
define grid dot row or react column on the image
because it's already at 0, 0. Same thing here on the
grid.column on the entry. I didn't have to enter
because it defaults to zero. I guess I'll put it there if I
wanted to, total your choice. Let's add a button here.
Now we're going to add a button and set the text to add. Now we're actually going
to set that grid.row to one and grid.column
to one as well. We'll close the tag and
now our button's there. Now you're probably
saying, James, wow, those things are all really
close to each other. Now, I could add a margin to
each of these and margin says, Hey, stay a little bit
further away from me. But built into the grid are actually row spacings and column
spacings too. Here we go. I want to say 10, 10 and hit "Save,"
we can see that now we get a little bit more
space there, which is great. Next up is going to be
our CollectionView. So this is going to be a way for
us to hold a bunch of items. I want to put in a CollectionView. Here we're going to say grid.row
2 and grid.columnspan 2 as well, and we're going to go
ahead and open this up because we're going to put
some things inside of it. The first thing that
we're going to do is give us some hard coded data, and this is just so we can
design the user interface. Later on, we're going to
fill it in with real data. So whatever we enter adds
it to the CollectionView. Here we're going to
say CollectionView. ItemSource and then what we can
do is fill it with an array. Now this is one of my
favorite features because you can just actually say X:Array, and then I'll create an array
in the XAML and here I can say, Hey, array, please be a string. Now we're going to create
an array of strings. Now, I can put my string
in here and I can say apples and then go
ahead and copy these, and I'll say bananas and I'll
say oranges, and hit "Save." Now we can see is
that apples, bananas, and oranges totally showed up, which is great and of course, I can fix my typos too. Now we have all our collection
and you're tottally good to go. Now, one thing I
want to note here is that they're not looking super duper great because it's just going
and using the default template, which is just a label, and that's what it's doing
here for the string. So we can go ahead and give
it something called an item template to spice
it up a little bit. Here we go underneath
the item source, we're going to say
CollectionView.ItemTemplate. We're going to be doing
some data binding here, and we're going to get
into it a little bit more in our next video. But what it means is I want
to take these apples and say, please use that inside
of my item template. So by default, we'll use
the data template here, and then what we can do
is put in, let's say, a label inside of it, maybe inside of a nice
little card view frame, and we'll be good to go. The default I'm going to use here is a grid and I'm going to give
it a little padding of 0, 5. Inside of that grid, we're going to give it a frame and then what we're going
to do is give it a label. What we're going to do is
create a label that is text that has a binding to dot, which says, bind to myself. When I hit save here, we're going to see that we have apples, bananas, and oranges and we can also set that text to be
a little bit bigger. So let's say font
size 24, for example. Now we're talking apples, bananas, and oranges and everything
resizes for us automatically. Now we're able to add our
new items here or will be in a little bit but what
if we wanted to delete them? We could add a delete button. We could try to like click on one. But what if we could
also swipe to delete? That sure would be nice. Well,
Dynamo has that all built in. What we'll do is we're going to wrap this grid inside of a swipe view. Let's go ahead and do that. So when I say swipe
view. There we go. What that does is says, please put everything
inside of this grid into a swipe view and then
we'll add some swipe items. I'm going to say swipe
view dot right items. You could do left, top or bottom, but we're going to do right and then I'm going to give it a
list of swipe items. Now, you can have completely
customized swipe items, but I'm going to use the
one that's built in. This enables me to set text like delete in the background
color of red. I'm going to go ahead save again. Now we can see that we
have delete right there. Look at that. That's
awesome. Very cool. Well, we still don't
have our image fixed up, so let's go ahead and
remove that orange. Now we're back to Transparent. Let's put our logo in there. I'm actually going to
stop debugging for this and what we're going to do is we're going to
go into our resources, images, right click on "Add"
and then do existing item. Now over on my desktop, I'm going to select "All
files" and I have my logo.png. Now I've added it in
here and we can see it referenced and what I can do at this point is come
in and say logo.png. Now I'll go ahead and recompile the application and what
this will do is take that resource and
automatically recompile it to display it inside
of my application. Now, this time, it's not
going to be as quick. It may take a few additional seconds as it compiles up those resources. Let's give it a few seconds here. Our application is launching
and now what we see is the my task logo right
there can now come in, enter my tasks, enter a task, and soon we'll be able
to actually add it to the list and get rid
of that hard coded data. That's what we're going to do next
when we learn how to use MVVM and data binding inside of the My Task app that we
just started to create. There you have it. We've
started to build out our user interface
completely in XAML. Again, this is just one of
the options that developers have when creating user
interfaces with.NET MAUI. You can also create your
user interfaces directly in C# and there's a
great community toolkit, in fact, the.NET MAUI
Community Toolkit, which is built by the community
and supported by Microsoft. There's a whole bunch of
great.NET MAUI goodness in it, including C# markup
extensions that help you be even more productive when you're
building user interfaces with C#. I'll put links in
the shown up below. Now, since we are building
our user interface with XAML, it comes with great developer productivity features
like data binding, which enables your UI to automatically react when
you update code in the code-behind and vice versa
when you update code in the code-behind will automatically
update your user interface. Next what we're going to
do is we're going to go ahead and start using and MVVM model view view model
architecture and data binding to update our application to
be reactive and responsive. Stay tuned for the next video.
