Let's see how we can create an item template for our list box.
So therefore I will just.
Well, I will just close it entirely.
Just give me a second.
There we go.
That's better.
First of all, I will remove the self-closing tag because we need to have its own closing tag.
There we go.
Now, as a child, we can start adding some new controls.
So UI elements, right?
We want to add a list box and then item template.
So as I said, if we create an item template, we can define how the stuff inside of the list box so
its elements start to appear or what their layout is now inside of an item template need to define a
data template and inside here we can now really start using the components that we already know, such
as, for example, the Stack panel.
So you know, the stack panel can get used for stacking items.
So let me repeat that.
This right here could be a single entry of a person and inside of a single entry, which we could highlight,
like if we hover above it, we would have a stack panel and then we could have like the name and below
of that the age.
So let's create inside of that stack panel a text block and inside that text block, we just make that
self-closing.
I'm sorry, that was just a habit.
There we go.
Text block.
We can set the text attribute or the text property and bind this value.
As you have learned that already, we want to bind it.
So set the binding to our name so we bind it to the name property.
If we set the people list as the item source, then the name property will get found because our person
has a name property.
Let's duplicate that.
Let's paste it here.
Let's do exactly the same for the FPS rate.
So just take a look at that.
Again, we have a list box.
It has a name, the name is List Box People.
Now in the last lecture we adjusted that at the very end.
So pay attention on that name.
It's called List Box.
People check if you have renamed that.
If not, do it now, then we have an item template Inside there we can define the data template.
That's what we have to do and then we can start creating our layout.
So in the end, what we have right here will be one person.
If we have ten people, we will have like ten entries all defined by this item template.
Great.
Now let's move to our code behind.
There we go.
We have those people right here.
We already created them in the last video.
We set the item source.
So simply hit start right now.
Right.
So now you can see, just as I said, if we start hovering above that, we can see that we have now
created our own kind of layout for a single list box entry, Right?
We have a stack panel here consisting of two items in each entry.
So each entry has a stack panel and a stack panel has Lucas here and 27.
So text box one, text box two.
Now, it would be very cool to see what 27 means.
Like, how could you say what that is?
I mean, 30 that could be anything.
How much money you have, how old you are, or where are you sitting at, which seat number or whatever.
Right?
So we should provide some more context to the user and therefore I will now show you a nice trick.
Or the name.
Let's say we want to add a prefix or just another string that says like name and then column.
Therefore, we can add a comma after the binding and then set the string format.
Now we can use string formatting and interpolating.
So let me just open up this single quotes.
Let me write down name and then let's add curly braces again to interpolate and then simply add zero,
which will be the first value.
So name in that case.
So wherever zero is mentioned here, right, the first value will get assigned.
In that case it's name.
Let's copy that over starting from the comma until the end.
So the second single quote, let me just paste that again.
Make sure that you don't make any copy paste mistakes.
So take your time and well, do it carefully.
Now for the age.
We can do it like this now when we start the application again.
You should be able to see it that way.
So now we have name Yannick, age 30.
So that makes a lot more sense to the user, right?
Because he know he's seen okay, yeah, it's his pre name or his name anyway.
And then we're talking about his age.
So we are really providing some more additional information that gives the user a nice sense of what
we are actually showing him.
Cool.
So now the ListBox has that nice hovering and selecting so I can select that here.
But what can we do with that?
Well, let's explore in the next lesson.