so this is the first in a series of tutorials on WPF which is the framework for [making] Modern Ui in windows [we've] got an example screenshot here of A Ui that we want to make this is actually a real request From somebody and this is how we want it to look? we're going to make this exact Ui in WPF to give you an introduction into Just generally making a WPF application making buttons labels text boxes dropdowns the most common Items so we're going to use this as a template of what we want to do So we'll start with that We'll open up visual studio We'll create a new project Now I want two WPF application with visual C-Sharp. We'll just call this WPF basics [I] [will] create a WPF application which will give you a Assembly info an app config just containing the framework version and [Apt] sam'l which if you right click [on] [view] code you'll see it's got a code behind file, and if you double-click, you'll see This tiny bit of zamel, that's xmL Class file, and here's the start up. I would you say main window and Then this is the main window, so by default when you create a WPF application This is the window that will open so press F5, and you'll see it compile and then just generate a Blank window So this is a blank do be powerful and this is what we're going to modify here this here's your window, and it's similar to HtML, so you start with An Angle Bracket then the tie and then your attributes And then you close the angle Bracket and then everything inside of that until you reach the same name again But with a forward slash before the name right here Everything inside of those two areas is contained within the element So everything inside the window is between here and here which is Currently a grid you [can] only have a single top-level element in the window so it has to be a container type element and what we do in Wpf at least what I do is I tend to type in here and just watch this window here, so I can visibly see What I'm creating, I don't use this toolbar which you can do and just go to these controls and drag and drop them but I Prefer to type in here, and I'll talk [through] how I? Think this through whenever I'm making an application So just resize the window slightly we'll just zoom out for 100% [we'll] hide this from here so let's take a look at the screenshot So you've got some buttons along here some properties down here some checkboxes here So the first thing to do when I look at anything is I want to break this ui up into there's really two main Containers that I use in WPF and you've got a stack panel and a grid and a stack panel is An element that if you put items inside of it like this They'll just stack one after the other and will sag is based on what size you [need] to be so this label will only be The site it needs to be and then the box below will be right below and that's that's a way of stacking elements So just like a stack you can stack them vertically you can stack them horizontally If you need anything more than a straight stack so like here, we've got two rows, then you want a grid And then a grid can have two columns and then you can use a stack panel inside to stack each section So whenever you need to break this down You first start with the container to break it down so you can see in general the whole thing flows down So we need to start with a stack panel because we need to Stack [things] one on top of the other so [we'll] change this grid the first element to a stack panel And I'll show you what I mean if I just put a button in here Let's give it And I'll paste three of them. You can see they just stack one on top of the other And they just take up the room they need and no more So that's a stackpanel a grid on the other hand Everything will appear see the grids taking up the full possible space for start with and because by default the grids a single column single row all Three buttons of stacked on top each on top of each other so all three buttons are there you can't see the other two behind So let's just start with the stack panel And let's create this form so you can see now. We've got a stack panel We want to start stacking down now the first set of three buttons You could use a stack panel here and stack Horizontally, but let's show you what happens when you do that so the stack panel the main one is this outer container the whole thing that's going to contain everything and then we now need an In a stack panel, we're not going to use the stack panel But we're going to show you what happens when you do these three buttons So we've got three buttons there. Let's put [an] in a stack panel and Then inside that in a stack panel stack these three buttons And then inside this bit here you can type orientation and let's change it horizontal And you can see what's happened the stack panel only takes up the amount of space it needs, so if this was just the letter I the button had only take up just enough space, so the static panels Basically take up as much space as needed and no more so you can [see] when we look at the [screenshot]? These are three evenly divided buttons so what we want here instead is a grid with three equal spaced columns So let's go ahead and change the stack panel here to a grid get rid of orientation You can see the grid is now Got a single column so all buttons are stucked on top, so inside the grid do grid dot Column definitions And then inside the column definitions do column definition so for the first column the width and we'll use this asterix the star and this mean this is it like a Universal value, so if we have three columns, which is as simple as pasting three if they're all star because there's three stars in total all of them become 1/3 exactly one star of you see, so it's a You know a measurement it's it's not a specific size It's a measurement of the overall width so if there's three stars then it's a third if you put like two star Then this one will take up twice as much space as the ones with one star so you can see that's twice the width of Those two so that's exactly half and then those two take up the remaining half between them So we've got a call. We're going to grid then we've defined the grid Columns here So there's [3] Columns 1 2 3 and, they're all equally spaced We then want to put [3] buttons inside of them which we've done here So there's the grid there's the end of the grid so everything inside is within the grid So you can see these [3] buttons are within it And this is like a special element inside the grid that Defines the column so it's not really a like a button or a text box. It's defining how the grid behaves So we've got a grid we've got three columns the equally spaced We want them the name apply reset and refresh, so we'll do apply reset Refresh and [now] you see that all in this first column So to change the columns you do grid Column on the actual element itself It's zero indexed which means it starts at zero So the first one will start at zero then we want to move that one over to one and that one over to two You can see now we've got three buttons But you can also see there's no spacing so the first thing we want is we don't want them right against the edge of the screen and that Holds true for everything we're going to put inside of here. So firstly to get a border around here like a padded border Let's wrap the whole thing so let's wrap the entire Stack panel in a border so we'll literally wrap it around this border Element and then in the border We'll set [a] [new] Margin or padding padding is technically the one we want and we'll do ten you can see that's moved Everything inside. So now you got this border around now we need the [spacing] between the buttons Again, there's a slight annoyance with grids is that there's currently no way to specify I'd call this a cell in a grid so if you've got multiple Rows You know more than one row then you'd have like a table in excel Every single cell you should be able to [specify] the padding around them you can do it But it involves a lot of work Where you think you'd just be able to type in here things like cell dot padding is what you'd expect So for now, just for quickness and for simplicity. We'll simply select this button. Which is the first one I'll just add a Margin and then this for you can put four Items in which like top bottom left right if you can't remember the order Just put 10 in the first one and you'll see so the first one's left Get rid of that move the [ten] over so it goes left top right? bottom Is the order so we want one on the right? there, so we'll put ten padding Margin on the right-hand side of the [button] and Then on the last button. We'll do it on the left side which Was that one and we'll get rid of the [ten] on the right? Press F5 and take a look at that So I can see [we've] got three Evenly spaced buttons now this one will be ever so slightly larger because these two have got the margin on them This hasn't evolved for this purpose. It's perfectly fine So we've got those first three buttons So already we've done this top part so remember the the space around it's been the border Just here with the padding then the stack panel is what then is going to stack everything down? The first item inside the stack panel is the grid which holds these three buttons and you can see the indentation if you get confused as to where things are and You can also do comments inside of here, so like this bit here now This grid here contains the buttons so to do a comment. It's a angle bracket exclamation and then two dashes maybe press space it'll also add the finishing part which [is] - - and then an angle bracket, and we'll just both buttons [this] gives us a Quick view when you scrolling through this code of where things are so this parts the buttons Now after the [Dred] so the thing below the buttons we need to have this title so we'll use a text block you can use a label or a text block a Labels very limited so there's not much you can do with a label. So I tend to just stick with a text block [and] then value text and it will be pulse properties and Then if you've got nothing inside of [the] text block you can just do forward slash and close the Angle bracket And that's like a shortcut instead of doing Closed bracket and then open one and close it again straight after so instead of having to open and close Because there's nothing inside here like the stack [panels] got this inside That's why you need a stack panel than a closing panel the text blocks about everything. It needs right here There's no need [for] this open and close business. You can delete that and just do a shorthand version. Which is as forward slash close You can see we've got the pulse properties here. We want to just make that bold so it's called Font-Weight:bold And there's the bold And again we want a bit of a spacing between them. This is got spacing above and below so we'll do a Margin and We want it [zero] [Ten] and You can see there's a short. ND If you only specify two properties the first one is the left and right The second one's the top and bottom So that's a quicker way of doing if you've got the same Margin top and bottom you can just do [0] and then 10 So [that's] now got a spacing above and below We then want another label, so we'll use another text block that just isn't old so we'll just copy and paste this I'll be called description get rid of the bold and [then] we don't want this big gap. This is a bit too much of a gap, so Let's just start by removing the Margin Altogether and We'll put a comment here again description Now below that we've got this actual text entry field where the user can type something, and that's a text box So same as everything else just type the text box And then let's just close that and you can see we've got a text box now I'm going to run this so we're going to press F5 and I'll show you the Onesie issue, but something I always change so you're clicking this text box and look how compact There's no space in [between] it so you put the letter m. It's really close to the top So I think that just looks a bit, too squished in so we're going to add some padding to give that a bit of breathing room, so [padding] goes on the inside Margins go on the outside so because we want the space on the inside of the text block Will do padding and we'll give [it] like five padding. Well. Maybe a bit extreme. Let's just give two let's press F5 You can see now. We just got that a little bit of extra space around the writing so it's just not quite as squashed in So it gives us [that] block Then we've got status and revision next now because we've got two side by side again remember if we use a [Stackpanel] They'll only take up the amount of space [they] need which means these would be squished over to the left, so we need to use a grid again here And it's just a grid with two columns this time one column two column and by the looks of it This is about twice the width of this one So we'll do a grid that's got a two star and a single star So this is twice the size of that and then inside of those columns We'll just do a lot of stack panel little stack this and this and then this and this So you can see whenever you're looking at anything You're always just looking at really making a choice between a grid and a stack panel and every single thing Between those two [you] can make up the ui hits it really is as [simple] as [that] you define your layout and you just break It down into stack panels and grids so I'll start here. We'll make a comment. What it's going to be which is status and revision We need a grid we need some columns again, so let's define the columns the first one needs to be to star and The second one one star and then inside of there, we want a text block and text box [similar] to that In fact no sorry we want it inside of a stackpanel don't we first so these two [stack] This is going to be the status That's the status. It's going to be in Red Column zero which you don't need to specify by default it will be in Column zero [I] just like to Explicitly state where it is in case you move things around Copy and paste the whole lot Pull that revision move it to column one you can see it's jumped over there Call it Revision and again we need this slight padding so we'll do a margin on this status one, and we'll do it on the stack panel, so Margin:0 0 [1002] put on the right hand side And you can see there now. We've got the Space between you can also see the slightly gray That's just to indicate that they are read-only so the user can't type in them So to make them read only in these text blocks here you can actually use is read-only and Set it to true, or you can use is enabled and both will do the same thing You won't be able to type in them. So do is read only true, and we'll do background And we'll set it to hash Try II we go nice and light, so [that's] a shorthand for Ee-ee-ee-ee, which is red Green and blue and a hexadecimal value of between 0 and 255 so if you don't know what these values are for colors just Have a look at hexadecimal color values It's fairly Simple [0] 0 0 so this starts a black ffF Is white and everything in between is colors, so if we did f a red and no green no blue you'd get red If you had no, red then green and no blue you get green No, red no Green and blue you get blue you get the [jist] Ff for green and blue and you get [sy] on red and Green and you get yellow So you get the gist eee is equal numbers of all is just below white so it gives you this nice gray Will copy and paste that into the one below? And then we'll press F5 and let's make sure these Can't be tired Tim. So you can see we can click but you can't type in them Which is what we want and this one. We can So that's got as the status and revision [next] one is part number so that just goes below, so this is again really just carrying on the stack panel. It's just going down so Remember the indentation level [where] stack panel Here's your grid containing the buttons You can minimize using this minus here that collapses that grid so you've got your buttons, then you've got your pulse properties Then you've got description then you've got this grid again Which contains a status and revision so after that we just want very much copy and paste this description It's exactly the same as this just carrying on And it wants [to] be part number As that and it wants to be read only again, so let's just copy and paste this read only as that now we've got this title again and Then material and then a drop down, so it's basically like this title description And then it's going to be a drop down so we'll just copy and paste this this part here because it's very similar So we want click here takes us to the tile and copy the [title] and the description paste it below Add a comment Going to be raw material and you can see how easy this is to you know really quickly make a UI especially when you used to it like I am how quickly you can [just] whizz through and create something exactly the same Cart is going to be material and then we want to change this from a text box to in this case. This is a [drop-down] So that'll be a combo Box. I believe and Then we'll leave that one blank There's nothing in this at the moment, so we'll just leave that as is and we'll add stuff when we come to here Where you can see, they've got values So now there's manufacturing info and [workcenters] [which] is again. The same as raw materials and material so we'll copy that bit manufacturing [Fl] There's the info and then work centers And now what you've got here. You've got a load of check boxes. So these can be ticked And again you've got two columns of them, so this will be a grid with two columns, and this will be a stack panel again So that's actually exactly the same as these because this is a grid so we can go ahead and copy this for quickness Which is this grid here copy the whole grid? Paste and this is going to be a just calling check boxes We've got the column [width] we want to be equal. So we just remove [that] too So now we've got a grid with two columns. Just delete what's inside of it for now In fact now we can actually leave part of that Column one and its column zero but in terms of comment for reading Column one and two And now inside [of] there instead of [the] text boxes we want to put check boxes so checkbox Content is well now go see we got the first one in we want a little space between this and that because we've got like a space here, so we'll go to the work centers here and add a Margin There we go [so] they've got this world who want another one two three four and [to] Assembly plasma laser and purchase and Then same on this side, so copy and paste the [check] [boxes] got Lathe drill fold Roll and Saw and There's the [checkboxes] let's press F5 and just take a quick look at this now. See how it's coming along So got the buttons you've got the text boxes got the locked ones. You've got a combo box with nothing [at] the moment Got some check boxes. We can check and you'll notice also when you change the size of the form everything changes in respect to You know the universal value, so this is always a third This is always [two] times the width of this and this is always half so everything scales nicely It's not restricted to a fixed size Now we just continue this so again. It's like description and part number [for] length of Mass So we'll copy description it wants to be outside that grid and We'll copy part number for the read-only style, and then we'll change it from length and Mass And then we want finish, and this is a [drop-down] again. Just the same as material and then we'll put some values in So we want to go to material Just here Paste that this is finish And now we want something inside this combo box, so we'll get rid of the shorthand forward Slash And [we'll] actually expand into the combo box then in here We'll just do combo box item just so we can hard code we can hand type a value And we know one of them which is painted And we don't know any others without seeing the you know the real list because this is just a screenshot So let's just add one other. I'm not painted And then you can see when you click the combo box in here oops And you click in here or rather when you click in here? It shows you the drop-down, but when you're outside There's nothing selected so by default we're going to Force this to select the first item so in the combo box here Just type selected index and make that zero [and] you'll see that's now selected the first item in the list So we press F5 and let's have a look Selected the first item and the [drop-down] we've got two options. So now got an option where you can select one or the other We've then got this purchase information again. It's a [drop-down]. So we'll just copy and paste the previous one And the purchase [information], we know the first one was rubber So again [just] for quickness. We'll just type not rubber until we get the list of what needs to go in there, that's as much as we know and Then really everything else here is exactly the same again supply a name is just the same as length, so [copy] and [paste] You can see we're going off here now. So let's just scroll back up to the top and then in the title [he'll] also Put a title into the window here, main window. Well, [it'll] be bare Basics and this height which is the default height when it opens will change to 800 make it that a little bit longer [let's] now we've got supplier name. We want supplier code Now we got additional info a note, so that's just like pick an e how to pick this one again So there you go. There's the entire form so you press F5 And we open up the screenshot, and then we open up the form you can see That we've mimicked the whole form in a relatively short time We can like move a margin here between length and here [too] to get that we could add a little bit of Spacing like these have got you can mess [with] that nice and easily just add Margins as you need to we won't bother doing that because it's [not] needed So I know we've gone through that really quick [but] that was to show you how quick you can build a ui when you get used to WPF so we'll go over these Items in a little more detail so as you mentioned when you're inside a window, you can only have one master Item so that items got to contain it's got to be like a container ideally so that you can put more things in So [will] borders our container control it can have one other thing inside of it, but it's still a container. It's got another control inside So the border we've used just to add as the name sort of suggests our border. We've added a padding of 10 We brought everything inside, so if we remove that padding It's the everything else [will] be pushed right up against the edge of the screen So the purpose of the padding there border is to add that padding around the whole thing Inside of the border and again you can base it on where the indent is with another stack panel which by default is vertical So everything I'll stack down that goes inside of it the first thing we place inside of it is a grid that's got three columns and contains the three buttons Which is inside the columns zero one and two? so that goes zero one two and Then below that so again because we're in a stack panel. It will go below You've got the text block puls properties a text block [is] [just] text not something the user can type. It's just text itself we've told it what the text is we've made the font bold and we give it a margin below and above and Then below [that] we've added another text block. Which is just text the user can see but not type And then below that we've added a text box. Which the user can actually type into we've added some padding which goes inside whereas Margin if we add a Margin you'll see Goes on the outside they see that the Margins gone outside the control the padding's inside the control So we add like a 20 padding you'll see how big the the text box itself will go So you've got a stack panel which goes down or across if you change the orientation [you've] got a grid which can contain rows and columns and you can set the specific sizes We've got text blocks. Which is just text [you've] got text boxes. Which is what you can type in You've got these combo boxes, which is a you know combination. It's a list of items that you can select one off You got checkboxes which a user can be true or false you can be ticked or not ticked? And that's really all we've got in this form that's that the whole list of controls, but it's enough to see You know the basic controls? the way it's done like I say it's very similar to XML or HTML. Who have done web design where you have an open and close? Angle Bracket and then if you don't put a forward slash there then everything is inside of that until you get to the final part where you then type the same name again, but with a forward slash and [you] can see that throughout so you can see a [stackpanel] here know forward slash So everything inside is inside the stack panel until we do forward slash stack panel so and you can see [it] all indents it for you as well, so you think of it as like a Hierarchical tree as you're stepping in so if stack panels further forward than border It's inside the border the grid is further forward than the stack panel So it's inside the grid the text box is the same level as the grid so they're both inside the stack panel Now you go inside this grid the buttons are inside the grid so you can see it's easy to follow And visual studio helps you with when you type in a lot, so it will point out when you miss type things That you know something's wrong. It's you know not a valid name or if you pull It would just close it off. It'll automatically out of finishing So I'll just close this [now] with a right angle bracket. It automatically adds the closing part for me things like that So you'll find it quite easy to type in And there's all your controls if you're interested in what other controls there are you can use this [toolbox] here? You can take a glance at them And the reason I don't use. This is because as you'll see let's say I grab a label Or let's use something with use let's grab a text block and I drag and drop it into here You can see now. It's just gone somewhere random. It's down here It's just added it And it's set all properties by default and it's give it a default name It just tends to add things that you don't need and if you haven't got a stackpanel if you've got a grid like here Then it can tend to do I don't know [it'll] do this for [us] now, but it sometimes positions And that's going to keep jumping there it will position things By setting Margins, and it just makes it really messy, so [I] always type WPF Directly in code and just get familiar with them You know how you're creating these these Ui is instead of just dragging and dropping and trying to position things Just think [you] through and you're always thinking either a stack panel or a grid so if you're going down or across And you're not trying to fill a set size like these buttons want to be all of the width But [divide] [it] equally if it's just stacking down to an unknown you know size Just just stack down until you've got as much as you need then it's a stack panel If you want to fill an area like the whole area or split the area intersections of you know specific Proportions like two to One or you know [1] to [3] here [or] what have you or you know [1] to [1]? Then you want a grid there's only two choices to make really there's the odd occasion you want something different but 99% of the time you put your items inside a stack panel or a grid and then within that year then More stacked panels or grids until you finally get to add in the actual controls So look over this code You know just pause the video and flick through this This code here. I'll scroll down You [can] see the greener comments as we mentioned they start with this part the end with this part and then the comments inside and Then all these properties as we go through the tutorials will [we'll] speak more in depth about you know specific properties You can change backgrounds foreground you can have a hover effects when you hover over? You know text boxes make them glow and you can get really fancy So this is very plain-looking Ui and as we get more into depth with Wpf you'll see how much control you have and how easy it is to make really nice-looking Ui so that's a really quick overview of firstly creating this Ui Now in order to do anything with this let's say when you type in this description, and then press apply We just want to display a message box. We want to read that value So in order to do anything with any of these controls you need to give them names so that in the code So if you right click on the window over here and view code You can see this is the code to the main window that we've made this is the code behind class So in order to do anything. You know access the controls in [here]. They need a name So we want to name for this apply button. Which is here You do x [colon] name and then you type in apply button, and now let's say when we Click this button so in order to do something when it's clicked type in Click press [enter] And then [it'll] give you an option to do new event handler press tab and it will create that for you Let's give it the name apply button click, and then if you right click on this main window And go view code You'll see is added this function for us. This is now linked in with When we click this button, so when we click this apply button because it's linked to this function It will run this code, and [you'll] also notice if you want to access the button itself you can do this dot And now you can see we can access the eight the button apply button Or we want to access this description text so let's click this text just [here] X call on name we'll call this description text Go back to our code behind [plus], and we'll just do Message box shell which is the really quick and dirty way of showing something on the screen. You want some text input So just to show you what that does first. Let's just do hi press F5 And I'll see when we'll click this Get a message box that says hi So now let's get the text out of here So really simple now instead of putting hi do this dot Description you can see there you go description text is the text box that we've got and you want the text of [that] text box So that will literally just get the text of the text box, and then [we'll] do a string that says the description is and then the value of the text box press F5 Hollow world and then you click this apply button and You get the description as hello world So you can see we've started to Interact with this form so in order to [access] you know these these items you need to give them names So I won't bore [you] and go through every single one and name them But let's go through one [of] each type. So you know The reset [we'll] give that [a] name Will do reset button and when we click that button will clear off say these checkboxes will make them all back to not checked So we'll give each of these checkboxes a name Will do well [Checkbox] Copy and paste And then we'll call this assembly Got rid of that plasma laser purchase If you wander now, I'm doing that multiple select hold the alt key and then you can select Like you can like draw a square [around] and then you can also say you want it to add a word Specifically to every line here you can just drag a line straight down while holding the alt and you can type in Hello, and it will do it on every line You can also use that to delete so if you want to delete all the check hold alt? Click and drag and press [delete] so it's like a nice way [of] selecting Text that's in a specific line Fond wrong and sore So now when we click this reset button, so we want to add a click We want to reset all of those checkboxes So I'll do this [dot] weld checked So the checked property of the check box equals Assembly Plasma laser purchase purchase And then we got Lathe drill [falls] roll so we're just setting them all in one big dose of This equals this equals IC puts that are all going to equal the same thing roll Ladies drill [falls] roll yep, so So that's the last one so every check property equals false And [that] should check and [of] course that's the wrong thing. That's the event think it's is checked Yeah So checked is an event that will fire when it gets checked So if we want to do something when something's checked, we'll go through that in a moment So when we click the reset button we want to set the Checkbox to false for everyone let's press F5 and check that out Select a few click weser you can see it's got rid of the checks for us So now what we're going to do is what happens if you want to know when these are checked then when you check any of these we're going to add that text to save this length box So we're going to set the text of this base to every time you click this add the word to this box So let's go to here to flick say the weld and now what we're going to do is are the same event to every Checkbox you want the same action to happen every time you click? So we don't need a you know an event for this and this and this and this and then you know write the code every single time you need a single function, so the [Checkbox] Do checked which is similar to click you can see this lining it means an event when something happens press enter and then tab like before and It's made this wild Checkbox checked. I just delete the word weld Let's go to the code behind and also delete the world weld So now we've got this universal function Checkbox checked We're going to copy and paste this to everyone so again. I hold alt drag down and paste You can paste it to all of them, so [now] when you click any Checkbox this function is going to run we want to set this length [Textbox]. So we'll name this length text and then in this checkbox checked function we want to set this dot length text text and Then instead of just saying equals you want to add to it So it's just a string like any other string do plus equals to add to what's currently in there and now we need to get the Name or in this case the content we want this that's right in here So whenever you click checked you'll notice the function pat is in this object Sender This object is the Checkbox itself So instead of being an object we cast it by doing A Checkbox in Parentheses and then the word sender after then we wrap the whole thing in parentheses So that's converted it into a check box and then the check box dot content Which again can be anything because it could be something else. We know it's a string so it's the content and Then to cast the content to string It looks like it's automatically doing it for us anyway So we don't need to but if we had to you just cast it this side So when you're casting things you've got this [parenthesis] on the left with the value that you cast you inside So you can see here the sender has been cast to a check box and then we've wrapped it all inside this so that we can then access the check box content and Then we could cast the content itself here into a string, but it looks like it's not needed, so I'll just delete that string So now when we click a check box it should get the current check box that we checked Get the contents and add it to the length text, so let's try that now [you] see weld Assembly fold [lazer] Purchase that's just again [just] an example of showing you what things are you [can] notice as well that? When [you're] [unchecking], it's not doing anything the checked is when you check only You've then also gotten getting unchecked yet, and then you'll have maybe changed the B14 I'm not sure what it is off the top of my head, but there's also an event for when a Check box just changes. You know it can be Checked or unchecked. I'm pretty sure there's one anyway, so a quick look Oops, well anyway this Pretty sure there's one you can google it if not If not, just add the same event to checked and unchecked. There's nothing stopping your doing Unchecked [is] checkbox checked and it runs the same function on both if you wanted to do it that way But I [think] there is a universal event that does both Now you got this drop down here So again let's say when we change this drop down and select a new item we'll add it to the note down here Let's name this note note text And then in this combo box let's drop down if selection changed. That's the one we want Let's delete that select it. I'm not sure what [that] [is] so Selection changed I'm sure I type that in the first place So now when the selection changes we want to add the value to the note text So again, we know the sender is a check as a combo box And we want to set the note text And this time I'll set it to the value so we want to cast the sender to a combo box And we want to do selected Value [I] believe is what we'll get and again that I'll convert it to a string automatically will it nope okay? Let's cast it to a string I'll see if that works So selections changed [send]. [oh] is there some [guessing] the value is Either not the right type when able to cast object of type combobox item to string okay, so by default this selected value is [combobox] item not a string directly So instead of it being a string [we'll] do Combo box item and then from that item wrap that all in parentheses again. We can then do content Which will convert to a string because the content is a string That lovely big long messy looking statement there. That's how you get the value So if you wanted to make that look a bit, nicer you could first get the combo box Put it in a variable like that You could then do the value as a combo box item? Like that and you can see it looks a bit cleaner. You can easily see what your cast into And do the value content of string so that you can do that if you want to make it look a [bit] nicer plus F5 and we've got a object reference on set to an instance Okay, looks like the note text is Null at the moment, so this is firing before the things been created so instead of doing checking if this is null you can do just this conditional question mark Here, so Then if it is null. [I] [know] you can't okay. Let's just check [its] null at the top So if this note text equals equals null Return because we can't set it yet, so this is obviously firing Before the note text has even been created so now There we go it spins up. We check [this] and change And you can see it's now selecting the value You'll notice on startup It doesn't have a value and that's because the selection change was fired as we saw before this was created So it's probably firing an order of creation So if you want to set it [to] the value when the form initially opens so you want to find the value? You can just call this Function or you can put this inside [of] a function And gun Sender as a combo box yeah this combo box, okay? so There's a few [ways] for quickness again. We'll call this function and because we're using the sender here We're going to pass in the finish drop down into the function itself so you can do it you can do it here in the constructor and but you probably want to do it and Must be fun to remember this on is loaded or something okay type Let's just drop into here. See if there's an option [an] event Loaded there we go, so in the window itself we had an event when it's loaded that's when everything's been fully loaded This event will then fire and then we'll just call this initial value to set there The value so we could just [rewrite] this code, but because we've got the function already. We'll just call the function finish drop-down Selection changed and it needs the Sender which in this case We know it's meant to be the finish drop-down And we're not using the argument so we'll just pass [null] So that will just call this function and pass the sender as the finish drop-down, so that this code can find You know the combo box so we press F5 now when the window loads it will run this function because it's filled in then when you initially open, so you've got the default value and then this function Phi is aft So now we're using An apply button to read the description [a] reset button to uncheck these You can type in any way we know how to get the value from the apply we set the value in like here when you change the The value around we also do it here or you check in? They are read-only so you know you can't type in them And I think that's really everything in this form in some basic usage. You know so you can generally? Creates controls and mess with them and do things when you click them or do things when [things] get typed in them [so] there's a thing let's do another one. That's when you type in supply a name Let's copy the exact same code and to supply a [coke] wellness copy [enter] mass because that's read-only so we'll just mimic the code Mimic the text that we write Let's go to Supply a name let's give that a name so we can access it in code behind not that we need to bottle might as well and Then this time it's going to be text changed event So when the text is changed we want to set their this mass, so that needs a name mass text Go to the code behind and now every time the supplier name text has changed. We want to do this dot, Mass Text dot text Plus equals, and then you'll see this text event [augs] think in fact now Let's just cheat. Set it that always be the exact same text so equals there stop [supplying] in text text, and you could use instead of doing this we could actually use the sender cast the sender to a Text box and get the value from it, but because we're only using this function for this exact control We'll just access the control itself here So now we [just] set the mass text to equal the supplier name text every time the text changes. So now we type in here You can see it copies here has [retiring] Which is quite cool [I]? Think that's really all we can do with these controls in terms of You know basic usage for the first video. I think it's at least a [go] [to] introduction [in] future videos [will] [go] more into potentially styling these to make them look nicer [we] might go into view models although that gets fairly complicated, but really when you start doing code like this You don't want to be putting your logic your code in Effectively, the Ui there this is the Ui the main window and this is the code behind this is just the code that really should be to do with creating the Ui And we're starting to do you know logic. We're starting to make our program inside here, and that's sort of bad practice You don't want your code inside [of] the code behind class So the way, we would get rid of this is [to] make [a] view model, and it's quite a complicated thing so again [that's] [something] for a future video But it's something we'll [have] to go over because it's something you want to do very early [on] So we'll do view models probably will do some styling And we'll see where we go from there. So hopefully this was a Good introduction into WPF and it's enough to then allow [you] to start playing with you know all [of] these controls and Just pressing space and having a look at what options you've got on them changing the values let's change this like horizontal, and I'll turn everything that way and You know just have a play around yourself and see what changes And that's a good way [to] to get a feel for what happens. So you can go into here and do a background read And change the color to [red]. You know you just have a play and get a feel for the the General Ui And then we'll carry on in the next videos [oh]
