‫Welcome back.
‫In this video, we are going to create a list box.
‫And you can see here we have a little list box with the entries.
‫So we have Bayern Munich having three points or goals and then we have Real Madrid with two goals and
‫the match is almost over.
‫So we are using multiple different elements here, which we haven't used yet.
‫And when I select one and I click on this button show selected, a little message box pops up and tells
‫me about the selected box, and it gives me some further information, or at least in this case, it
‫just gives me this information.
‫And of course, you could add a little more information in here, so you could build a little application
‫from that which takes the data from the Internet and is updated all the time and well, simply shows
‫you the current score of the current matches.
‫All right.
‫Let's go ahead and start doing that.
‫So I'm going to create a new project for this, which I'm going to call list box.
‫So let's go ahead and have this name already.
‫So I'm going to call it C, and in here I'm going to mainly use XAML.
‫So I'm going to drag it all up.
‫And we have this well, our image here or a window here still.
‫But now what I want to do is I want to use grids again, but I'm going to use multiple rows, of course.
‫So let's go ahead and create a column definition, a row definition and those kind of things.
‫And by the way, we actually only need two columns, so it's not going to be that complicated.
‫So we only have two different columns.
‫We don't have multiple rows, so we won't need the row definition.
‫But for you, if you recall how to do that, that's always good to know.
‫So you need to column definitions first and then here you can define your columns.
‫And I'm going to go ahead and define a column with a width of star and a column definition with a width
‫of, let's say 100.
‫So I want to have a button, a second column, pretty much.
‫That's what I want to use here.
‫All right.
‫So these are the two columns that I have.
‫This one is going to contain the list box, and the right one will simply contain this huge button that
‫we can click once we want to get more information about a match.
‫So let's create a list box now and I'm going to use the list box keyword and this list box will get
‫a name.
‫I'm going to call this list box matches and I'm going to horizontally align the content.
‫So horizontal content alignment and I'm going to stretch it so that it stretches out the content of
‫my list box.
‫And this one here, this lbw match should be the name, by the way.
‫So name is ll be matches.
‫All right, next, I want a specific item template.
‫So a list box can have a item template.
‫So I'm going to use list box dot item template.
‫And in there I can have a data template.
‫So I'm going to create a new data template and now I can finally go ahead and add the text blocks or
‫the information.
‫So as you can see, it's structured in a way that we haven't seen yet, but that's totally fine.
‫You will see how it works in a second.
‫So we have this list box, then we have the item template, then the data template.
‫And in here we can display the data and I'm going to use a grid here.
‫So I'm going to use a grid with margins of two.
‫And this grid needs column definitions as well.
‫So I'm going to create a new grid dot column definitions tag.
‫And then here I'm going to define the column definitions or create the column definitions.
‫And by the way, I'm going to keep it simple here as well.
‫And what I want to have is simply a width, which is going to take the same space as all the other columns.
‫So I will have five columns here.
‫One is going to be the team one, the second one is going to be the score.
‫Third one is score again.
‫Fourth one is the team or the second team.
‫And then finally we have the progress.
‫So we want to know how far in the game already is or the match is.
‫And now I want to have multiple text blocks.
‫So one is going to be a text block with a grid dot column position of zero and a text that I want to
‫bind.
‫So I'm going to bind this text to team one.
‫Now, you might wonder, what is team one?
‫Well, we need to define this team one in our code behind.
‫All right.
‫So what I'm going to do is, before I go any further here with example, I'm going to go ahead into
‫the code behind, and I'm going to create a new class which is going to take care of matches.
‫So this is just going to be a very simple class, public class match.
‫And this class will only contain properties so public and actually let's create a property here.
‫So like this is going to be easier prop and score one, then another one, score two, then I need one,
‫which is going to be a string, which is going to be two one and then another one, which is also a
‫string, and this one will be team two.
‫And now finally I have one which is also an integer, which will be the completion.
‫So I want to know how far in the game is or how many minutes of the total match have passed.
‫So these are the general information about this match class.
‫And you see this class is amazing and generally object oriented programming is going to be amazing in
‫here because we simply can adjust that if we want to add some more information.
‫For example, we want to add the players who are on the field and we could create a whole new property
‫which is going to take care of the players.
‫So we could create a class which is going to be used within match, which is going to contain all the
‫different player names or something like that.
‫So that's great for extensibility, so you can easily maintain that code.
‫Now we have this match class and within my main window I want to go ahead and create a list of matches.
‫So I'm going to create a list and I'm going to call it match or actually I'm going to use Match as the
‫list element that I want to be in there.
‫And it's going to be called matches, which is going to be a new list of matches.
‫All right.
‫So now I have this match matches list and I can add elements to that list.
‫So I'm going to add a new match, which is going to be my team one with the value of Bayern Munich.
‫I'm a big Bayern fan in Germany and then the best that the best team in Germany and there.
‫Very good internationally.
‫Hopefully they win the Champions League this year.
‫Still looking good.
‫They just beat Sevilla.
‫Sorry for the severe fans.
‫Then we have the score one, which I'm going to set as three and the score two, which I'm going to
‫set at two.
‫And then finally we have a completion, which I'm going to set at something like 85.
‫So the match is almost over and Bayern is one point ahead or one goal ahead.
‫So that's generally how I can create a new match.
‫And you see, we didn't need to create a constructor, we didn't need to create any methods in that
‫class.
‫We simply created a very basic class which has properties and we assign those properties in here and
‫now we have an object with all of those properties.
‫And that's great because now we can use that in order to show it onto our list here or actually onto
‫our.
‫List box.
‫So I have this first text block, which is going to be theme one.
‫Then I have the second text block, which should be connected to the score of Team One.
‫So it's going to be score one.
‫Then the next text block should be information about team two.
‫So this is going to be team two.
‫And by information about team two is just the name of Team two and then finally score two.
‫And very finally so last I want to have a well have to want to have a progress bar actually not a text
‫block which will inform me about how far in the game is.
‫So a progress bar which I'm going to set at Grid Column four.
‫And we will need to change the columns here as well, of course.
‫One, two, three, four.
‫So we have these five columns that we have set up here.
‫And now I'm going to set the team one at column zero, score of team one in column one and so forth.
‫And now I want to have a minimum value for that progress bar, which is going to be zero and a maximum
‫value.
‫And if you know about soccer, then you know that it's 90 minutes or football based on where you're
‫from or which English you want to use British English or American English.
‫So we have a value that we want to bind, and we did that with this text here, so we simply bound to
‫text.
‫But now we want to bind the value of a progress bar, because a progress bar is not just a text, it's
‫actually well, it needs an integer type of value.
‫So what I'm going to bind here is going to be the completion completion, and now we should be able
‫to test that.
‫So even though it's complaining, that's because I'm not closing the progress bar.
‫All right.
‫But as you see, there is nothing here because the values that we are using, they are in code.
‫And well, it doesn't compile the code yet.
‫It doesn't check the code of our main class here of our example file.
‫And now let me check if we can run it.
‫And by the way, if we want to run it, there's one important thing to add and that's lab matches.
‫Dot item source is equal to our matches.
‫Now what is LWB matches and what is the item source?
‫Well, if we look at all the matches, that is our list box.
‫So I call this list box, I'll be standing for list box matches.
‫So this list box is going to take care of all our matches or it's going to display all of our matches.
‫That's the idea behind it.
‫Right.
‫And it needs a data source because otherwise it won't show any data.
‫And I just said, okay, I want it to be the data source of our matches.
‫And well, the matches should be the data source.
‫So now it should show this one match which is Bayern Munich versus Real Madrid with 3 to 2 score.
‫And then we are Bayern Munich, Real Madrid, Bayern is three goals, real has two goals.
‫And then we have the Progress Bar which says Time's almost up, so the match is almost over.
‫Now.
‫I wanted to have the score in the middle of the two teams, so I will need to change the order here.
‫And I'm going to change it like this.
‫Of course, I need to adjust the columns here as well because I would like to have the scores just next
‫to each other.
‫It's easier to compare them.
‫So let's run it again and we can see minus three and the Real Madrid has two and they should actually
‫be a little well, the text should be centered.
‫So what we can do here is actually make it a little nicer for the score and I'm going to align it and
‫I can do that with a line that will be horizontal alignment center.
‫I'm going to do that for both the scores.
‫So let's run it again.
‫As you can see now, this is how you can then adjust your user interface and apply your changes and
‫make it a little nicer.
‫What you could even do is align this number towards the right and that number towards the left, and
‫you could even enter something like a colon in between or something like that.
‫All right.
‫So that's our first match.
‫Now for you, a little challenge.
‫Please go ahead and add multiple different matches.
‫And it doesn't have to be soccer.
‫You can or football you can enter matches of whatever the progress bar should be, something like the
‫time that is up and you have simply the two teams with their scores on each side.
‫So please go ahead and add that.
‫All right.
‫I hope you tried it.
‫And it should be pretty straightforward because we have created this match here.
‫And the only thing that we need to do is to copy and paste that multiple times and now simply adjust
‫the team names and the scores.
‫So I had something prepared here and as I said, I'm a more of a football fan, so I'm going to add
‫football teams.
‫International one PSG standing for Paris Saint-Germain, that's going to be against Barsa and Barsa
‫is currently losing against Page, but they can still win it as they still have plenty of time.
‫So it's just the 55th minute.
‫Then we have Bvb be Dortmund, which is the second best team in Germany most of the time, and they
‫play against us or Roma.
‫Then we have another team here which is Manchester United.
‫They play against a galaxy pretty unlikely, but it can happen that they play against each other and
‫I'm going to get rid of the last score just so I don't have to type or to think about the different
‫team here as well.
‫So this match is not that long and or it hasn't passed that long.
‫And here Manchester United have scored one goal and Zlatan Ibrahimovic has also scored one goal for
‫LA Galaxy.
‫So that's the 35th minute and Barsa.
‫Well, I think that is all good.
‫So we can keep it as is and now we can run it again.
‫Then you will see that we have this little interface here showing us all the different teams and their
‫score, and then you can also see how long in they are.
‫Of course, you could add something like starting time, ending time, you could add all kinds of information,
‫whatever you can think of.
‫What would be pretty nice is if you had something like all the players.
‫So if you want to add the line up in here, what you could do is of course create a new property called
‫Line Up, which will just be a long maybe array of strings or even a list of strings containing all
‫the different player names.
‫And then you could display that once somebody presses on one of those and press the select button.
‫But we don't have the select button yet, and that's what we're going to add now, because you might
‫say, Oh, I want to have some additional information there.
‫And that's very relevant.
‫It's a really good if you want that or well, if you ever come to the point where you actually will
‫need that in an application.
‫So I'm going to put that outside of the list box.
‫And by the way, our list box, I didn't set up any column in here, but that's something that, well,
‫WPF does for us.
‫So the first element is going to be automatically at zero zero if we don't assign it.
‫But I'm going to assign it in a second.
‫First of all, I'm going to add a button, though.
‫So let's create a new button.
‫Let's set it at Grid Column one and let's add a click event to it.
‫And I'm going to create a new event.
‫So I'm going to just going to say new event handler and it's going to add a button click method for
‫me and I'm going to call this show selected.
‫So button click, maybe that's not the best name, but yeah, it's okay, we can use this button click.
‫So here we have this button click method.
‫And what that will do is it will show me some more information.
‫And for now it's just going to do the following.
‫It's just going to check if the match that was selected is not empty.
‫So lbe matches the selected item is not equal, empty or null.
‫Because if it's null then I don't want anything to happen.
‫But if it's not null, I want to show something in the message box and I'm going to show something like
‫Selected Match is going to be plus and in here I'm going to show all the different matches.
‫So.
‫I need something like El B matches that selected item as a match and from that I want to have the team
‫because now the matches selected item is not a match class, but I want to use it as a match.
‫And there I want to show team one plus an empty space, plus the next row.
‫So I'm going to copy this here.
‫I'm going to put it into the next line.
‫And here I don't want to show the team.
‫I want to show the score one.
‫Then in the next line, I want to show the score two.
‫And finally, I want to show the team two.
‫And afterwards, I don't need empty spaces anymore and I can use the colon and actually like this,
‫the semicolon.
‫So that's how I can show something on the message box.
‫And in this case, I'm going to show my team, by the way, once again.
‫So you see LWB matches selected item.
‫The selected item is an object and I want to use it as a match so that I can access its team one, team
‫two and score properties.
‫Otherwise I couldn't do that.
‫So if I leave that out, I cannot just call team one.
‫I'm going to show you in a second.
‫So here let's say I have this ll be matches dot selected item dot and here you can see it doesn't offer
‫me the properties because this is an object.
‫This selected item is just an object and it only has those method methods available equals to string
‫and so on.
‫But what I actually need is the properties of on my match and I know that the object that was selected
‫is a match object.
‫That's why I can access its properties.
‫Great.
‫So now let's go ahead and test that.
‫And after that we'll be done with this video.
‫So I hope you could follow along and it's all good.
‫So now I've selected Barsa or which is Barsa show selected and as you can see, selected match PSG three
‫to Barsa.
‫So this is the current score.
‫And here you could of course go ahead and add some more information or you could even open up a new
‫window in which you show all the different information, like the lineup of the match of the two teams
‫and so forth.
‫All right, that was quite a long video and we did quite some stuff.
‫We used list boxes.
‫You saw that.
‫Then we use the grid again.
‫Well, we see now to use that already.
‫But what was interesting in this one was, for one, that we have created a class which is just containing
‫properties which we used in order to create this little match list, which is pretty cool because we
‫can easily extend that as we go.
‫And we also used data binding and here so we bound to a property within our class without our main window
‫class which is our.
‫Match here, so we can easily access that and that's pretty cool.
‫Okeydokey.
‫So I'd say that's good for this video.
‫See you in the next one.