In real world applications.
Most of the time you do not work with single entries.
Something like, Hey, I have an invoice or Hey, I have a person.
No.
Most of the time you have like tons of invoices, like 20,000 invoices, for example, or a list of
students of your university.
Like 1000 to 10,000.
100,000 whatsoever.
Right.
So a lot of times our applications need to handle or display well collections at least more than a single
entity.
So for sure, if you build an invoice application, you can edit a single invoice, right?
But probably or chances are that you have to select that invoice from a list of multiple invoices,
right?
So I just want to say that in real world applications we often face collections of data.
So something like lists, arrays and all of that, whether we load that from Json files from a web server
or we grab that from a database or whatsoever.
So next up, we will take a look at a pretty cool control.
So add a UI element, which is called ListBox, and that really brings the applications to the next
level and well offers you tons of new functionalities and ways of thinking how to build apps.
So let's take a look at the project real quick.
I just got the main window, so it's the demo project.
All right, here's the main window.
There's nothing inside of it.
We only got the constructor.
Then we have the person dot CSS.
We will use that not in this video, but probably in the next one.
We will keep that.
So if you follow along in the data binding video, you will have that class.
So it's class person and age string name.
And then we have the main window examle, which is probably the most interesting part.
It is a window.
I removed everything but kept the grid.
So here is the grid.
Please pay attention on the height and the width.
I set it to 350 and 350 and here is the grid.
So it is fairly simple.
So I assume that you are experienced enough to simply.
Well, just create it the same way.
We have three rows, three columns and well, all of them have a height of ten except the ones in the
middle, the middle row and middle column.
They are handled with relative sizing.
Great.
So now we can get started.
So create your application accordingly or well, reduce it.
I took the the application from the data binding and remove the.
And now we can start.
So let's create a new control or well, better name is UI element, right?
But it's called control and we can just write down list box.
You can for sure also find it in the toolbox right now add a self-closing tag.
Let's provide it a name.
Let's say simply X name.
Let's give it a name list.
Box names.
There we go.
Let's assign a position here.
So write down column.
So grid column one and grid dot row.
We also want to set that to one.
Column one and row one.
Now I save that and switch over to code behind.
And right here we can now for sure access our list box.
So write down list box names.
There we go.
And we can now bind data to that list box.
So simply write down dot and then item source.
What kind of data do you want to show here inside of that list box?
Now let's hover above item source.
It takes an enumerable.
Well, an enumerable is an interface that gets implemented inside of an array.
Inside of a list, inside of, well, some other type of collections.
Right?
So what that basically means is that we can simply assign any kind of array or list dictionary and so
forth.
Let's create a new list of strings.
You can see that right here.
Let's I will remove that semicolon and initialize that list with some default values.
Let's say Yannick, Peter, Maria and give it another one.
Say, Mark.
So take a look at that.
We are assigning to the item source property a new list of type string with some default values.
So the item source or whatever should get displayed inside of our list box is this collection.
Let me start the application.
You should be able to see a nice look in.
This box right here.
And as you have seen it already, I guess we can hover above that.
Right.
So I can click on Yannick.
It's selected, I can click on Maria, it is selected, I can click on Peter and so on.
And that's pretty cool.
So a list box is a nice way on how we can show data or multiple entries inside of a UI element and we
can even make it selectable, right?
So that I can say Yannick and I want to edit Yannick Now for example, same would apply for invoices,
same would apply for students or whatsoever.
So this is the list box and it has some more very exciting functionalities.
So let's dig deeper into that in the next lesson.