C# WPF Tutorial #3 - Getting Started with WPF

welcome back this time we are getting started with WPF first thing we need to do is fire up visual studio 2022 if you do not already have this please see the description or a link to a tutorial video that will help you get this installed everything you install in that video will cover everything that you need in this series okay next we need to go to create a new project we need to pick WPF application if it's not in your recent templates you can put WPF in the search bar WPF application next name your project so I'm going to say WPF tutorial pick where you want it to be saved push next we do want.net 6.0 and then create give it just a second and you will be ready to go like I mentioned last video our project is created and it's ready to run but instead of a console we're going to get a blank application window you can see we have an application icon a title this title bar is draggable we can resize it it's got minimize maximize and close and that's about it that's about what it comes with just right out of the box so before we jump into actually making this user interface I want to talk about all of the elements in Visual Studio that come along with a WPF project the first thing I want to look at is the solution Explorer just like a console application it is displaying what is on your file system this is your solution file this is your project file these are all of the files within your project we don't need to worry about dependencies right now we don't need to worry about assembly info right now app.xaml we will worry about very shortly but not quite yet so for now let's just focus on this main window file that was created and this main window xaml.cs file that appears to be under it so if we right click our project and go to Open folder in file explorer you can see that mainwindow.xaml and mainwindow.xaml.cs are two distinct files one is a Windows markup and one is a c-sharp source so it's not actually inside the other file but Visual Studio relates them together because the dot CS file is what is called code behind or the interaction Logic for the xaml UI file so what that's going to mean for us is in the xaml file we're going to put things like buttons and text boxes and the height and width of the window and then in the code behind file we're going to tell it what to do when those visual elements are interacted with so if we have a button on this form and the user pushes it this code behind file can tell the application what to do when that button is pressed while we're in the code behind let's clean it up a little bit now that we know that this is the code behind which is the interaction logic I'm going to remove this summary comment and then we can right click and say remove and sort usings and that will clean up our unused using statements giving us a little bit cleaner view so we can see exactly where and what we're doing now if you're familiar with console applications you may be wondering where is the entry point of this application where is my main method well it's not this Constructor it's actually generated automatically on build within this app class so down the line if you need direct access to your main startup method you have to override it in this class and we'll get there later I just wanted you to be aware if you were curious okay now let's jump back to our xaml file and take a look at some of these elements so on the left you can see that we have a toolbox which has common WPF controls and then all WPF controls and now these are the built-in controls that you can use immediately in your application by adding them to your xaml file so now let's look at the xaml file when you open a xaml file up you should have a two pane view the top being the designer and the bottom being the xaml markup this is what you should see when you launch your application and this is what creates that view now if we look at these tiny little button controls it may be hard to see on the video but you should see design and xaml and you should see an up down arrow in between them that says swap panes if you want to make the xaml on top and the designer on the bottom you can do that and then also if you look on the right hand side you should see little bitty pane icons which one is vertical split and one is horizontal so if you have a widescreen monitor you may want to go with a vertical split or you may want to stick with the horizontal split and that's just personal preference and what kind of monitor you have to make your life a little bit easier okay now all of these controls over in the toolbox like I said before we can use in our xaml file and you can actually drag them straight onto your UI but I do not recommend this and I will tell you and show you why okay let's keep it classic and go with hello world so let's look at our common WPF controls for some way to write hello world on our UI well we have a label which we could use that would be perfectly fine but we're not labeling anything we could use a text box but those are used for taking user input so let's use our text block which is just a control used for a block of text so we could take this and we could drag it somewhere onto our UI so let's drop it right there now you can see that added a xaml element or a text block which opens a tag and it has some properties like HTML Properties or XML properties and then it has a closing tag and that creates the text block on our UI but since we dragged and dropped it on our form you can see it automatically added properties for us like horizontal alignment vertical alignment and margin well this margin means we're always going to be 74 from the left 49 from the top 0 from the right and 0 from the bottom which are also affected by our alignments so by dragging and dropping it it has automatically assumed that we want it in that position all the time which is rarely the case because if we run this you can see it's where we put it but if the user resizes the window it doesn't move and if they shrink the window it doesn't move and most of the time if we have a UI we want it to be responsive based on how the user sizes the window generally we want these things to move so if you drag these controls to the main window you need to be very aware that they are going to do these kinds of things for you and then you need to adjust them I will throw in that you can turn on grid lines and you can turn on snapping to grid lines and that will make your dragging and dropping and moving of your elements a little more accurate but still in my opinion and again it's just an opinion I would much rather not drag and drop and write the controls myself so let's do that let's remove the text block that we drag and dropped and let's add our own I'm going to open a tag I want a text block and then I'm going to close the tag and now we have a text block we need to add text to it so it will show up so we'll say text equals it automatically adds a string for us in which case we can add hello world so now you can see our text block showing up now say we want the font size to be bigger we could say size let's make it 75. and now let's say well we don't want it in the top left corner all the time let's put it in the center of our screen so we can say vertical alignment center horizontal alignment center so now we have created our own element and we have sized it exactly where we want it to be so when we run this it's always going to align it vertically and centered so when we move our UI around resize it it's going to be exactly where we want it to be and the intentionality of writing this makes sure that all of your elements are always in place and as you can see it really doesn't take that much time honestly I think it takes longer to drag and drop it and then go backwards and fix it than it does to just write it yourself congratulations you created your first WPF application with a responsive UI element now if any of this seemed like too much confusing markup anything like that please don't feel overwhelmed we are going to be using this a lot making plenty of these elements with plenty of properties and we're going to be diving into responsive design and complex layouts so don't worry if this is a little bit too much for now it will get easier with time next up we're going to be diving into the code behind and learn how to do some basic interactions with our GUI so thanks for watching everybody I do appreciate you I hope this is helpful happy coding and as always until next time take care

Channel: Kampa Plays

Views: 44,638

Keywords: C#, WPF, Visual Studio 2022, Hello World

Id: 4DZZadT2RPs

Length: 9min 10sec (550 seconds)

Published: Thu Nov 17 2022