1 00:00:00,390 --> 00:00:03,520 ‫Welcome back to the WP EFF chapter. 2 00:00:03,540 --> 00:00:10,980 ‫In this video we are going to set everything up for the Helloworld WP F application, so therefore you 3 00:00:10,980 --> 00:00:17,340 ‫need to open up the Visual Studio installer and then here you'll find installed and your Visual Studio 4 00:00:17,340 --> 00:00:25,830 ‫community 2017 and here simply modify or click on more and then click on Modify that will get things 5 00:00:25,830 --> 00:00:29,190 ‫ready and then you can install workloads. 6 00:00:29,190 --> 00:00:36,620 ‫And here it's important to also install the dot net desktop development workload. 7 00:00:36,630 --> 00:00:40,650 ‫This will allow you to build WPF, Windows Forms and so forth. 8 00:00:40,650 --> 00:00:48,930 ‫So if you don't have that, simply search for WP F in here or search for the dot net in here and install 9 00:00:48,930 --> 00:00:51,000 ‫the dot net desktop development. 10 00:00:51,750 --> 00:00:59,010 ‫Once that is done, you can close that up and you can go ahead and open a new project. 11 00:00:59,010 --> 00:01:06,120 ‫And now after having installed that, you will see something called WP, PHP dot net framework here. 12 00:01:06,120 --> 00:01:13,620 ‫So you can go to Visual C sharp and there you'll find the WPF app and I'm just going to call that one 13 00:01:13,620 --> 00:01:16,620 ‫WP f01. 14 00:01:19,230 --> 00:01:27,870 ‫And now let's go ahead, let's open that up and the designer will load and then you will find this main 15 00:01:27,870 --> 00:01:29,820 ‫window XAML file. 16 00:01:29,820 --> 00:01:34,440 ‫And now you might wonder what XAML file is and what this whole thing here is. 17 00:01:34,440 --> 00:01:38,430 ‫Well, that's our GUI graphical user interface. 18 00:01:38,430 --> 00:01:46,140 ‫And here we can drag in things such as a text box, or we can drag in buttons, but we can also do that 19 00:01:46,140 --> 00:01:47,970 ‫in the HTML code. 20 00:01:48,840 --> 00:01:55,470 ‫We will look into example a lot more in the next videos, but for now, let's just create something 21 00:01:55,470 --> 00:02:00,390 ‫in here which is a hello world text and therefore you can open up. 22 00:02:02,290 --> 00:02:10,840 ‫The toolbox on the left hand side, and here you will find all the different controls and so forth that 23 00:02:10,840 --> 00:02:13,990 ‫you can drag into your main window. 24 00:02:14,020 --> 00:02:20,230 ‫As you can see, it's called Main Window, and if you search for this title, you will find it in here 25 00:02:20,230 --> 00:02:21,310 ‫in your example as well. 26 00:02:21,310 --> 00:02:23,500 ‫So as you can see, it's split up here. 27 00:02:23,530 --> 00:02:26,250 ‫There is example part and there is the design part. 28 00:02:26,260 --> 00:02:28,540 ‫So this design window is what you can see here. 29 00:02:28,540 --> 00:02:31,990 ‫And then there's this XAML window which you can see here. 30 00:02:31,990 --> 00:02:37,230 ‫And this is pretty much the code that makes up this window that you can see here. 31 00:02:37,240 --> 00:02:41,500 ‫So it's using multiple namespaces up to here. 32 00:02:42,190 --> 00:02:45,010 ‫Then it's the main window class. 33 00:02:45,010 --> 00:02:47,770 ‫That's pretty much the class that we use here. 34 00:02:47,890 --> 00:02:52,390 ‫As you can see here, main window that XAML and there is a code behind class. 35 00:02:52,390 --> 00:02:54,040 ‫We will look into that in a second. 36 00:02:54,040 --> 00:02:56,860 ‫And then there is the title height and width. 37 00:02:56,860 --> 00:03:02,230 ‫So we define the width of our window here we define the height and of course, this title here at the 38 00:03:02,230 --> 00:03:02,680 ‫top. 39 00:03:02,800 --> 00:03:06,610 ‫Now let's open up the design again. 40 00:03:06,610 --> 00:03:07,870 ‫Let's click on design. 41 00:03:07,900 --> 00:03:09,070 ‫You can even double click it. 42 00:03:09,070 --> 00:03:11,740 ‫Then you see it in a whole window, in a great window. 43 00:03:11,740 --> 00:03:22,390 ‫And then in order to open up the toolbox, you can press this control alt x or you can simply go to 44 00:03:22,390 --> 00:03:26,350 ‫view and then here you'll find the toolbox. 45 00:03:26,920 --> 00:03:28,510 ‫So I'm going to open up the toolbox. 46 00:03:28,510 --> 00:03:34,690 ‫As you can see now it's there and I want to drag in a text block. 47 00:03:40,000 --> 00:03:40,870 ‫And we are. 48 00:03:40,900 --> 00:03:41,880 ‫That's our text blog. 49 00:03:41,890 --> 00:03:44,830 ‫And you can see you can change its position. 50 00:03:45,280 --> 00:03:52,150 ‫And now if we drag that up here, we can see that things change up here in the grid as well. 51 00:03:52,150 --> 00:03:59,020 ‫So if I move it around, as you can see, the margin has changed, the text wrapping is set to wrap, 52 00:03:59,140 --> 00:04:06,280 ‫then it's vertically aligned towards the top and towards the left, horizontally aligned towards the 53 00:04:06,280 --> 00:04:06,790 ‫left. 54 00:04:07,030 --> 00:04:12,040 ‫So as you can see, you can play around with the value here and I'm just going to position it more or 55 00:04:12,040 --> 00:04:13,420 ‫less in the center. 56 00:04:13,720 --> 00:04:16,900 ‫And what it simply does, it adds those margins. 57 00:04:16,900 --> 00:04:21,130 ‫As you can see, one on 47 towards the top and 225 towards the left. 58 00:04:21,130 --> 00:04:28,540 ‫So now if I want to change the text, I can simply change the text here or I can double click here and 59 00:04:28,540 --> 00:04:30,010 ‫then change the text here. 60 00:04:30,010 --> 00:04:36,850 ‫So I'm just going to say something like Hello World and if I enter or if I click somewhere else. 61 00:04:36,850 --> 00:04:40,270 ‫As you can see, it has this enter in here. 62 00:04:40,270 --> 00:04:44,800 ‫So I'm going to get rid of that again like that and click to decide. 63 00:04:44,800 --> 00:04:47,530 ‫So as you can see, it's only taking the space that it requires. 64 00:04:47,530 --> 00:04:52,660 ‫So it's wrapping the text here, and that has to do with this text wrapping dot or equals wrap. 65 00:04:53,020 --> 00:04:53,350 ‫All right. 66 00:04:53,350 --> 00:04:55,270 ‫So we will look into example and so forth. 67 00:04:55,270 --> 00:05:01,480 ‫But first of all, let's start this application and run the code and then you will see that we have 68 00:05:01,480 --> 00:05:06,580 ‫a little main window and then we are main window and hello world. 69 00:05:07,600 --> 00:05:12,190 ‫As you can see, this is just a simple text that said here that's set here in our view. 70 00:05:12,190 --> 00:05:14,410 ‫And you can even adjust that. 71 00:05:14,410 --> 00:05:16,000 ‫As you can see, it's not centered. 72 00:05:16,000 --> 00:05:22,420 ‫It's always positioned at the same spot because it has only this margin towards the top and the left, 73 00:05:22,420 --> 00:05:23,710 ‫which are fixed. 74 00:05:24,560 --> 00:05:25,180 ‫All right. 75 00:05:25,180 --> 00:05:29,770 ‫Now, the main window is called Main Window because of the title that it has. 76 00:05:29,770 --> 00:05:31,450 ‫So now it's a little challenge for you. 77 00:05:31,480 --> 00:05:39,100 ‫Change the text to hello and your name and then change the title to my first guy. 78 00:05:41,450 --> 00:05:41,750 ‫All right. 79 00:05:41,750 --> 00:05:42,680 ‫I hope you tried it. 80 00:05:42,680 --> 00:05:43,820 ‫So let's do that. 81 00:05:43,850 --> 00:05:44,960 ‫Let's change the text. 82 00:05:44,960 --> 00:05:49,580 ‫And I'm going to do it in here in the text block dot text property. 83 00:05:50,210 --> 00:05:52,640 ‫And this one will be Hello, Dennis. 84 00:05:52,640 --> 00:05:53,570 ‫In my case. 85 00:05:55,820 --> 00:06:06,500 ‫And now the title should be something like my first guy, my first gooey graphical user interface. 86 00:06:06,500 --> 00:06:13,040 ‫Now let's start that and we are my first gooey and hello Dennis. 87 00:06:13,280 --> 00:06:13,670 ‫Great. 88 00:06:13,670 --> 00:06:19,820 ‫So now everything is set up to drag some more things in here, like buttons and all those great things, 89 00:06:19,820 --> 00:06:23,540 ‫and we will see how to create great goodies in the next videos. 90 00:06:23,540 --> 00:06:25,400 ‫So see you there.