Intro to WPF: Learn the basics and best practices of WPF for C#

so again this is Tim Cory in this video I'm going to introduce you to WPF before I do I just want to mention a couple of housekeeping things first if you haven't already subscribe to my email list you might want to pause this video just for a minute and do that the link is in the description my email subscribers hear about things first and they get to weigh in what comes next I also reward my subscribers with discounts and special offers on paid courses second you'll also notice a link to my facebook page down there I'd really appreciate if you would head over to my facebook page and just give it a like as well that's the place where I'm going to be giving more specific feedback on what you want to see next in these videos if you want your content be better aligned with your directions developer Facebook is a place to go to give that feedback all right so enough housekeeping let's dive in a DPF here I have Visual Studio 2017 now if using 2015 or earlier it's probably about the same but just know that I'm the latest version here and the latest version is free so if you go to Visual Studio calm you can find the Community Edition for free there so go ahead and get that if you're able now here going to do it rest start a new project like on a new project right down here now you could just look for do PDF here or you search for it here on the left but the tricky thing here that you'll make sure you avoid is getting the wrong version of APF note the seven or eight different options we have here we don't want most adoptions back you only want one and the one you want is actually the top one the WPF app dotnet framework and it's in visual C sharp there's also one here note it's for visual basic that's not what you want you can also go to windows classic over to the left templates visual c-sharp select windows classic and you'll find a PF app tres Alexis de APF cap net framework let's name this WPF demo now I'm going to give my project name and my solution name the same name just because it's easiest that's the simplest way for one one project one solution but I would recommend that if you're going to create a you know quote unquote real application or going to you know move forward this in a more professional manner well I typically do is say something like WPF UI or all caps APF UI looks a little funny but it's an acronym as - ekans actually and that called this the you know demo a project or something like that just you have a solution name is separate from your user interface because your user interface could change and also it doesn't represent your entire solution if it's named after just your user interface if you really should have a class library and should have a lot of stuff possibly and so the project name and solution name usually should be different but in this case I say WPF demo and the same solution and we'll hit OK here and create a project now while I'm doing that let's talk about what the difference is between WPF and wind forms this is really kind of same ballpark but the to operate in they're kind of the same ish but they're not the same now if you've seen my other videos you're pricing a lot of wind forms wind forms is what came first and it's also the easiest to use now why create WPF well Microsoft wide to have a form application that could be more modern and feel and wind forms is just kind of limited by somebody the old school stuff is kind of still dragging along with it and they try to make it a little more moderate I try to clean it up they've done a great job but the reality is it's still old school and one of the ways that's really evident is whenever you get into anything graphical with wind forms wind forms to use as GDI which is a way of rendering things it pulls right from the CPU the processor and so it really puts a bird on the processor and slows things down now that you see how he did everything back in the 90s but didn't get video cards and video cards were dedicated to rendering and displaying video and other graphical elements and so DF says well we don't want to base our stuff on GDI we want to use DirectX and actually talk to the video card which means that if you want to you can create a 3d form that is a cube and it spins an air and every side has a different video playing on it and it will work you might need a bigger video card but it will work and that's definitely something you could not do in wind forms now that's not exactly a normal line of business application but there's a lot of cool stuff you can do with that now we're not going to get in-depth into all that really deep stuff but I want at least give you an overview of how to get started in WPF and really understand the basics of what's going on here the other thing that DPF does differently is data binding and data bindings really big in the EPF you can data bind to anything and that's not really true in women forms not as much and so there's there's a lot of power there but it also adds a layer of complexity we're kind of touching that a little bit and finally DTF is it's a little bit more like HTML and CSS in the idea that you can apply a style at the project level or at the forum level or the item level and so we'll see some of those properties right add they were kind of familiar with if they're a little bit different a bit tweet so those are kind of things that make DPF a little different said it's a little bit bigger of a barrier to entry then wind forms is when it forms the drag-and-drop and just get started you can really start in wind forms and day one whereas day PF is a little more time-consuming to get started and so I'm kind of reduce that barrier entry a little bit and kind of see an overview of how WPF works so we've got our form here that we've created this is the the starter form it's essentially form one if your food with the wind forms but this is actually called main window so this is form one and R at the bat if you look just up here at this window it looks pretty much the same as what we're used to in fact if we run this it starts real quick it's going to look almost identical to a wind form application and actually start over here so this is it this is the the blank form looks a little different but it kind of works the same as three buttons up here minimize maximize and close this is extra this is actually a WPF debugging thing and so I'll show you how to turn that off in a minute but it allows it to do some debugging around DPF but this is not actually part of our form and if we were to run this outside of Visual Studio we would not get this black box and you can move it around if you want right like that so let's close this out now and let's look at what our form is made up of now in wind forms the code behind is empty which it is here as well the right click on this and say view code it looks identical to WinForms we have just the the constructor and it has the initialized components it's a partial class that's all there really is to it but if you look we have this extra thing down here and this is where people get a little bit lost or a little bit confused or even scared this is XAML or example and what zamel is is the design system for building this form and it's XML essentially but it's the extensible application markup language instead it's extensible markup language so this is what Microsoft created in order to help us build these forms and so everything you put on this form is going to have sam'l down here to correspond to that element so for example especially had a drag-and-drop and put a button on the form now before we go any further I want you to pause from it and listen what I'm saying right now is this is important don't do this don't drag and drop onto a jpf form that's not how they're designed okay I'll show you how to do it safely but the reality is you should probably avoid it almost entirely and that's the first place which we get tripped up is they treat it like a wind form application come to their toolbox and just start dragging things on that really reduces the power of WPF and essentially it makes it so that you rigidus used wind forms because if you're going to take away all the power of jpf there's no point to it and it's just add complexity for no real reason so don't drag and drop but I did ok and the reason I did I want to show you what this does notice down here in our sam'l we now have this line of text that's actually on pinna so you actually see the whole line of text so you have button and then it says x : aim equals button content equals button that's the actual text into the button this is the name of the button horizontal alignment is the left here's the margin so what's aligned to the left it's kind of margin of this it's got a vertical alignment to top and the width of 75 the reason why drag and drop on to our our window here is bad is because of all of this stuff right here and what is that well it's hard coded locations now again wind forms were used to this we have to have this there's no way of doing this and other than having hard-coded locations but in de PF it's different and to write treat it differently but I want to show you at least the fact that the sam'l changes so imitate us away arrests start over now the very first thing you know about sam'l is the grid system and so that's typically what you have and the form is a grid and a grade can have multiple elements inside of it that's important because certain items can have only one element inside them other elements can have multiple items inside them the grid can have multiple now think of a grid a little bit like an Excel spreadsheet except that right now we only have one cell and that's this entire window so the first thing I do is actually put some grids on here so we can actually have different places to put things whether that is by inside grid and it's importantly a note here if you're not familiar open clothing tags this is an open tag this is a close tag okay the bottom one down it's kind of highlight above them the bottom one down here is a close tag because it has a slash in front of grid so this is an open tag and we have to do things outside of these brackets to be inside the grid so between this bracket right here and this bracket so open tag close tag inside here we need create new items or new elements so we open up our essentially is a less than sign and we say grid dot column definitions notice we have intellisense which is nice intelligence is not perfect in zamel it's a little ugly in some spots but it gets the job done notice when I closed out my essentially I greater than sign here when I close that out it gave me the closed hang this is an open tag now close tag inside here this is the column definitions so how many columns do I have going down here on my grid so the first column must say I'm going to say column definition and I have to give it a width so first I'm going to give here's what I do I give my first and last column a 20 pixel width and the reason why is it creates this nice little border around my form where we don't put things right up to the edge of the form is a little white space I'm going to reform so that's how I do things you don't have to do the same way but that's just kind of my my standard now this is called a self-closing in that we put a slash at the end and now this is both the open and the close so it only has stuff in here to apply any kind of modification to a column definition so this is now defined one column video is a few more times and I'd copy this and paste it but instead of the width of 20 now 20 represents pixels we don't say 20 px like you would in HTML or CSS instead we just say 20 but in DPF we don't typically specify hard-and-fast widths or heights we try to avoid those kind of things as much as possible and the reason why is because a WPF form can be flexible it can grow to fill a space it means they can shrink to fit the space that it has available to it and that's one of the real big improvements that everyday applications get to use it used to be I'm going to date myself here a little bit but it used to be we had monitors that had a screen ratio of 800 pixels by 600 pixels you know something small like that then we have these big complicated forms well the problem was our form may have been designed for a 1024 by 768 screen what happens when you get on a 800 X 600 screen well in wind forms it means you can't see the right-hand side of the bottom of the form that's a really problem because using the bottle of form is where a submit button is and it didn't even put a nice scroll bar scroll it goes just off the screen and as a real problem we actually the designer applications knowing what the smallest screen resolution was going to be and then not making it form any bigger than that and that's really ugly now we shouldn't have that today but there are other issues that come along with screen sizes for example you might have a small form and if you maximize that thing in wind forms all the stuff in the upper left-hand corner and you have this gray space on the rest of screen that's not very pleasant to look at in DPF we can have a more responsive design where the form cap fills a screen however big the screen is or how are small the screen is we can also do things like show more stuff if there's more real estate available to us inside a px a lot of flexibility there but you can't lock it down to set widths and Heights and so as much as possible we avoid set pixels so once you too whenever you see a pixel number so for example 20 whenever you see that in day opf I want you to pause and say is this right and assume it's not now in this case it is correct I want to have that set border no matter how big or how small the window gets that does mean that the window gets to be 40 pixels high by 40 pixels wide we take nothing but border and you know what at that point yeah you probably should because it's a stupid small window there's not really a point to it so that's why I specify for my border but I don't want my border here I want to have a normal column and so what I specify is Auto and what Auto allows me to do is the EPF says we're going to handle the width of this column based upon whatever you put in it and so you put some really wide in it but company-wide if you put something kind of small in there the columns me a small think of it kind of like an HTML table if you're familiar those so the table would get bigger as small in Japan what goes inside them so it's we're gonna have for our normal column so I copied it and pasted a couple more times that's actually make it a little smaller now paste it one more time we're going to change this instead of Auto I'm gonna put star now what star says is that it's going to take up the rest of the available width notice up here we have is one star now and so we've got a width here of 20 so that's this column right here we have three autos they're not really showing that's because they're all in this line because there's nothing in the column therefore their width is zero and then we have a star that takes up the rest of the space and I put that on the right-hand side so it goes far left to right now the reason I did this is because otherwise I didn't have a star column these Auto columns would all take up the same amount of space and kind of fill in the gaps here that's not really want I want to have one column fill in the rest so how does one column here it takes up the rest of space on my form and so it will grow or shrink depending on what the other columns do that's perfect and I'm going to take this copy that's first one and put at the end now I have my column at the end again with at 20 pixels of white space and that's all there is to defining columns you have your grid column definition inside there you define the number of columns you want what the sizes are going to be now just you know you can have multiple star columns if you do each column will take if you have two each column take half of the leftover space if you have three each day a third and so it's just kind of divvied up whatever is left over the number of star columns available and I just use one usually also note that the number of columns I put here is at this point kind of just by feel I think I'll probably need three columns at least so I put three here but you know what if I need more I have copy and paste and put more in now we'll see how to reference these in in a little bit but for right now as well you know that we reference these columns on zero based counting array so this is column zero column one two three four and five so zero through five there's a total of six columns so that's our columns now if you are thinking ahead you'll probably think okay that means if we have columns we probably have rows and you are correct and you can probably guess how we define rows grid dot row definitions inside here we say row definition instead of height I'm sorry to say width because it's not a column it's a row and rows get height so again what I do is say 20 now no you can't you cannot hit the double quote here it just adds one in c-sharp it would kind of skip over that since you hit double quote and notice there but you can't in zamel it's one of those shortcuts that I wish they had in zamel place haven't gotten around to yet and again this is a self closing riddle to close it out and we'll do the same thing here we're going to copy and paste this we're going to change this to the Otto same deal here Otto works the same way it just in rows instead of columns and usually a few more rows and I do columns just because we have more stuff going on and then the last one the second last one hit the star and then one last one I said again to our 20 so now we have our first in our last row our 20 pixels high we have one two three four five rows there Otto height and then one is that star height so we have our columns we have our rows that's great now it's at this point you're probably thinking man we're not using our screen real estate very good let's see if we can change that up and we can we have these buttons over here let's zoom in here excuse buttons right here why has a horizontal line as we're currently highlighting and what that indicates is this configuration right here or we have our zamel on the bottom and our design at the top or vice versa in fact we're going to switch that using these this swap button here so we could switch that around and totally mess you up dokey to the way it is so that's this line this horizontal line over here represents this relationship right here whereas the vertical line right here represents a vertical split and that looks like this that's usually a little bit easier because usually have a widescreen monitor until you have a little more space now what I typically do is I'll try and move my window around and then shrink down one side you can do that so you can actually still see our whole window but have a little more real estate on the right to work in our zamel it's not a perfect world but it's a little closer and if you are not dealing with the the increased font size that I have in mind for for video you'll probably I'll see a little more on your screen than I do on mine so this gives us a little better view of zamel oh don't forget as well those down here those are our icons so again you can switch back to our horizontal split we can also collapse one of the panes and just see these are the zamel or the the actual window so as a line you can do it the one thing that I have not found how to do and love for something to find how to do this or for someone to actually get this pusher with a change is I love you separate my zamel from my UI and it's like I pull this you know say there's two tabs now instead of having just one pane split in half that I could take this side over here and put on a different monitor but you can't do that that's kind of a bummer that love bill do that so I have my actual live output view in one monitor in my Zaman different monitor but that's not something that that DPF stuff for yet that probably you know Tim's wishlist number one for DPF number a close number two is that being able to hit the the double quote no skipping over instead of adding an extra one okay so we've gone through we've add our our columns and our rows which seem kind of boring and in fact if we run this it would be look no difference because these columns and rows are invisible can actually show anything so let's actually add something here to make it a little more useful all right so let's start with a very simple label or as case is called a text block now if you're not sure what you're looking for here you can do go your toolbox and look for the different tabs in fact here's text block here's text box which that's great block and box we can't get those two mixed up right but block is the one at the label essentially now there's a separate one for label but typically just use text block essentially what it is is just text in the screen I think labeled a little more associated with a text box but it all comes down to just displaying text and so I end up using just text block usually so if you weren't sure what to put in here you could look over here and get the name and is type it out or you can even drag and drop it either on the saml or the form and then modify it but just make sure you take off all of those you know left align and top and and less and all other stuff that's that locks it down to a certain spot all right so I'd recommend if you can learn it that a great or look over here and just start typing that now note that since I clicked off of my zamel it tried to render it over here and said oh nope that's invalid markup and with invalid markup it breaks things let's see if you could take it away that comes to window it's great so if you have invalid markup then it's going to yell at you and take it right and there is some intellisense down here saying okay here's the problem in our area pouring a little squigglies but just know that you have to have valid zamel in order for the form to show which again it's a little more difficult than wind forms because you can get it wrong but at the end of day he comes down to just close out your your item that I closed on text block where they slash the end and life is good again so you can do that you want that's right now I'm going to do is I'm going to say let's get a text block I'm going to say I want to be grid dot column remember a city for that our columns and rows are zero based counting so I want to specify that goes in a certain column a certain row I have to start at zero the cool thing though is since I use as 20 here which is essentially a buffer column and a buffer row I can actually go down one below and that's column one so my thought process and my best practice for myself is I say I never play anything in column zero or row zero so now it starts in column one and so in this case column one and Row one so the column is one and the grid dot row is one as well I'm going to close out the tag and then inside between the closing and the opening I'm going to put text let's say hello world and check it out we have hello world right up here now the first thing you might notice is that it kind of small it's you know it how do you specify the the height of this font well we didn't and took the overall default but we can change that now I could say right inside next to grid dot row before the close of the opening text block I could say font size equals let's go 18 and now it's bigger all right in fact I going to change it again I can say 28 and bigger again notice this row has gotten larger because the label inside it is larger now what if I didn't know this font size I wanted well if you're selecting text block you can open up properties now remember property just like in wind forms properties allows us to modify the properties of whatever element we're selecting in this case text block so you could say the text is hello world like a change that you wanted to in fact you can say hi world and we could off this notice that we scroll over here now it says text equals hi world now why it changed this well I had it between the opening and closing tag of text block but the properties window says not really that's our should go it instead should go in the text property of the text block and it should be a self closing tag the text block is so it changed a little bit and also change the value here to hi world notice over here one is a little smaller here but it says hi world now note these these draggable arrow things here don't drag them if you're a drag these it would resize the column and say that's the width the column has to be we don't want to change that we want this to be nothing but Auto adjusted columns and rows so if you want to see the grid go away what you can do is click outside the grid tag but inside the window tag so right here the grid goes away you can see form kind of looks like in the real world now let's go back to properties here on the text block click on there and we can change things like the text is 9 share Lama pronounce that si gos to go I'm not sure that's the default fonts and now we specify the pixel of 28 pixels that's right there notice if we were to change this as something else let's go to 36 if we were to click off this watch this right here it changed the font size at 36 and it gets a little bigger over here so this property window right here is the same as modify it directly in zamel the only difference is like with our text where we did it inside between the open including tags if it likes something different it's going to change it when you make a change also note the color here next to the 36 it's white and Suman there it's white and that means it's a local change versus this right here is inherited from system dot resource so DPF has a hierarchy of a application of styles just like CSS does on the web and so you first have this global style in the system resource and then you can apply themes which can be global or for certain set of forms and then you can go down and ply at the forum level and finally at the local level and so depending on where it applies this icon color will change letting you know that alright so on these right here aren't set at all or the default so that's all well and good let's actually shrink down a property when it's going to see our form again but the coupling to watch show you first of all you don't want to specify a font size for every single item on your form so let's do this up here in window notice that window is up whole bunch of stuff we can I ignore up until now and most of stuff you really don't want to change this is kind of stuff it's bringing it saying okay here's what this should do as far as look and all the rest and unless you know what you're doing leave it alone but a couple things that can change first is the title bar main window that's what's up right here we can change this to our WPF demo and we'll notice that changes over here in our preview window now the height and width are set 350 and 525 and hopefully you remember my warning there saying wait a minute we've got hard-coded height and width and that's a problem right yes and no it's probably the right height and width you want for your form when you first start up you might want something different but just know that's the starting height and width you can change it to whatever height in width you want going forward once the application is running you can change it to be 525 by 525 square you can change it to being fullscreen nineteen twenty by twelve 1080 it's whatever you want to be at runtime but the starting height width are these right here and so you can change that in fact if we were to change this to be 525 notice my form got taller I should back out of that so this time to address at least think about should I change the height and width of my form but that's more we can do here's more properties we can actually access in fact if we would have properties you'll see a whole bunch here but we can say font size equal let's get 18 now what is this this is now the default font size for this form note that did not change hi world and the reason why these hi world already has a font size therefore we're not going to override it in order to use our forms global font size but anything new or anything does not have a font size specified get the font size of 18 now you can also set things like font family now this right here is not intellisense backed and that's probably Tim's wish list number three would be to have an intellisense list for font family this is one of those times where I would drop into the properties and go to our font family here and change this to changes right here and so you want something different if you want something a little more fun you can do that but typically if they said sketch flow print there you go and it's kind of fun but typically the this cgo UI is what we use or the light version of that as well I kind of the light version is a little more crisp and clean I think but I change that here instead of changing that right in lines I I can never remember how to spell this and since there's no intellisense that's the problem for me I also rearrange where it's going to be just like and see it without having to scroll it all to see it so there's my font size that I font-family notice the font family change this font family that's because I had not specified a font family down here for my text block so it didn't change the size that did change the family now if I took out sighs let's control X that knows that is it's not big but it's not as small as it was now these are font size by default is 18 now for this one we're going to be a little bigger all right so let's let's also add a line break here in zamel line breaks don't later so you can add line breaks as you feel necessary in order to make it readable for you in this case I don't want to scroll off the right of the screen I want to see all my properties right in line now let's change this hi world to be WPF super demo now note what I did that made our column 268 pixels wide which that's the problem going forward but that's okay where I deal with that in mint but I want to kind of demonstrate the the width of this column also notice this first row is 48 pixels high because that's what this label needs why doesn't get much because the font size and how much text is in it has nothing to do with setting the width and the height of the label alright so now let's add a text box and a text block both where I have is you know let's say its first name and then a text box to have us actually type in our first name so let's start with a text block first we're going to put that underneath our label right here rest put first name then where I have a text box that says you know or allows us to type in our first name so right down here below our text box I'm sorry lower text block but on the same level we don't have nest to inside notice we're not putting anything inside our column definitions that's not our stuff goes we define our columns up here we define a rose up here down here just kind of where we feel like inside here we put our other values or other items and so what I like to do is I can keep some sort of order going on here where you know column 1 Row 1 stuff goes here column 1 wrote I'm sorry column 2 Row 1 goes right below it you're kind of going this way up top then down the next row and this way and down the next row in this way that's kind of how I do it basically up to you how you decide you want to do it this case we're going to do text block where I say grid dot column still column 1 and rests a grid dot row is 2 right below it we're leave off the font size we will say font weight equals let's just say bold and then I'll say text equals and our text is going to be first-name I will do the close out slash and there's our first name notice the font weight didn't really change anything here and that's because we're using the thin font and so we're going to do it actually change the font family to this CEO UI so I'll do that right here like so notice is now very very bold so let's change change this to be not bold and it's a little better you do have some options here font weight there's other things like black and there's sellable and semi have you know light and regular and all the rest you can try out some work some don't depending on the font some funds have the ability to do these things some files do not so you kind of play around to paint what you want to do so there's our text box I'm sorry to protect block I totally just in confusing there's a text block that says first name so let's now create a text box the group you see I saw that right below text box and this when you give a name so X colon name Y X cool name well that's just how sam'l does it so this name is the actual name for our text box so we'll call this first name text now again if you come from a date I'm sorry winform application background you might have already realized we didn't name this here we in name this so how you reference those in code well we don't really they don't have names and we could give them names if you want to reference them we don't have to give them names and behind scenes it probably gives them a name and I don't really care all they care about is what we need to do in this case we don't need to give a name if we don't need a reference it and so it kind of cuts down the amount of then we have a type so if you don't need to name it don't so the case we have a text box first name text because we assume we're going to access this text box later and then we could specify other stuff but for now let's just close this out actually put the clothing tag at that we can change it there we go and so now we should have a text box and where it a text box and that's up there because we didn't give it all this other stuff so let's do that grid column column to grid Row Row 2 now it's right there then if we put a cursor here we notice that that's our text box not very big right well in this case we have to give some sort of width or minimum width or otherwise give it a size so width equals again as pixels we can say 300 me really big we can say it's 30 to make it kind of small and you can experiment with what looks good to you probably something more like 150 is passable and this is where our forms took to take shape but it's a little ugly in fact if we move this over here we notice he had a label up here first and then way over here we have our actual text box you should also get rid of this as well I don't really find use for these things here so let's get rid of them I can minimize them for now but we're actually on get rid of them entirely in a minute but first I want to dress this issue of this space right here when you specify that space should be there so why is it there well the reason is there is because notice how it ends or starts right after in line after this right here so this is column one and column one is the width of the largest item in this case our header label the WPF super demo so since it's that with the next item it gets put in this column it's not going to fill that column it doesn't need to in fact it's said make the font size huge and expand to fill a column instead we said here's the font size here though here's the font and here's the actual text and therefore only takes up this much of the column this much is then blank now it's not really we want we don't want this big label affecting all the rest of the items in the column how do you fix that real simple we come to our text block the one that is affecting everything else and inside of it we say grid dot column span now what column span does it says I want this item to go in more than one column in fact I want to go in two three four however many you want in this case we have one two three columns before the star column let's specify three now notice what happens on our form now our text box has shot right over and tucked up almost next to first name perfect so now our header label spans multiple columns which means that it's no longer the largest thing in the column first name is that's why we're this is tucked up right next to it now you also might notice that these two are really close together and so is this to extent and so we can also look to address - spacing by adding margins and padding so let's do this let's go down here and say margin equals now the margin here allows us to add multiple dimensions we can add one so say we add let's add 20 and then when it's done just put 20 on every side 20 pixels therefore it's pushed this down it's pushed this over it's not always anything over here because it's not going to bump up against if it did it put a space there and it's also pushed it down 20 pixels from the above row so this row is essentially 40 pixels larger and the column is 40 pixels larger now we're spanning three columns so it's not a big deal but for the row itself the row is pretty high so that's if you want to specify all four dimensions left top right and bottom all at once or you can say comma zero now notice we got 20 left 20 on the right nub top and none down below what this indicates is this is the left and right this is the top and bottom but maybe that's not what you want either may want to specify a different width of margin for each dimension in which case you could say comma is zero comma zero now notice we have 20 pixel to the left non-top none to the right not now below now in our case we don't want the padding to the left we want to be below our label which one's below well it goes in a clockwise pattern starting from the left goes left top right bottom therefore we can say left top right bottom Bob's last one there for a last one gets one sit to 10 notice now that first name and the textbox have both bumped down because we have a 10 pixel margin between our header label and this row now those of you follow along we'll pricing now wait a minute you didn't have to do this that's column definition of 20 on either and you know both the left on the right and the top the bottom as well because you could have dealt with margins and yeah kind of the problem with that is that it's a little harder to manipulate when you're talking about forms going to grow and shrink it the form shrinks too much you got a problem you've also to make sure you put those margins on the right ones the right elements that's a little harder keep track of that's why just two macro definition in my column definition of 20 on both the front end in the back end to put those kind of margins in by default bake them in it also makes my my columns and rows start at 1 and 2 0 which is kind of nice so now I have a little bit of space here and now I can move on to my next element align ad which is a button so it's called button and again where I call it give it X dot name equals let's call it the submit button and we're going to give it a content that says run me and when I give it a grid dot column of 1 and a grid dot row of 3 and there we have our button here now notice that it said content this is where DPF gets a little tricky sometimes that's why it's helpful to have this property window here is that for a text block is called text and that's what comes out in the screen for a button it's called content now the reason is called content is because instead of putting this here instead we could do is not make us a self-closing button but instead have an open button tag and a closing button tag and inside of there put something else so you actually have an icon and some words or an icon some words and a swirling you know a swelling icon as well whatever you want to do we could do inside this button but in our case I just want to put a little bit text content therefore I it's called content and there is the text that goes inside of it so that's it so that button now notice my button again tucked right up underneath first name and it's also the size of this column and row now the reason is this size is because a button will take up the available space you give it in fact us to demonstrate that let's do this grid dot column span equals two and now button is this large now if I said row span wouldn't do a whole lot of this extra rows or emptor autofill which is going to zero unless you tell it to be larger but what we've done here is you said okay this is the height that that row needs to be and that's based upon the font size run me but when I do column span it goes okay I can still then and it fills in because this column is an extra 160 pixels no problem I'll fill that and so if we actually spilled it over into the one star go over to this edge line here so buttons unless you specify a height width just kind of get bigger or smaller to paying with what space you give it so that's just you know kind showing off what they do you could say do you want to change that you could say well here is the the maximum height or here's the height here is the width but I kinda leaving the way they are and just do margins and so that's case when I just do a margin 10 and boom there you go it shrunk this down what it's done it shrunk it down at 10 pixels on each side because it says okay this is the total width you have and it's okay let's take 10 pics on each side make it white space instead and it kind of shrinks it down so that's kind of nice it's centers event which is really fun but we could also say well may wanna push down further and if we want to do that we'd have to put a margin below the text block and text box otherwise be any kind of funky looking so the key here is the EPF is very very flexible but you have to kind of think through what you really want to do with that flexibility can't just kind of throw things together now again just to come back to my soapbox a little bit we didn't drag and drop anything on here but you want to have this flexibility of expansion and change based upon our form size now right in our form isn't change a whole lot based upon the the size because it's kind of all locked in a little bit but we can make that a little more flexible and actually make it grow and shrink depending on our how the form is is sized but for now we're going to kind of leave it at a simple demo we're going to get into the really in-depth stuff so that's kind of the basics of a form we've got our er header label we've got our text box we've got our button now it's actually why it's button up and do something so I click on my button here and go to properties and notice in the upper right hand corner we have its lightning bolt which indicates events just like we do in window forms and you have a click event so I can double click on this and it actually creates the submit button on our click which is great that's one of the reasons why I named this submit button before I create the event because I wanted to have its a submit button or click instead of button on it or click so that's kind of important the other thing is note that it's still disabled so click equals submit button on a square click so if you didn't want to go to the property window change to events dealt with right one because I'd click equals and then put in your event also note if you want get rid of this event the events now gone a coastal there but we can safely delete this code because it's not attached to anything and that's one of the the kicker's of wind form was if you delete the code before you delete the event then what would happen is it would cause the wind form to crash and be a real pain to try and get back where as this it's all out in the open we can just modify it and we're good to go so let's put that back fine adjusted the sail window instead they click equals and notice is a new event handler just click on that insure event failed excellence normally that'll work it may have to do the fact that I deleted before and then redid it let's try it again this may be Tim's wish list number 4 yep Tim's wish list number 4 is to fix that and plug in the editor so you can make over here don't click down the event and we've really broken in Visual Studio now so this is all those things where when doubt we're going to go ahead and restart the application and see if that doesn't solve our problem so close out Visual Studio and open it back up and submit and we'll try it again so let's go to open project solution find ours JPS demo back up and now let's try it again click equals Alex tab and feel the rating submit button on square click come over here there's our submit button on as where click so if you get bug in the editor nothing you do a fix it is just save everything close it down open back up and then try it again but just type click equals and then I come up that new events this tab on it or double click on it it will create your code for you so in here we're going to a very very simple message box show and we'll just say dollar sign double quotes hello space and then we'll do the first name text dot text and that's just the person's first name where they type in the box so it's just really simple submit button event we're going to do so let's run this now just to show that this event works and that our text box works and it looks all pretty so let's say Tim run me hello Tim excellent so our day PF window works and our text box works our button works and in fact we can resize as you wanted to know it doesn't shrink really nicely yet that's I mean we can add in the future to make this actually grow or shrink depending on the window size right now acts a little more like wind forms and so we haven't lis take an advantage of a lot of the benefits of APF quite yet but we'll get there but for this demo I kind of stopped at that point where I'd go way in depth and APF I'll do some in future videos to kind of give you a little more targeted update Sunday PF and kind of help you with some some speed bumps you might have in day PF but before we go I want to deal with that that annoying bar that pops up that's there I'm going to show you how to get rid of this all right here that box let's go tools options and here is options for everything it seems like but it come down here to debugging and look at our general window and then scroll down we have it enable UI debugging tools for zamel and inside here we have show runtime tools in application uncheck that box hit OK and now we start this up we won't have that black bar anymore or that black bar the icons on so that's gone so if you don't want that if you just go to tools options debugging general and then search for show runtime tools and application because you could do is say show runtime in our search box and take you right here show runtime tools and application uncheck that so that's nobody in there real quick or you can type you know sam'l and only find the things that are related to zamel that's a little harder i think to get to so it only shows the one that specifically saves animals so you don't see that then one option there so that that search box is really helpful if you're trying to find something in this case it would be show runtime tools and application so let's type show runtime tools and it's right there so it's up to you how you get to it but the important thing is that you know how to fix it if you want back to check the box again so that's WPF kind of nutshell there's a whole lot more we have to go over at some point we will do that for example the combo box is a lot different you used to and so we have to do a video on that but as you get deeper into EPF and as you start to use it there's a whole lot of power here that first of all if you're going to use a PF you should really take advantage of that power because otherwise it really is a wind form application it's more complicated and that's no fun but the other thing is you should probably learn a framework like mvvm model view viewmodel and that's it's a little more complicated but it's worth it in the end because it allows you to do a whole lot more advanced stuff with the APF and i'll at some point do a video on this but in the meantime i'll at least show you my recommendation for a a tool for mvvm now you can do mvvm on your own kind of roll your own right in just a native day PF but let's put this it this way this is my end game for you if you don't do a PF you really need to mvvm and if you've got to do mvvm the easiest way of doing it and the most powerful most complete way of doing it would be to use a tool called calibre micro so on references manage media packages go browse and just type Caliburn micro that's right here i Rob Eisenberg this is a great tool still being updated he's now on version 3 which is is great anything a lot of work on this we've got team around now but this tool here makes mvvm easier into aps because it's a complicated subject and it also allows you to kind of fit in this to a modeler to a mold that kind of gets in the groove how mvvm works and again I notice this is kind of endgame stuff but depending where you are with APF you're very comfortable with gamblin and how it works the kind of stuff I'd say move this direction if you that's just my recommendation it's my two cents we can take it or leave it definitely the comment down below if you've used it before or if you thought about it there are some documentation some tutorials out there that work with calibre micro or show calibre micro they're not complete if not there's not this be-all-end-all wonderful documentation that's kind of kinda how it goes with with open source projects like this it's a whole lot easier get the code working that is to document it well especially how fast the code changes so I'll at some point go over that the kids that's I'm kind of a fanboy of Caliburn micro it's really made life easier for me I'd like to show it off and and kind of get you to like as well but that's kind of endgame before that I like it get more comfortable example get more comfortable is opening multiple forms and kind of nesting forms or creating controls and other stuff like that you can do with with the PF but for now this is an overview is a very start of de PF I wanted to show you just some of the things you can do wrath of bat now your homework is to go try us out build something yourself into a PF and see what things you enjoy what what problems you have and then here you do come back here and post a comment down below and say this is where I got stuck what is the problem I had or this is what I find confusing because I'm going to take those and use those as a way to create new videos so I'm going to say okay everyone's getting stuck on drop downs go ahead and create a drop down video and that thing wasn't becoming for sure but you know it ever get stuck on a certain topic or a certain that confusing I'll create a video for that as well also go to Facebook and interact there because they'll have some awesome pulls up and here's what I'm thinking about which one he wants he first let me know and we'll go from there all right don't forget to hit like on this video I loved if you do that if you didn't like it hit don't like or the thumbs down give me a feedback let me know if you like it or don't like it and what you want to see more of leave a comment down below also don't forget to subscribe if you haven't already all right thank you very much hope you enjoy the video and as always I am Tim quarry

Channel: IAmTimCorey

Views: 505,755

Rating: 4.9240642 out of 5

Keywords: .net, C#, Visual Studio, code, programming, tutorial, course, training, how to, tim corey, C# course, C# training, C# tutorial, C# app start to finish, wpf, iamtimcorey, dotnet, xaml, intro, introduction, getting started, vs2017, best practice, best practices, wpf applications

Id: gSfMNjWNoX0

Length: 70min 34sec (4234 seconds)

Published: Fri May 26 2017