Welcome back to this lecture.
We will now start adding our scroll view and Stack panel so that we have an element where we can actually
show some Todo items.
So what we want to do is we can open up the toolbox on the left side just to get an idea.
And I really highly suggest that you just check all those tools in the toolbox, even if you just read
them.
You don't have to really drag them in and see what it does, but just read through them and get an idea
of what's existing out there.
And here you can see like a stack panel.
This is what we will be using.
But the problem is that if we add too many items to a stack panel, well, they will get hidden.
So what we need is any kind of functionality to scroll, right?
So if we search for scroll for sure, we can search here, we can add a so-called scroll view, right?
So what I want to do is I want to double click on that so that it will get added to our Xaml and well,
we could for sure also just write down scroll view and we want to position it.
So let's write down grid row.
We want it to the second row, so it's index one.
And for the grid dot column, we want to add it to the also to the second one.
So index one, now it's inside here and we want to add a vertical scroll bar visibility property.
So write down vertical scroll bar visibility and we want to set it to auto so that really depending
on the content inside of the scroll view, the scroll bar will get shown automatically, right?
So the visibility will get handled automatically.
Now we don't want to make this a self-closing tag.
It got added as a self-closing tag because we want to add something else.
So let's just close it here and do it that way, just like this so that we have an open tag and a closing
tag.
And in between we can add something.
Now we want to add a stack panel because, well, as the name already suggests, a stack panel can get
used to stack items on top of each other for example.
So for our Todo items, that's an awesome functionality.
We can simply go ahead and add an text item like a text block and another text block item and it will
get stacked automatically for sure.
We have a lot of well properties to configure that, but we can get started pretty easily.
Now here we got all of that and we can change the color of our scroll view if we like or of our stack
panel.
But we don't have to do that because like the functionality is clear.
But if you like to do that, you can just click on the stack panel or on the scroll viewer.
Let's take the stack panel and inside of our properties window you can see that it says No brush.
So if you want to add a background color, you now pick a brush like a solid color brush like we also
have a gradient, but we want to pick a solid color brush and then simply pick one color I want to take
well, something like a light gray just can look a little bit different.
You can, as I said, also create a dark mode.
If you want to do that, you simply add another dark, well, dark color.
I suggest not picking the same color like for the text box because people will then learn like, okay,
I can click on that and write down text so you can pick a fairly different colors, something like that.
For example, you can also for sure pick a real color, like not only gray and dark gray, you could
also pick blue or whatever you like.
So take your time and find your own style.
Great.
So we are good to go.
Let's just start our application and take a look so you can see our scroll view and our stack panel
will be visible just in a second here.
There we go.
And for sure we don't have any content.
So we have the layout completed now, but we for sure want to have some functionality, right?
So this is where we now start setting the name property so that we can access them from our code behind
file to add real functionality.
And what we basically want to do is we want to write down some text here afterwards.
Once we click that button, we want to from C sharp, just read the content of the text box, then create
the text block element and attach it to our stack panel.
And that stack panel is inside of the scroll view here.
We got a text box where a user can write down something, text box.
Okay?
And then we will create a text block and then attach it to our stack panel.
So we will create a text block for that.
So we got a text box and a text block.
Text box is for writing content and text block is for just showing any kind of information.
So in the next lesson, we will get started by assigning the name property for all the important elements
of our application.