All right, guys.
So let's continue our discovery of Maui now that we have it up and running and we're familiar with the
different moving parts.
So let us try creating a new page.
So I'm going to right click on the project board to add a new item, and then I'm going to launch from
the Maui section, a new content page.
Right?
And then let's call this one test page.
Nice and simple.
So what that gives us is a new C-sharp class that allows us to define what we want on the page.
So this is not a XAML page, right?
So there are two ways to create content on a page or create pages.
One is with the XAML file with supporting C-sharp chord, and we can actually have the C-sharp generates
the parts that we're putting on the page.
So for example sake, I'm going to take this test page and I'm going to make it the start of it.
So jumping over to XAML, I'm going to see that I want I'm sorry, not some app shell, that XAML.
I'm going to turn it that I wanted to route to the test page.
So test page instead of main page.
So let's take a look at what we get with that.
And that's what we get.
We get a simple table with a text.
Welcome to Dot Net Maui.
And that's exactly what we have on the top, right?
So you can see that our C-sharp class is working.
So let us build out on this a bit more.
So what we have essentially would be, one, the content object here that represents the view content,
right?
And then we're seeing that we want a new start layout with children.
So this is a layout and there are different kinds of layouts that you can do.
So if you were to just type in the word layouts, well, they're kind of jumbled here, but you have
absolute layouts.
You have carousel type, compressed, layered flex layouts.
There are a number of layout options.
So this default option that we got was a stock layout and then we could add the children and we could
have a new label and then let us do an exercise or we're going to put in some other elements.
So let us start by erasing everything inside of this class or this construct or other.
So you can see here that everything starts with a constructor.
Yes, it's a class, but the constructor is where the action or the initialization will occur.
Right?
So what we're going to do is build out something similar to what we have on the main page, but we're
only going to be using code.
So let's start off with initializing our counter to zero and then I'm going to have a static label that
I want to call it, let's say counter label.
It's always good practice even in weather when forms are when we're doing visual programming to always
give our controls names and have either prefix or post fixed, that kind of indicates what kind of control
it is.
So my general thing would be that I would say like LPL and then the name, right?
So obviously short for a label that's my own.
So you can develop your own technique if you want, but it's generally good practice because later on
when the codebase grows, it's easier to identify when you want a label versus a textbox versus a button,
etc..
All right.
So first of all, these should be outside of the constructor apologies.
So count and label outside of the constructor and then inside of the constructor, we can define a new
view type.
So I'm going to see scroll view.
So I'll just knew.
Oh, sorry, I just have var scroll view is equal to a new scroll view.
All right.
And then I'm going to see my stack layouts.
Is equal to a new start lilt lyrical.
Then I can see the scroll view.
So scroll view.
I want your content to be the starkly notes.
So right there I am seeing creator scroll view inside this page and then inside of the bar.
It creates a scroll view, create a stack layout, and then place that stack labeled inside of the scroll
view.
So even though scroll view might be self-explanatory, I'm still going to explain that it's the control
that allows you to scroll up and down on the mobile app.
Right?
So the content is too.
Once we just put it in a scroll view and that handles the scrolling for the overflow of the content.
So inside of the label for the counter, I'm going to see that it is equal to a new label, which I'm
going to initialize with a few values.
So here I can set those dimensions or those attributes or whatever you would have put in New Zealand.
We're going to do an exercise or we go through the XAML, right?
So I'm going to say convert and I'm going to put zero.
So we start off with icons being zero.
All right, we can set the font size and any other attributes that we want, the family, etc..
So I'm going to set this to 22.
What else do we want to probably want are the font attributes.
Let's see what we have here.
So font attributes not.
So that's an information.
We can put it to bold.
We can put it to our italic.
We can put it on a number of things.
Right.
Well, really bold and italic at this point.
And then we have the horizontal options.
Do we want it sent or do we want it to the left, to the right, etc.?
So I went to see the options place that text center.
So now that I've built this control and here you have Visual Studio guiding me along right there, suggesting
that you add it to the stack layouts.
All right.
So I can just press tab, let it do that.
So I've built up my control and I'm seeing stuck load to your children.
Add this control right lets us create a button so I can save var BTN count calendar right is equal to
a new button.
And this new button.
I want it to have the text that says Click to count.
And then we also have, let us say, the horizontal option that makes it center also.
So I just use this once again.
And then after we have that button, we can also add it to the layout.
All right.
So I'm just going to copy and paste and change what I know I need to change.
Obviously, the children will be generic and all of these controls are of a standard type that can be
added as children.
Now, after all of this, we can say this dot content.
Is equal to whatever is in the my sorry.
Whatever is in the scroll view.
All right.
So this content is equal to the scroll view.
So let's review that very quickly.
We created a scroll view and we created a stock layout.
We added the stock load to the scroll view, and then we populated the stock layout with different controls.
And then at the end of everything, we're seeing that the content and this here represents the test
page, right?
So this is just if you're familiar with C-sharp, you would understand what this is.
All right.
So this represents our test page.
I'm seeing this page.
Your content is equal to whatever is in the scroll view.
Now, let us take a look at what we get from this.
And I just run without debugging.
All right, so we have our up here and we have our label with Fun Size 22.
This is going zero.
And we have our button that says Click the comments.
Now when we click, nothing is happening.
Why is nothing happening?
Well, we didn't tell the button that it should be doing anything when it's clicked.
So what do we need to add?
No, we need to add what we call our.
If you said click event, then you are absolutely right.
So what I'm going to do here is a button counter, dot, click or click, and then I'll say plus equals
on clicked right or on clicked event.
Now what this is doing is saying tie the click event to this method, which of course we're going to
have to define right.
So underneath our constructor, which was bootstrapping and creating all of our controls, we now have
our private void method and I call it on event.
And then our events typically take the object center as well as a type called event args.
And we just call it E most times.
And then we have our methods.
So inside of our method, I went to see Count.
I want you to increment.
So plus, plus.
And then I would say elbow counter if your text is equal to and then I can get creative with this message.
So.
Click or.
Click.
Can't.
And then I can just put in my comments and then like we saw from the previous one, we have to see Symantec's
screen reader not announce that the LBO calendar text has changed and that's really it, right?
So after doing all of that, if you're running a fast enough machine and you can keep the emulator open,
you can actually hit the hot reload, which will kind of rebuild your application for you.
But that usually works with the XAML changes.
So what I'm going to do is rerun the application and let us do that and wait a bit.
And now when I click you see that it is working.
So our click event is working and right there we created our very first MIUI page.