‫Welcome back to the WP EFF chapter.
‫In this video we are going to set everything up for the Helloworld WP F application, so therefore you
‫need to open up the Visual Studio installer and then here you'll find installed and your Visual Studio
‫community 2017 and here simply modify or click on more and then click on Modify that will get things
‫ready and then you can install workloads.
‫And here it's important to also install the dot net desktop development workload.
‫This will allow you to build WPF, Windows Forms and so forth.
‫So if you don't have that, simply search for WP F in here or search for the dot net in here and install
‫the dot net desktop development.
‫Once that is done, you can close that up and you can go ahead and open a new project.
‫And now after having installed that, you will see something called WP, PHP dot net framework here.
‫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
‫WP f01.
‫And now let's go ahead, let's open that up and the designer will load and then you will find this main
‫window XAML file.
‫And now you might wonder what XAML file is and what this whole thing here is.
‫Well, that's our GUI graphical user interface.
‫And here we can drag in things such as a text box, or we can drag in buttons, but we can also do that
‫in the HTML code.
‫We will look into example a lot more in the next videos, but for now, let's just create something
‫in here which is a hello world text and therefore you can open up.
‫The toolbox on the left hand side, and here you will find all the different controls and so forth that
‫you can drag into your main window.
‫As you can see, it's called Main Window, and if you search for this title, you will find it in here
‫in your example as well.
‫So as you can see, it's split up here.
‫There is example part and there is the design part.
‫So this design window is what you can see here.
‫And then there's this XAML window which you can see here.
‫And this is pretty much the code that makes up this window that you can see here.
‫So it's using multiple namespaces up to here.
‫Then it's the main window class.
‫That's pretty much the class that we use here.
‫As you can see here, main window that XAML and there is a code behind class.
‫We will look into that in a second.
‫And then there is the title height and width.
‫So we define the width of our window here we define the height and of course, this title here at the
‫top.
‫Now let's open up the design again.
‫Let's click on design.
‫You can even double click it.
‫Then you see it in a whole window, in a great window.
‫And then in order to open up the toolbox, you can press this control alt x or you can simply go to
‫view and then here you'll find the toolbox.
‫So I'm going to open up the toolbox.
‫As you can see now it's there and I want to drag in a text block.
‫And we are.
‫That's our text blog.
‫And you can see you can change its position.
‫And now if we drag that up here, we can see that things change up here in the grid as well.
‫So if I move it around, as you can see, the margin has changed, the text wrapping is set to wrap,
‫then it's vertically aligned towards the top and towards the left, horizontally aligned towards the
‫left.
‫So as you can see, you can play around with the value here and I'm just going to position it more or
‫less in the center.
‫And what it simply does, it adds those margins.
‫As you can see, one on 47 towards the top and 225 towards the left.
‫So now if I want to change the text, I can simply change the text here or I can double click here and
‫then change the text here.
‫So I'm just going to say something like Hello World and if I enter or if I click somewhere else.
‫As you can see, it has this enter in here.
‫So I'm going to get rid of that again like that and click to decide.
‫So as you can see, it's only taking the space that it requires.
‫So it's wrapping the text here, and that has to do with this text wrapping dot or equals wrap.
‫All right.
‫So we will look into example and so forth.
‫But first of all, let's start this application and run the code and then you will see that we have
‫a little main window and then we are main window and hello world.
‫As you can see, this is just a simple text that said here that's set here in our view.
‫And you can even adjust that.
‫As you can see, it's not centered.
‫It's always positioned at the same spot because it has only this margin towards the top and the left,
‫which are fixed.
‫All right.
‫Now, the main window is called Main Window because of the title that it has.
‫So now it's a little challenge for you.
‫Change the text to hello and your name and then change the title to my first guy.
‫All right.
‫I hope you tried it.
‫So let's do that.
‫Let's change the text.
‫And I'm going to do it in here in the text block dot text property.
‫And this one will be Hello, Dennis.
‫In my case.
‫And now the title should be something like my first guy, my first gooey graphical user interface.
‫Now let's start that and we are my first gooey and hello Dennis.
‫Great.
‫So now everything is set up to drag some more things in here, like buttons and all those great things,
‫and we will see how to create great goodies in the next videos.
‫So see you there.