All right, guys.
So you've written some code.
Let us jump over to our user interface to get this party started.
So I'm going to remove everything inside of this user interface.
First of all, starts off fresh and we're in the main page right now.
There are a few things that we'll want to include here, and we've gone through that or a similar activity
before where we need to include some namespaces inside of this file so that it can know where to find
what resources that we'll want to reference.
Right.
So the first one that I want to add would be the model someone to see excel in this or namespace colon.
We can call that namespace model and this one I'm going to make we go to see all our hyphen namespace.
So we're defining our namespace colon and then we want the path to our namespace.
So it would be car lists, dot models.
All right.
So our model will be found inside of our list up normally not modules, folder or namespace.
Right.
And then we can continue that.
So what I'll do is just duplicate this line so I don't have to rewrite that selected namespace stuff
every time.
The next one here would be view model.
So where do we find the view model?
Well, that one is in the view models folder.
All right.
And then we want to have our.
Well her.
Okay, so what I want to know is data type.
So this is going to be slightly different.
So this is going to be X colon data type.
Right.
And then this one.
No, we'll set the data type to be look in the view model folder or look in the view model namespace.
So that's a view model that the CAC defined up here.
And the data type will be car list view model.
Right.
And that is the value that we're putting there for that X data type.
The last thing I'm going to put here is a title.
No title is equal to I can of course, hard code this I could just say car list.
But then we're using Nvme and this would be the perfect opportunity to see what the VM would allow us
to do.
So Nvme would allow us to see open and close calibrations binding.
And then we look for the property in our data type or binding context that matches what we want.
So in this case, I want the title property from the binding context.
Where's that coming from?
Well, main page, this is our Zoom file.
Here's our code.
Behind Main Page is taking a copy of car list view model.
Setting that as a binding context.
All right.
Remember that car, this new model?
And here is an example that I was seeing earlier when we tried to look forward to are going to see the
auto generated class as well as our class.
So if I go to our class, here's where we were seeing set the title to be equal to car list.
So just by getting our copy of our initial copy of car model, we're getting our copy of the car service
and we're setting the title here to be Car List.
And then our XAML file can bind to that title, and that's how easy it is.
So whatever property we set instead of the view model, we can bind to it on this side.
So very quickly, I'm just showing you what that will yield.
You don't have to build because I'm aware that it'll take some time and so on.
I don't want us to waste all of those resources just to see the title, but here it is.
This is the title that is being displayed on that page.
So let us start designing some of the visual elements that we need for our layout.
So the first one that I want to put is the grid.
So we already went through some of these and we have an idea, know we're just going to be putting them
to more practical use, right?
So for the grid, I'm going to define two columns now.
There are different ways that you can define the columns.
You can set a size and you can comma separate the sizes.
You can also say star.
And Star, which means that it will try to stretch as much as it possibly can.
We could also see auto, right?
So when you say auto.
It will.
I'm sorry I missed that.
All right.
So you could also say auto.
So it will try to make these two even and then fill whatever else with that space.
So whatever auto whatever content goes into the auto column, you will feel as much as it needs to.
And then whatever is left over will be evenly split.
So star stars pretty much see a 5050 star star star are they four stars would be 25, 25, 25, etc..
So I'll just split the grid 5050 and then I'm going to say that I want to space the columns by at least
five pixels.
Right.
So that should be spacing, column spacing, not column definitions and column spacing by five pixels.
And then I can define rows.
So we have the column definition.
We can also see role definitions and we can set up rule spacing.
So you see, however you want a grid to be, you can actually theorize it right here.
So here are all definitions.
I'm going to say star and or whatever space you need for auto.
That's fine, but fill as much with the star.
Then to get our data actually displaying, we need what we call a CollectionView.
So this CollectionView goes inside of the grid and we're setting this CollectionView to take up two
spaces.
So we have a 5050 split with our grid, right?
If I was to display that to you, you would actually or rather, if we were to put in like two, what
should I say to place all those and change the colors of them?
And you see, that half would be one column, half would be Oracle.
If we want this control just to fill both columns, then we will see something like Grid.
That's columns spun.
So here is the estimate.
It would be called spun in the tree.
Well, for the control, it's grid column spun and I'm telling it spun to grid columns.
Right.
Next up, we have the item source.
Now, this is a CollectionView is obviously the data needs to come from somewhere.
And here I can see that your collection source would be binding.
And the binding would be to the list of cars.
What is cars?
Cars.
These are observable collection inside of our view model.
Right.
That's this observable collection.
So I'm seeing what's that observable collection and use that as your item source.
And remember that the whole point of the observable collection is that when it changes, it will fire
off a notification to anything that is binding to it.
Right.
So then we close this out with selection mode equal to not because I want something else to hunt.
All right.
So that's our CollectionView.
Now, instead of our CollectionView, we have a CollectionView DOT template.
How do we want?
Sorry.
Item two.
There we go.
How do we want our items in this view to look?
Then at this point, we can define a data template.
And this data template, we have to give it the data type it's supposed to use.
I'd say X colon data type and a data type that you're going to be using is our model called CAR, right?
So the data that you're going to be getting, pretty much it's going to be based on the car.
So it will know that any bindings would be relative to what the car should look like.
So all of these things are just preparing, right?
We haven't started actually putting in any data just yet.
There is a certain control called a freedom that I like.
And this freedom allows me to kind of put like borders around the data points.
All right.
So I went to see frame and set a minimum height of the frame to, let's say, 90 pixels.
And then inside of this frame, I'm going to have a horizontal stock layout.
And his horizontal stock layout.
I'm going to give it a label are two labels and the text for the label here would be binding.
So when we're talking about cars, I would probably want to display like the meat than the models.
Right.
So Honda fit, Toyota supra.
Right.
So I would say binding MC.
And I'll just duplicate that and more so because I'm using a horizontal stock layout.
Last time we looked at the vertical stock layout, which means that it's going to stack them on top
of each other.
Horizontal stock layout is just going to stack them side by side, slightly different from the grid,
because the grid allows us to space and do all sorts of things.
Horizontal stack just means put them beside each other.
If you're familiar with Float in CSIS, that's what the horizontal stack would do.
We can actually add some elements.
There's some other styling, so I'm going to pad it with about ten pixels.
Remember that padding versus margins.
Some margins push things away, whereas the putting mix means how much space from inside to the border
of this control do I want?
So putting ten means split ten pixels between the content and the nearest border and I can actually
put spacing there.
Right.
So I went to space by five pixels.
So it means that, yes, the grid allows us to do column definitions and column spacing, but I can
also put spacing in the horizontal.
So it's going to see this element than five spaces in that element.
So then it will look like ascended.
So, you know, there are different ways you could layer salt, but of course we're just making it up
as we go along.
An alternative to doing two labels and make a model could be that inside of this inside of this view
model, I could actually put in a property that returns the MC plus the model concatenated that in one.
So, I mean, there are different ways we could go about it.
All right.
Now, one cool thing about Visual Studio 2022 so far and the Maui development is that if you're already
in debug mode, you don't necessarily have to come out of it because we have the hot reload enabled
and especially if you enable the hot reload on save, then every time you save the mobile app will actually
visibly update it.
So if you have a wide enough screen, you can have both the mobile app or while you're coding, then
that will be good.
So where we have the mobile app here with nothing in it because well we haven't said anything to automatically
get the, the source right.
So what I'm going to do is inside the grid just the same.
I'm going to create a button.
So this button is going to go and fetch our cars or text here for all button is going to see fetch cards.
Right.
It's going to have a command binding.
So remember we talked about observable collections and properties and then we have the command.
So this one is going to see a binding and it's going to bind to get car list command.
Now you're probably seeing where I do remember creating a car list command.
But we do have get car list and it is at a command.
So the generated equivalent of this, as we've seen so far, we have generated equivalents of lots of
things.
The generated equivalent would have been get car list command.
Right.
So we just bind that to the button.
So here at this point, you would be more familiar with seeing a button click event instead of a button
click event.
We just say, here is the command, right?
And then we can see that is enabled.
So if we click it one time, we don't want it to be clickable again until the data is back.
So I can set up binding here to if you said is not loading then you are right.
So it's enabled when it's not loading pretty much.
And then we want it in the grid.
That's rule one.
So remember, we have Toro's auto and auto pretty much is here.
All right.
And then we're going to set this one in the great role one.
All right.
And so that's in Greta rule one.
And we wanted Ingrid.
Grid column one or zero.
So want it to the left because we have two columns and let's just see what we get with that.
So I'm still in demo mode.
Did all those changes press save and bring up the mobile app?
And there we have the mobile app and that can click fetch cars and look at that.
All right.
Just like that, I noticed that we get an automatic scroll view.
Whether you're going to drag the interface or you're scrolling with your mouse, it's simulating what
the mobile experience would be.
So when we come back, we'll add more elements with style.
This up a bit more, but we're making good progress so far.