Create your first WPF app on .NET Core - .NET Tutorial

- Hi, my name is Olia Gavrysh, I'm Program Manager on .NET team at Microsoft, And in this video, you will learn how to create your first WPF application On .NET core. WPF is also a desktop application, like WinForms that has more fluent user interface, but also more complexity in creating that interface. Let's take a look at it together. I will open Visual Studio. I'm using Visual Studio 2019 and click create new project. In the search box, I will type WPF and you can see there are a few options WPF app for .NET Framework and WPF app for .NET Core. We have a separate video where I explain what is the difference and what to choose for your applications. In this case, I will go with .NET Core and click next. Here I can provide my project name, location, solution name. I will click create, and .NET Core will create an empty WPF application for me. Once everything is loaded, we can run our app. Let's run it by clicking on green triangle and see how application looks in action. Here, you can see an empty WPF form that looks very similar to empty WinForms form, except for this area that is designated for debugging. It is shown because we are running it in Visual Studio, and once you run it outside of the Visual Studio those controls will not be on the form. I will close the application which will automatically stop the execution, and let's take a look at our files. They're showing in solution Explorer. And if it's not open by default in your Visual Studio just search for solution Explorer in the search box. Here you can see the solution, our project WPF App3 and files that are located in this project. Similar to WinForms, we also have dependencies here, but unlike WinForms we have app.XAML and main window.XAML. App.XAML is a starting point for our application and main window.XAML has description of our main form and all controls that will be on this form. You can see it similar to WinForms designer on the upper part of my screen was a toolbox on the left side. And if toolbox is not open by default in Visual Studio you can also search for it in the search box. On the lower part of the screen you can see a XAML code that describes what is on our main window. So you can also add controls similar to WinForms by dragging and dropping them on the form. Let me add button and text box, but this practice is not recommended for WPF because when we look in the code we can see that all the dimension and location is hardcoded but WPF is more powerful. It provides fluent design where you controls can be adjusted depending on how big or small your main window is. So the good practice is to not hardcode any pixel values. That's why I'm going to remove all that and instead use a grid. All right, you can see that our button and TextBox leaves inside of the grid. So we're going to draw a grid and then put controls inside the cells in that grid. So grid has a concept of column definitions and row definitions. We can add column definitions and specify width for each column. Let's say for the first column, we will hardcode it to 40 pixels. There are other options how you can set the widths for the column. For example, you can say auto, that way, it will allocate exactly the space that is needed to show the controls inside that column. In our case right now, column is empty, so it is defaulted to zero pixels. There's also options to say, width equal star, that will default it to all the rest space on our form. Similar to columns, there is a concept of rows. So let's say grid.rowdefinitions and let's add some rows. For rows, similar parameter will be height. And I will set this one to 40 pixel visible and the rest I will set similar to my rows, to auto enter star. Now, for each of my controls I can assign which cell they will live in. So for my button, I will say grid column equals one and grid row equals one. This will put our button in the cell with index one and one and the numeration starts from zero. Now, similar for TextBox. I go send, set it into the cell two and two. Now, what just happened? The second row with index one automatically resized by the default size of the button. And I'll my testbox automatically resize by the size of the third cell. All right, let's run it and see how it reacts to resizing of our form. As you can see, the borders travel with the size of the form. All right, let's add some functionality. Similar to WinForms, I'm going to double click on the button, which will take me to the place where I can write code that will be executed once the user clicks on the button. Let me name my TextBox. I will give it to name, Hello, TextBox. And I will call this TextBox here, and assign the appropriate to text to whatever I want. Hello, WPF .NET Core. I will end every line with a semicolon. All right, let's see how that works. And now we can click on our button. Hello, WPF .NET Core. Perfect, that was your first WPF application on .NET Core. Thank you very much for watching and happy coding.