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