All right.
So now that we've seen how to create a new page and controls using C-sharp code, let us recreate that
using XAML code.
All right, so we'll go over to our project, create a sorry, add a new item, and then this time we're
going to go with the Maui content bid.
So notice the first one was C-sharp, and this one is XAML.
All right, so we're going to select that one.
And I just left the default name as we're still in the Explorer instead.
CC, we get the stack layout and we get the default label.
So let us start modifying this.
Right?
So our label last time it's said, and I'm just going to be flipping between the C-sharp and the XAML
just so I can copy and paste and go up more quickly.
So the text here is zero.
We do get to set the vertical option, so that means it's center vertically and then we set the horizontal
to be center also.
But other elements, we needed to have the name right.
So we gave it the name.
It'll be a counter.
So I'm going to see x colon name is equal to albiol counter.
So that way we know how to refer our reference ID from the code behind.
We also probably want to give it font size and you see all the attributes that I could set in the C-sharp
I can actually set right here in the XAML.
Right.
You might find this view a bit more intuitive, but that's really up to you.
I'm just showing you your options.
So font attributes bold, right?
So that's our label.
Then we have our button.
So open up a new button tag, and I like to just open and close at the same time and then fill out all
the attributes, right?
So the text here said, let me just jump over, click to count.
Right click to count.
And what else did we have?
We had the click event, so on.
Whenever it is clicked, we want those here.
They're seeing you can create a new event and I'll just click that.
It generated one for me.
So we'll look at what got generated for us in a few.
We can give it the same center and vertical, horizontal and vertical centering.
Attributes.
And I think I'm going to leave it at that for now.
So now let's jump over to our code behind.
So the code behind file is usually going to be nested underneath the XAML file, right?
And if you look at it, you will see a partial.
And it has the same name as a zombified.
So partial in C sharp just means that I have multiple classes and each each code file is just like an
instance of that class or a part of the definition of that class.
So this is part of the definition in the XAML file, and the C certified is part of the definition and
that one inherits from content page.
No, I've already added the private field for the count.
We have our constructor and then we have this method called Initialize component.
So remember that previous to the interest page, we would have defined everything that would have been
on the visible part of our page inside of our constructor.
Well, initialize component does exactly that, except is auto generated alongside what we're doing
in the summer file.
So if you look at it, you'll see that you'll see the control names and types accordingly.
So anything that you're going to be doing inside a constructor, I would advise either before or after
initialize component, but don't modify that.
Now we have our click event that was generated for us.
And what I'm going to do is just reuse the same click event code from the previous control, from the
previous page, rather, so that we have the same behavior right.
Now, to test this, I'm going to jump over to the app shell and I'm going to see not test page but
new page one.
Right.
So let us make new page one our first page and test this out.
So when this loads, we get to a very similar layout.
We can see at the top here that it is new page one and when we click we get the same behavior.
So at this point, you know, now you now know two ways to create a page inside of your MIUI app.
You can either use a C-sharp code and code out all of your elements as you want them, or you can mix
it where you have the XAML as well as the code behind.