WPF Controls: Learn basic WPF controls in C#

hello again this is Tim Cory and this video I'm gonna go over some common controls in WPF for this demo I'll be using Visual Studio 2017 which you can get for free at Visual Studio comm as a starting point I'm reusing a simple WPF project I created in my intro to WPF of the video if you missed that video you might want to check it out I'm going to assume that you've watched it so I can skip over some of the things that covered in that video all right so let's jump right in here we have the project open that I create in my intro to WPF video and it's pretty straightforward we got our grid here with our column definitions and row definitions and then we have two text blocks a text box and a button and you won't really cover those controls to cover them pretty thoroughly in previous video but that's what we're going to start now let's add on to this because typically you have more than just text boxes that's probably our our bread-and-butter control for entering information but there are other controls as well so let's look at a little more complicated one the combo box now combo box and list box are pretty much the same thing so I'll just cover combo box but this really applies to both so if I were to say combo box and give it a name so X colon name and we'll call this combo box something like my combo box and let's put in the grid dot column of one and the grid dot row of four which is right below the you run me button and that's one of the things that to think about when you're designing your form is that you have to give each of these a row number and so now I have a combo box if I want to put that you for the rummy button I have to actually change this to a three change this to a four and kind of swap them around that way I can do that it's just a little ugly if you have multiple things on that line so now let's call this good and close it out now we're going to put in this combo box let's actually make that day a call spent to sew grid dot column span of two and what's column span do remember column span says I want this control to live in two columns look at the two instead just the one and that two incorporates the first column you specify plus the next one so it's not the current one plus two more to include the current one all right so now I want this combo box to have a list is now in my code behind for my main window exam about CES I've actually already created a public class person now don't do this here this is just for demo purposes you should really count a class somewhere else but for dello purposes just keep it close i actually declared it right in line with my main window class so it's really simple first and last name properties all there is and then in my main window class which is actually code behind for this form i said outside of everything else outside of the methods I said let's declare a list of person called people and then inside a constructor right here after the initialize component I said let's add three people to that people list and that's all I've done so that's that's this close actually from the previous lesson so this is all I've done is add three people to a list of people and actually to clear that class so let's assign this list that combo box we called it my combo box item source equals people pretty simple but now over here if we were actually to run this let's do that we get DP F del dot person and that's not we want but if you're familiar with wind forms when we do this we do the same kind of thing if we don't specify the the binding source that the display member and value member so how we do the same thing in the EPF well it's a little bit different in fact it's a little bit more in some ways more complex but in other ways more feature-rich we do is inside the combo box between the open closing tags we say combo box dot item template so this is the template for displaying a specific item or single item we say it's a data template inside here we can specify anything you want in this case let's start off with a simple one text block you familiar this text equals we're going to do curly brace binding and then the property name now I'll explain this in a minute but what this does is says okay we need to for every individual item this is a template we're going to use this is a data template and inside here we say I want a text block to say this value but instead of an actual value we say binding bind to this property in this case first name the property path so first name right here is one of our properties so now if we run this Tim joensuu all right so you've bound to that value so that allows us to one of our properties and display it in this combo box now well he wanted the full name well the way you had used to do it in wind forms still works in DPF in that we come down here and create a full property or part of a full read-only property except it's something like public string full name get and we'd say return dollar sign double quotes curly brace first name space pretty breaks is last name like so then I call it the end and then here instead of first name we'd say full name we run that we now get Tim Cory Joseph with and Sue Storm great so our combo box now has full names in it we have control over what data goes in there now I'm going to leave this here because when I come back to this after I show you a different control because this is the most simplistic thing you can do with a color box we could actually be a lot more full-featured in how we do things including adding things like images here if you want to or sets of data so look at that a minute but for now we'll leave this as is and again if you want to movies around if you want to say this goes in row four and this goes in Row three now I'm not sure we caught that or not but one can override the other I mean they can both live in the same spot which is ugly but it kind of works also notice that we've got a spacing issue man which we can deal with by adding a margin unless today here so I'm gonna puts on the next line and say Marge and let's just say 10 for now and put 10 all around it and now if we start this and look at it we now have our combo box a rummy button first name field and we're all set so the other thing I do here is actually I'd cut this out and come here and paste it back in in the right order otherwise you get confusing as to okay this down here is actually this up here and this up here is this down here and just it's all confusing visually for me it's up to you if you want to do it or not but that's that's what I do alright so now I'm going to show you some I guess more interesting controls when we could say it let's look at the image control so let's say grid dot row is one grid dot column is for wrap this to the right of the the information right here and let's say grid dot row span at row row span let's say the row span is six alright so what it's going to do it says we are in row number one wrap here but column therefore this is one two and three here so column four and we're going to span six rows so all the way down here now the actual image we have to give us source this is where your your image is located in this case I'll give it a hard code spot you can give relative paths that you wanted to but I'll give hard to it pass and that's a self-closing slash at the end and there we go got my image on this form now here's a real fun thing I have not given it a size for my picture this image is actually quite a bit larger than this so if I were expand this as the form gets bigger so is my image which may be a little scary for you but sorry so this is one of the features of DPF the idea that we don't have to specify this is how big the image is going to be it can adjust based upon the real estate you give it notice that that image can get really small or if I make it really big expands all the way it makes it very very big in my form is still over here so that's an image really simple to do like I said just image and the idea to do is give it a source you can give it a height and a width if you wanted to or you can give it a max height and a max width meaning resize all you want smaller but you can't get bigger than this and we'll see that in a little bit so that's the image a comment that's out actually I'm not going to add instead a media element now a media element let's give it the same parameters as my image so grade dot rows one grade columns for grid dot row span of six and again it's a source but this allows you to play video so again it's a self-closing tag and there's a video I have my hard drive now if I run this it takes a little some recording but there you go you have a video which again resizes based on a window size so you get large you want can you maximize it we can shrink it down and that really is my son mowing for the first time we're actually just riding the tractor so but based upon this the video can get bigger or smaller and yet it still runs the background I've done now and I haven't looped it but that's again the power of DPF to not only have a running video but running videos that can be resized dynamically based upon size your form so again let's comment that out but that's media element not video which I wish would be called video but it's called media element let's put that in turns wish list and poised it now number four I'd love to see it be called video so if you have image but whatever all right so now there's some times you want to have multiple things kind of grouped together now I mentioned in a last video but you might not have caught it certain things can only have one thing inside them but there are other items that can have multiple items inside them for example the grid control is one of those things they can have multiple things inside of it but let's look at stack panel now stack panel what it does is it stacks items so if you put four items in it's going to stack them on top of each other or side-by-side depending on the orientation the key word here is orientation and you have two choices horizontal or vertical so let's draw office horizontal and the other thing I do is I need to put it in that same spot as before so I put in row number 1 column number 4 and row span 6 so I'm going to stack over here and let's give it 4 images now use images max Heights for now now I'm max width as well whoops not max height I want max width and my source is going to be again hard-coded all right so there's my first image right there and I will copy this a few more times and just for variety I'll add different images and so now if you notice there's actually a little bit of a picture showing up here if we start this it look as one picture but if we actually open this up there's multiple pictures in a row okay so it's a stackpanel notice that they in half the same size in fact this one's oriented differently it's oriented in the portrait instead of landscape which is has no problem I'll just put them side-by-side with no margin misses there's no margin there but when I drink it down it Clips the dog clips off whatever is left which isn't ideal but there is a solution for that but first I want to show you if we change this orientation to vertical now you run this you see that against clipped off the bottom now and they are oriented in a virginal mode so that's nice but it might not serve all your needs what's nice for is if you want to keep a form together but how to be dynamic so you could say you actually nest these stack panels so have a vertical stack panel and then inside of it have a horizontal stack panel that has the text block and text box so first name and text box then the next stack penalty have last name and text box so on and so forth and so you have a this form that kind of recites a little bit but it still kinda keeps together but in our image case it doesn't lis utilize a space well we can actually change this though to a rap panel so that was stack panel now let's look at rap panel and if we start this notice now that I have four pictures side by side but in a more of a cube fashion nothing happens if I resize this way but if I resize down notice it actually moves this picture down below so what's happened it says I don't want to clip off any of the images if I can help it and so I'll do is I will use all the vertical space I can but if I can't put another picture below I'll put it next to me so this case it has two pictures where this third picture is if that portrait mode net really can't be put down below and it also can't have one below it because it would also clip therefore we actually have three columns give it a little more space and now I have two columns we go so that is a rap panel and we can switch the orientation again from vertical to horizontal and now it's going to try and lay us out horizontally and if it can't it puts it down to the next row down so that's the ideal for it but it starts putting things in the next row when it runs out of horizontal space so that is a rap panel which is great for images and other things now let's go back to the stack panel for a minute also notice when I change my opening tag it closes much it changes my clothing tag as well which that's a nice feature so we have this and let's make it let's make it vertical we have a stack panel that's kind of great but it does clip the bottom we don't want that alright so we want to see all of our pictures we can't scroll here in any way so you only see all pictures is to actually expand it out so let's instead I'm going to temporarily cut this instead put a scroll viewer now I've done to put a scroll viewer and then inside a scroll viewer I put a stack panel now it's not showing up over here why is that well because now scroll viewer Tassie put on a grid we specified grid that row column column span for stack panel but it's no longer on the grid it's inside scroll viewer so we actually have to cut this out and paste it in here and now scroll viewer is in this spot in stack panel doesn't we have a spotnik grid it just lives inside scroll viewer that is parent now scroll viewer is one of those things it can only have one child element you can't put multiple things inside scroll viewer you have to have a stackpanel or something else inside of it so let's start this up now I have a scroll bar where I can scroll through my images but if I were to make this taller let's make this tall enough notice the scroll bar is no longer enabled because it has nothing to scroll and that works as well with the wrap panel so there you go there's the wrap panel the only problem with this is that the wrap panel doesn't necessary work the way you want to because it's inside this scroll viewer which is why we don't put a wrap panel inside a scroll viewer because it ends up being more like a stack panel so that's stack panel that scroll viewer that's wrap panel so there's a few more controls you use now let's look back at our combo box and note that we can have some fun with this for example instead of having this full main property let's go back to first name let's take this out cut it instead going to put a stack panel orientation of horizontal put first name I'll paste a few more times but instead of binding here I put space and then I'll make this last name so we have a stackpanel which it's orientation is horizontal now this is one of those things that kind of messes the up once in a while visually in zamel it's arranged vertically but since it says horizontal it's laid out horizontally it is one of those things that messes me up a once a while just note that that even though it's arranged vertically it was as horizontal it's horizontal so just one of those things so I have first name binding and a last name biting now if we run this and look at our combo box it still says Tim Cory Joseph Smith and Sue Storm we can have even more fun of this by saying what if I did an image with a source equal to my picture and now we just drop down its massive but notice Tim Cory Joe Smith and Sue Storm not quite we had in mind so let's do this height we can do height or we can do max height go on - well let's do is - height and let's say our height is about 20 pixels let's save it with and now our drop-down we have a little image of me next to all three people we can even go further and have as image rebound to a property and have a change based upon which person was selected so it's important to have it combo boxes are a lot more powerful now because we can add all those new fun things including having things like checkboxes inside them and other things in fact we can even have a video playing next to each item a different video playing as each item do you want to have that probably not but maybe you have you know top three videos which one do you which one you like and have instead of words you have just a videos playing they select which video they want to see in the color box so isn't fun they didn't do there but one thing I point out that you may have noticed and I did point out a little bit down below but there is no grid column grid dot row or column span or row span for any of these items here and the reason why is because they're not on the grid directly that's not their parent it's their grandparent but it's not their parent instead these items here all live inside stack panel stack panel lives inside combo box well technically data template but inside call box combo box is directly on the grid therefore it has the grid column span grid column grid row so just know you don't have to add these elements in fact you shouldn't add these elements unless they're directly on the grid also note that you can stack these things so a stack panel can a stack panel inside of it a grid can have a grid inside of it so you could have a grid inside here and put multiple things in a really weird and funky layout and that's fine so that might mean you could have you know big and bold my name then down below a mighty title in a smaller font counting a signature does a really great things can do if you just get a little creative with your layout and don't get locked into if wind forms did this way I have to do the same thing in de PS again utilize the power of WPF by taking advantage of these extra features if we're going to deal with complexities that come with jpf like this right here they might as well get the benefits as well if you're not getting the benefits don't use the EPF these wind forms so that's a basic overview of the controls we've got text block text box combo box or list box buttons scroll viewer stack panel and ramp panel as well as image and media element with those you can do a ton of cool stuff I would definitely recommend that you play rallies try them out try different things take an existing form you have in wind forms and just try it out and APF now coming up I'm going to have an add-on for my course my c-sharp application from start to finish course where I take my existing completed application and say ok let's remove the wind forms UI and add in a duppy fui and how is that going to look at how they're going to be different so keep an eye out for that if you're not in a million lists definitely there's a link down below definitely jump on a mailing list so you can be alerted when that comes out and also if you have already subscribe I definitely appreciate if you also hit the like button if you like this video and want to see more like it also let me know what you want see more of alright or what you stroll with right thank you as always I am Tim quarry

Channel: IAmTimCorey

Views: 121,755

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, controls, wpf controls, wrappanel, wrap panel, stackpanel, stack panel, mediaelement, media element, image, wpf image, wpf mediaelement, wpf stackpanel, wpf wrappanel, wpf scrollviewer, scrollviewer, scroll viewer, combobox, wpf combobox

Id: -zM486rVopk

Length: 29min 48sec (1788 seconds)

Published: Wed May 31 2017