1 00:00:00,630 --> 00:00:01,350 ‫Welcome back. 2 00:00:01,380 --> 00:00:05,400 ‫In this video, we're going to cover the combo box and you can see one here. 3 00:00:05,400 --> 00:00:11,340 ‫And it has the data source of all the different colors that are available to us. 4 00:00:11,340 --> 00:00:15,690 ‫So let's say we want to use pale violet red as we have already. 5 00:00:15,690 --> 00:00:17,100 ‫We can simply select that. 6 00:00:17,100 --> 00:00:24,060 ‫And as you can see, our combo box has selected this color and it even has this whole beautiful text 7 00:00:24,060 --> 00:00:27,470 ‫about what this color is called like. 8 00:00:27,750 --> 00:00:35,220 ‫Okay, so let's go ahead and create a new project to get started and I'm going to call that one WP F 9 00:00:35,220 --> 00:00:42,600 ‫ten C combo box and you can call it however you like. 10 00:00:44,670 --> 00:00:47,850 ‫But what we will need in here is an example. 11 00:00:47,850 --> 00:00:50,490 ‫We are going to create a stack panel first. 12 00:00:50,490 --> 00:00:59,100 ‫So instead of grid, I want to use Stack panel and I'm going to make XAML a little bigger here because 13 00:00:59,100 --> 00:01:02,850 ‫the design is nice and all, but it's always good to see what you're coding. 14 00:01:02,850 --> 00:01:08,100 ‫And in here I will create something called a combo box and that's pretty much it. 15 00:01:08,580 --> 00:01:09,570 ‫There is my combo box. 16 00:01:09,570 --> 00:01:17,040 ‫I can give it a name, so I'm going to call it name is equal to combo box colors. 17 00:01:20,340 --> 00:01:30,390 ‫And now that combo box needs a combo box item template, something that we have seen in the last video 18 00:01:30,390 --> 00:01:33,180 ‫where we used the list box. 19 00:01:33,180 --> 00:01:36,330 ‫So we have this combo box item template in here. 20 00:01:36,330 --> 00:01:41,070 ‫We need to have a data template because otherwise, as you can see, it's complaining. 21 00:01:41,070 --> 00:01:47,400 ‫And now as soon as we have this data template, it's all good and I'm going to get rid of the additional 22 00:01:47,400 --> 00:01:48,840 ‫lines that I have created here. 23 00:01:48,840 --> 00:01:58,080 ‫So in here I want to have a Stack panel because I want to stack everything up in there and it should 24 00:01:58,080 --> 00:02:00,690 ‫be oriented horizontally. 25 00:02:02,370 --> 00:02:06,960 ‫Now, the STACK panel should contain a rectangle. 26 00:02:09,600 --> 00:02:16,800 ‫By the way, the STACK panel is going to be what's inside of our combo box, and it should contain a 27 00:02:16,800 --> 00:02:21,540 ‫rectangle, which I'm going to fill with a color. 28 00:02:21,540 --> 00:02:30,960 ‫So I'm going to fill it with binding name and it should have a width of, let's say 32 pixels and a 29 00:02:30,960 --> 00:02:33,540 ‫height of also 32 pixels. 30 00:02:33,540 --> 00:02:39,990 ‫And then I want to add a margin of let's say five pixels towards all directions for that rectangle. 31 00:02:39,990 --> 00:02:44,280 ‫And now there should be a text block also saying the name. 32 00:02:44,280 --> 00:02:50,370 ‫So this text block should have a text called binding name. 33 00:02:50,700 --> 00:02:53,670 ‫So we're going to bind the name property. 34 00:02:53,670 --> 00:02:56,100 ‫So we will need to create a name property. 35 00:02:57,030 --> 00:03:03,930 ‫And also I want to add a font size of 32 to my text block. 36 00:03:04,830 --> 00:03:05,430 ‫All right. 37 00:03:05,430 --> 00:03:06,600 ‫So that's pretty much it. 38 00:03:06,600 --> 00:03:09,540 ‫That's our whole code that we need in XAML. 39 00:03:09,540 --> 00:03:16,110 ‫And now we can go ahead and run or create a code that we will need in code behind, because what we 40 00:03:16,110 --> 00:03:19,410 ‫all need is definitely this name property. 41 00:03:19,950 --> 00:03:23,220 ‫So let's go in the code behind and in here. 42 00:03:23,790 --> 00:03:32,130 ‫I'm going to go ahead and I'm going to simply access my combo box colors, which is our main window 43 00:03:32,130 --> 00:03:33,570 ‫dot combo box colors. 44 00:03:33,570 --> 00:03:38,280 ‫So this one here, I call this combo box like that. 45 00:03:38,310 --> 00:03:40,440 ‫I call the combo box colors. 46 00:03:40,440 --> 00:03:45,810 ‫And now what I will do is I will set the item source. 47 00:03:46,710 --> 00:03:56,460 ‫So items source is going to be our colors dot get property and we cannot use it that way. 48 00:03:56,460 --> 00:04:04,200 ‫So we'll need to send it type of colors, dot get properties. 49 00:04:04,980 --> 00:04:08,760 ‫So we'll get all of the colors that are available in. 50 00:04:09,700 --> 00:04:17,140 ‫This class your system that windows that media colors and in there is a method called get properties 51 00:04:17,140 --> 00:04:19,780 ‫and it will give us back all the colors. 52 00:04:19,780 --> 00:04:20,770 ‫So that's pretty much it. 53 00:04:20,770 --> 00:04:23,650 ‫We set the item source to this colors property. 54 00:04:23,800 --> 00:04:30,220 ‫We could have of course, used a list of elements in here of objects that we want to show in here. 55 00:04:30,220 --> 00:04:34,360 ‫But having this beautiful approach here is going to super simple. 56 00:04:34,360 --> 00:04:38,410 ‫As you can see, we have just one line with so many different values that we can choose from. 57 00:04:38,410 --> 00:04:45,400 ‫So we simply have this combo box which contains all of those colors and we can use this chocolate color 58 00:04:45,400 --> 00:04:49,600 ‫or we could use a dark slate, gray and so forth. 59 00:04:49,600 --> 00:04:57,970 ‫So as you can see, you can set the item source to a pretty cool list that is internally available. 60 00:04:58,000 --> 00:05:04,510 ‫Or you can create your own item source, which could be of course, some data from a database, or it 61 00:05:04,510 --> 00:05:06,340 ‫could be a list that you create yourself.