C# Tutorial 19 WPF & XAML

well hello internet and welcome to part 19 in my c-sharp video tutorial and this part of the tutorial we're going to start talking about GUI interfaces so we're going to talk about WPF zamel properties message box event handling resources layout managers and a whole bunch more I'm going to give you a rough overview of a ton of different things in this video and then in later videos I'm going to create some applications like always all the code is available in the description underneath the video and I have a lot to do so let's get into it okay so the WPF or Windows presentation foundation is going to be used to create graphical user interfaces like I said and zamel which is going to see a lot of which stands for extensible application markup language is going to be used to create the UI using sort of something that looks like XML and as you're going to see sam'l is going to allow you to define buttons boxes animation 2d 3d graphics and a whole bunch more but we're not going to get into all those different things right now I'm going to get in here and just first off show you how to start one of these or create one of these WPF projects you're going to go to file and new project and then you're going to come down here and open up visual c-sharp and you're going to open up Windows classic desktop and WPF app like that and you're going to click on down here and we're going to give this a name so I'm going to call this WPF tutorial and that should work and I'm going to hit OK alright so the first thing is going to open up you're going to see main window dot zamel and then your half main window to exam about CS this was going to be where the code is and this is going to be the presentation layer and if we move this down here you're going to see all of your zamel code so let's move that up and then I'll go through basically you don't need to worry too much about all of this stuff right here I'm not going to get into it that much right now what this guy right here is doing is defining the namespace that all of your code is going to be under main window is going to be the name for your little window you have right here and of course height and width is going to define the height and width of your window and grid is going to open up by default that's going to be your default layout manager we can jump over here and look this codes going to see it loads all these different modules inside of here and this guy right here is going to initialize and display the window whenever you run your application now you're going to be able to come in here and do a couple different things you're going to be able to change the title for example for your window just directly inside of your code so you can change this to a low world or something like that and you can do a whole bunch of different things you can see here as I hit the dot it shows all the different things I'm going to be able to change you can see there is a lot of them so what I'm going to do is just change one more thing just to show you something else I'm going to show you how to change the start up location and we're going to define window start up location and we are going to say that when our application runs we want it to run in the center of the screen now I'm going to jump back over into sam'l and open that up and like I said you're going to be able to come in here also and define the title the size whether it can resize or not I'm going to go and just change couple these different things for us so along with height and width and the name which we changed over in the code we can say we want to define the resize mode and let's say that we want this to be set to no resize that means that they can't resize it and like I said you can see all the different options as you type this in directly we can have size two contents and this is pretty much I'm going to cover all the different things you can do inside of here in regards to the application itself and let's say size two content and have that set to whatever the width and height of all the components are inside of here you can define that this will be the topmost window at all times no matter what opens up inside of it I'm going to set that to false because that can cause a little bit of problems but that is an option that's available to you I'm going to define the windows state and you can see here like I said it's either going to start off maximized minimized or normal which is going to be whatever your height and with this you could also come in here let's say I wanted to come over and I wanted to create a icon I could come in and let's say add and go and get a folder inside of here and we're going to call this resources and then what I did was inside of Windows I searched for an icon file and I just copied and pasted it or I'm going to paste it inside here so I'm going to say paste and you can see right there favicon dot ICO you can use any icon you you can find that you have tons of them on your computer so just search for one of them and then I will be able to come in here and set the icon for it also so let's change this to icon equal to and then you would go dot /and resources which is going to point at that resources folder that you just created right there and then favicon and ICO and that's going to set the icon for your application you could also do let's say we wanted to change you can do so many different there's so many events on what I'm going to do here is go mouse move and I'm going to need to automatically create an event handler it's going to change the title to the XY position of wherever the mouse is moving so I'm going to just click on this guy right here and you can see window Mouse move shows up right there I'm going to save that jump over here and you're going to see that window Mouse move shows up right inside of here and now we can define exactly what we want to do inside of there whenever the mouse moves and what I specifically want to do inside of here is like I said I want to change the X and y position and display it in the title and I can do so just by referencing the title like that is equal to e which is our event get position and get position like this and then we can go this which is going to be our mouse and then let's convert it to a string and we're going to do a whole bunch of these this is just something cool well I just threw that in there let's just run it and see what happens all right so the application is going to load whoops can't do that yet I'm gonna have to actually come in here and throw some content inside of our application before I can run that so let's come in and let's change a couple different things here I'm for ado that let's come in and I want to talk about resources a little bit because I want to go and pull some resources I'm trying to cover a bazillion different things now you're going to be able to store data as a resource and use it over and over again just by coming in here and going window resource like that and then we can throw a string inside of here so we'll say something like this string X and then we'll go key is equal to and this is just going to be like the name that we're going to be referencing this string ass so hello again get rid of that extra quote we have there and then inside of here we can put whatever our string name is and I'm going to have this be hello again and then just save that and let's change this to sis and then this is give us an error because we need to load some things so we're just going to check on that right there and what we need to load is exactly what it shows right here so I'm just going to say preview changes and then click on apply and that's going to go away all that's fixed now we're going to be able to use resources and like I said before grid is a layout manager in which there are a whole bunch of them there is also the stack panel which is what we're going to use right here you can see that automatically updated both of those little tags and there's also the canvas and the dot panel which I'll show you here is the tutorial continues now we're going to have the stack panel set up so that it is automatically going to stack every single component that we put inside here and this is going to look ugly but don't worry about that so I'm going to go orientation is equal to and let's just have it set up for vertical so that everything is going to show up vertically on the screen all the different components and let's start throwing some components inside of there so we can come down we could either type in let's do it both ways so I could come in and I could do a text block like this and then let's have the you're mainly going you're not going to use the stack panel that much you're normally going to use it inside of other layout managers but I just want to cover all of them so what we're going to do here is have vertical alignments be equal to Center and there that is another thing that's neat to know is you're going to be able to change all these other different things over here in the property section so let's close us off at the end there and then you're going to see all the different layout options that we have here orientation vertical and blah blah blah blah blah blah blah but I'll get into those as we continue so going to go text wrapping and have it all wrap on the screen that makes sense for me I'm going to throw some text inside of here this is going to be the content that shows up and I'm going to use hello world just to do something different and let's do vertical alignment and let's set this to top and then just as an additional thing let's go and set the font size and let's make that equal to 40 and as you can see as I'm typing all this in it's automatically going up there on the screen we're also going to be able to come in here and use the resource that we defined right here this string right here and how we can do that is come down inside of here and let's just do another text block just to do something that's just very easy and then here if we want to use that text block instead we're going to go text and then inside of the quotes we're going to say static resource and string hello again is going to show up which is the name that we gave that resource of course we can set the font size and all the other different things we have here and let's have the horizontal alignment also be centered one rather than type all that out like this and then we'll close off that tag and you can see how low again shows up there we can also come in and let's open this up down here and let's click on toolbox that's what I'm clicking on right there we can also drag and drop these guys there's button I'm going to drag and drop it up here so just drag it up onto your screen and drop it it's automatically going to show up right there I'm also going to be able to define other things inside of my resource section like let's say I want to default for all the buttons that I use I can do that so let's come in and trying to cover pretty much everything how you define default styling for components is you come in and you say style and then you define the type of component you're going to be working with which is going to be button and then close that off and then inside of here you define all your defaults so I'm going to say setter here and I'm going to define the property that I want to set as a default and let's say that I want my margin to have a value that is equal to one I can just do it like that and close that off let's do this for a couple more different things here just so you can see a couple of them so also define the font size and as I'm changing these you're going to see the things up here are going to change as well so let's change this to 40 and let's set let's also do vertical contents alignment it's already going to have a value of center but I'm just doing it and then you can also change the font family so let's go font family and let's set this to consoles alright so there we go went and change a couple different things you're going to see that they as I change the styling inside of this resource section that is automatically going to update all of the buttons that are available for us to use so let's come down here and let's change this name I'm going to change this to close window I'm going to show you how to go and track an event and how to close your window using a component let's go and give this a name though first so that we can refer to it and how you do that is by going X colon and then name and then this is going to be equal to I'm just going to keep it simple and call this button one commit here and define a couple other different things let's go height and let's get rid of the content section here let's go height and let's define that as 40 width is going to be equal to 90 get rid of that extra quote that's causing problems see how that changed horizontal alignments and let's make that sensor content is going to be equal to closed window because that's what it's going to do you can see it's not quite fitting so why don't we go and change that a little bit more let's change this to 200 up it needs even more space all right so let's go change this also changes the 60 I'm just doing this on the fly so a little bit off and let's change this to 250 a it needs to get bigger let's change it to 300 what I'm doing is overriding the defaults that I set up in the resource section for this and then let's also come in here and define a click event so we just type in click and then this guy's going to pop up inside of here and I can just double click on it it's automatically going to save that and put over in my code section where I will be able to update it before I leave though I'm going to show you a couple other different little tricks we can do let's throw another button inside of here and why don't we just go and copy this instead of typing it all out I'm going to grab this guy right here copy it paste it inside of there and I'm going to call this I'm going to change this a little bit we call this button open file to show you how you can open the Open File dialogues to automatically open up files so let's change the content on this to open file now let's change the click event here to button open file click and then I'm also going to show you how you can open the save file dialog so let's paste that inside of there and let's just change this from open to save file and then change this to button save file alright so we're back over in the coding section and let's set up button one so this will work for us what I want this to do is whenever the user clicks on it I'm going to open up a message box and tell them that the app is closing and I'm going to close the application so to open a message box you just go message box like that and show and then we're going to say something like as a app is closing and that's going to open up right before the app closest and to close your app you just go this and close and there you go you just close that window now because I went and defined those click events without allowing the application or visual studio do that for me I'm going to have to come in here and actually create these on my own but they're pretty simple I just copy this so it's going to do basically the same exact thing so let's paste that inside of there and then let's just change name this so this was change that to button open file click that was the name that I gave it over in this am will file and if I want to open up a open file dialog I just go open file dialog that's going to give me an error saying that doesn't exist so I'm going to come down here and go show potential fixes and this is the one I use I need and it's automatically going to go and put that in there for me so now what I can do is go open dialog equal to new and we can go open file dialog to create that and then to open it we can just go open dialog like that and show dialog and I will open that up and you'll see what that looks like here in a second and we also we're going to show you the save file dialog so let's open that up and just change this to save and everything else stays exactly the same except this is going to be saved file dialog to change that and let's change this one and let's change this as well and it'll change this one also save dialog show dialog is still going to be the same as it was before and now I did a whole bunch of different things so let's run it too and let's see how this works out oh there's an error what was the error that the lien windows is not containing a definition for button open file click make sure that it went and got the right module inside of here I I thought it was going to give it to me oh yes it did there's that one right there I see what I did inside here I have to go button open file click and button there now it should be fixed and there you can see it open if I click on open file like this it's going to open up the open file dialog like you've seen before man we'll just hit cancel right here I left that as open file no big deal this is the save as dialog you can see how that works oh you can also notice here that as I'm moving around the X&Y coordinates are changing up there in the title kind of neat and right here you can see that if I go and click on close window the message box is going to open up I'm going to click on OK and the application is going to close so a whole bunch of different things we've covered right there now I'm going to go in and focus in on the different layout managers we have available to us so here I am back in the Samuel area and what I'm going to do is I'm just going to get rid of the stack panel here all together delete everything that we created and I'm going to replace it instead with a canvas now the canvas is normally not used on its own but it is quite useful and I'm going to set the you can see all the different colors that are available that to automatically pop up inside there I'm just going to be simple and use grey inside of here you can see everything changed grey up there you're going to be able to come in and adjust a whole bunch of different things and what makes the canvas layout manager different is it allows you to place components and absolutely wherever you drag-and-drop them and it is not automatically going to dynamically resize if you resize the window everything just going to stay exactly where ever you put it so here I'm going to define my height as 350 just do something and my width is going to be 525 it's basically the same as the window that's going to be there and then inside of here I can go and drop whatever I want so let's open up the toolbox again and let's say I want to get a label so there's a label right there I'm going to drag it up here and wherever I put it that is where is going to stick say you can see it's right there just as isolated in so let's change it a little bit let's change this to a name and let's you can see as we move this around canvas left and canvas top we're going to change everything's based off of this zero position up here in the upper left hand corner and let's go and get a text box also so it's open this up and get a text box drag it up here and drop it just wherever you want to put it that seems perfectly fun and you can use the arrow keys to position it if you think it looks better in some other position and for this guy I'm going to change the text right here and I'm going to change it to enter name just to add something in there and I'm also going to add a name property to it so that I will be able to grab the information out of it that's inside of there and the name when I give this is user's name and it let's also come in here and grab a button out of here so let's grab a button like this guy right here and throw it up inside out of there you can see my styling isn't working all that wonderful let's go and get rid of it I just put that in there just so that I could cover that and show that it was possible to do it so let's just go in here and delete the default styling for our buttons there you go now it looks a little bit better and let's change this content right here to send and what I want to do with this is whenever is the user clicks on send I want them to automatically open up a dialog that is going to say hello whatever their name so I'm going to add another click event to this so I'm going to say click is equal to and let's go and create something for it so let's go new event handler so just double click on that and it's just going to be button click I'm going to change it to send button click though bounce over into the code and one thing I'm going to have to do inside of here is I'm going to put a string inside of here that's going to hold the user's name so just users name is going to be like that to find outside of the main window and then let's find button click and let's change it to send button click and then to get whatever the name was that they entered inside of there I just reference its name users name text and I'm going to save it to my string we can come over here and look at it again users name is what I gave this see users names right there so let's come back and side here and then I'm just going to output it in a message box exactly like that so let's save that let's run it see how it changed you can see right here it opened up if I come in and select this let's go to that and type in Derrick and click on send it's going to say hello Derrick okay so another way to grab text out of a component and use it to display in other components and now why don't we take a look at the wrap panel so I'm going to delete canvas just like I did before and we're going to type in wrap panel and open that guy up now the wrap panel is going to allow components to flow as the window is resized and kind of like some of the other ones that I've talked about layout managers anyway most of the time wrap panel is only going to be used as a sub element but I just want to show you what it looks like of course we can come in here and change the background and tons of different properties let's just set this to gray again just to be a little bit boring and I'm going to set my orientation in this guy to horizontal that's just going to define how it's going to wrap the information and then I'm just going to go in here and throw a couple different things in so I'll go label and contents is equal to and we'll say name and close that off I'm going to jump over into the code first because I foresee an error that says this doesn't exist anymore we're just going to delete that all right all gone and then we'll throw in a a text box again and name is equal to and let's throw a user's name inside of there just to do something and the text for this guy is going to be enter name just like we did before whoops now startup enter name there we go and let's define our width to be equal to I don't know just 150 there we go and we can also throw a button inside of there just to add a little bit more content and the content for this is going to be send and then we'll go define our width again is equal to 75 and we will define click now we don't need to define click event all right so let's close that off and then you can see what it looks like or how wrap panel works let's start that you can see it's right here and if we come in here and resize it whoops I said no resize all right let's close that up let's jump like inside of it so right here where we have our window remember I said right here no resize let's just get rid of that all together all right save that let's run it again trying to do 50 different things here once alright so there it is now we will be able to resize it so now you see how that works and you can also see how the wrap pane will see how it has the window size changes it's automatically going to fill all of the content all right so another layout manager and for the last layout manager I'm going to cover I'm going to talk about grid panels and the reason why you're going to use grid panels a lot is because they are very flexible and everything is basically just going to be pasted or placed inside of cells that are made up of a whole bunch of columns and rows so let's come in here and let's get rid of our wrap panel delete that and there's a good reason why they give you grid by default inside of Visual Studio whenever you're working with your layout manager so what I'm going to do here is I'm going to basically how you define how the content is going to be set up is you add rows and columns by adding things called row definitions and column definitions and I'm just going to go in and start making them so we're going to come in and we're going to go grid and then we're going to a row definitions and then inside of here you're going to define what's going on so what I'm going to do is try to define or create a calculator so I'm going to go row definition and I'm going to say that the height is going to be equal to star now you can put a fixed height inside here which would be a number you know like 20 30 whatever you want it to be you could put a star in there and what that means is it's going to take all of the spaces available or you could type Auto inside of there which means that it's going to take all the space needed by the component so there's a whole bunch of different options available to you now for my calculator what I'm going to do is I'm going to need I'm thinking six rows so let's go create six of these and you can see they automatically drew them on the screen up there so there's six rows and then what you need to do after you're done with that is to find the number of columns you're working with so I'm going to say grid and column definitions there that is and now you need to define all the column definitions how many columns you want I'm going to say I need four columns so I'm going to say column definition and I'm going to say that the width is just like before going to be equal to star so it's going to take all of the space that's available and then I just come in here like that and paste in I said for there's four of those and you can see how everything is laying itself out there now what you need to do is come in and define where the components are going to lie inside of your grid system I'm going to don't drop this down here so let's say across the top I'm going to want to get a text box just because I can do it here let's go and drag and drop a text block up inside of there so it's fine text block or I'm going to use a text box so I'm going to drag this up here and I'm just going to drop it inside of there you can see how it was placed inside of there now what I want to do is come down here and actually define what's up with this so I'm going to get rid of the margin altogether because that's kind of productive what I'm trying to do or actually let's change it a little bit better let's say that I want to define that the margin is going to have two pixels of margin on the left and the right and five pixels of space on the top and the bottom so we can just go to five like that then what I need to do is define exactly how it's going to layout inside of our columns so I'm going to say that I want to use grid row and that is going to be equal to 0 and then grid column span that means how many how many columns it's going to take up I'm going to say that it should take up 4 so it goes completely across the top of the screen then I'm also going to come in here and get rid of our height property and get rid of width so that automatically is going to fill all the space and now get rid of vertical alignment don't need that get rid of horizontal alignment don't need that either and now you can see the text box I created where our numbers are going to go fills in all the space and there's the margin and all the other stuff so now what I need to do is come in and actually start putting in the buttons that are going to go underneath of it so I can drag a button up here if I'd like to and then resize it sometimes that's more trouble than it's worth I'm just going to go in and create a button completely from scratch so I'm going to say button and the content for this button is going to be the number 7 and here I'm going to say horizontal alignment and I'm going to set that guy to left this is going to start in grid Row 1 which means this is 0 this is the number 1 row Here I am going to use the vertical alignments and I'm going to set that to top I don't need to define column of span because by default it's only going to work with one column and I'm gonna say that the width is equal to something like 130 think I'm dividing that up right and the height is going to be somewhere around 50 and I'm going to close that off and there you can see through in my number and it's pretty much lined up pretty well ok so now I need to do that for a whole bunch of additional buttons this isn't perfect but it's you know good for what we're doing so I'm going to need 1 for 8 I'm going to need one from 9 and I'm going to need another one for the plus sign so I'm going to change this to 8 I'm going to change this to 9 I'm going to change this to the plus sign and then to get this to actually work I just have to define what column for these for all the additional ones I need to define the column that is going to be resting inside of so right after this I'm going to say grid and then call them and well I don't want to overwrite that so let's get rid of that space like that and grid dot column there it is and I'm going to have this go in the first one and you can see right there how those are all lining up I'm going to copy this and change the other two as well let's change this to two and then come in for our last one and change this to three and there we go got our text box and we have all of our numbers now what we're going to be able to do is just copy this because we're going to use the same format over and over and over again so let's just copy every single one of those copy paste that inside of there here I'm going to get a grid column and I'm going to change this to zero for our very first one so let's put that inside of there change that to zero right like that we have to change our rows every row now is going to be two so let's go and change all of these to two two and two and then we need to change the numbers that are assigned to all of them as well so let's go up here and this is going to be four this is going to be five and this is going to be six and then we are going to come down here and throw in a negative and you can see all of those are all lining up and if we run this of course I could do all the additional ones but I think you're getting the point there is our calculator there's our textbox and there are all of our buttons that we will be able to use to interact with our application and you can see as I resize them it is automatically filling in all of the different space ok so there is a rough overview of a whole ton of different things about how to create GUI interfaces using WPF and zamel inside a visual studio with c-sharp and of course I'm going to make a whole bunch of different applications here demonstrating exactly how this works and like always please leave your questions and comments below of the last till next time

Channel: Derek Banas

Views: 165,224

Keywords: C# WPF, C# XAML, C# Event Handling

Id: G-BRSwClK_4

Length: 30min 45sec (1845 seconds)

Published: Sat Mar 11 2017