C# WPF Tutorial #6 - Custom User Controls

welcome back everyone this time we are talking about custom controls before we start creating custom controls let's go back to our Visual Studio example recreate this core layout that they use so we had three rows the top one being 70 static height and the bottom the footer being 20. so now rather than using a rectangle like last time let's create a grid that is going to be our menu bar now let's take a look at the menu bar it appears they use two rows the top one being a little bit smaller than the bottom let's make some more row definitions and let's create two here this is automatically going to be placed into this grids row 0 so we have split it equally now since we know that this height is 70. let's go ahead and make this row definition we'll say 30 and then this row definition so it'll be 40. so now we have room for our actual menu and then we have room for our button panel so now let's use a new control which would be menu inside of a menu you can have a menu item which would be representative of these items here so let's do file and edit so let's add to the content that you see here is called a header so we will say header equals file and then we will say header equals edit and just for good measure let's set the font size 16 just to show that we can style these up a bit and inside of a menu item you can have another menu item and that could be say file exit now just to point out in these menu items you can have handlers similar to a button or other controls so you could say click and generate a click event handler so when we ran our application and somebody went to file exit and click this exit button you could do something like exit now you might notice that the file and edit are not where they are in visual studio and that's because these applications come with a default title bar now we will learn in a later video how to customize our window and create our own but for now just pretend that this isn't there so now that we have the start of our menu bar we need a button panel so let's add another grid and let's put it in an apparent grids Row one so it'll be here and then this grid we're going to need some column definitions so let's say grid.column definitions and let's just add a couple of things let's add two things here and let's put a button and let's put a text box now we're going to put the text box in column one so you can see that it's split equally now this button is massive and this text box is massive as well so we can say maybe button width equals 50 and text box width equals I don't know 150 and then in our column definitions we say with Auto and that will size the column to whatever is inside it so now if we add more columns we can just line up our buttons within our row and to make it look a little better let's play with the margins let's say I want a margin of 5 all the way around which is going to resize our button to be within our row five from the left top right and bottom and let's do the same thing to our text box so it gives them a little bit of spacing so now if we run this we have a button and a text box here and we have our menu so very rudimentary but you can see that's how you might get started in creating this menu bar so I wanted to go through that exercise to show a couple of things but to also point this out we barely got started on creating a menu bar and we are already up to just as much or more code than we had in the entire last video so what we can do here is create a custom control to separate out our menu bar from our main window so the first thing I'm going to do is I'm going to create a new folder inside my project and I'm going to call it view there are a lot of design patterns there's model view controller there's model view view model and everything that you're going to do in a UI application is going to have a view so I like to separate that out and also I'm going to add a new folder under view called user controls so that I can keep my custom controls a little bit separate from my main views this is definitely a personal preference do what makes sense thing if I was on a big project this would be separated out even further but you know do it make sense for you next thing we need to do is to actually create our user control so I'm going to right click my user controls folder I'm going to say add and then there should automatically be a user control WPF option if for some reason you don't have it you can go to new item and you can search for user control and user control WPF is what you want and we're going to call our user control menu bar so now we have created a user control now if we look at our main window you can see that our main window is of Type window and menu bar is not so this is not going to have a default title bar or the ability to drag resize close minimize maximize all of those things this is just a template that is going to fit inside of another control or a window another thing to pay attention to is that a user control does not come with a default height and width but instead it comes with a design height and a design width and that's just for the designer purposes it's not actually going to be this size at runtime this is just so you can design your control and so that it maintains the ability to be dynamically sized now you can set a height and a width if you want to or you can leave it as a design hiding width and let it stretch based on the parent for our purposes we know our menu bar is always going to be a static 70 height but we do not know how wide it's going to be so we can remove the design height and replace it with 70 that way it's always going to be this height but the width will stretch I'm going to make it a little bit bigger in my designer so we can work on it so now what I need to do is to populate my menu bar control we have already started creating it here in main window this is the grid for our menu bar so what I'm going to do is I'm going to highlight it I'm going to cut it out of the main window I'm going to go into menu bar and I'm going to delete the existing grid and paste in my menu bar grid so now this entire control is my menu bar now that we have the menu bar separated into its own control we can use it in any other control or window so if we go back to main window now our menu bar is gone we have cut it out but all we need to do is add a menu bar now it will not automatically add because it's not found and that's because it's not in the same name space these things here are telling it what namespaces to add so we need to add the namespace wpftutorial.view.user controls so that our main window knows where to find our menu bar now an easy shortcut to know what namespace you need is to just go into your user control and find the local namespace so if we copy our local namespace out of our user control and we add that into our main window and we can rename this because it's not local anymore but it is our user controls namespace now what we can do is we can use this namespace by saying user controls colon menu bar and now when we build our solution it will automatically include our user controls namespace and our menu bar will show up in our main window so now you should be able to see the massive value in custom controls because not only did we clean up main window and separate the logic off to where we can edit it in its own file and designer but since we have created an isolated user control we can use this in any code project we want with very little effort so it makes it incredibly reusable next up we are going to continue with custom controls so I can show you a few more awesome things that they can do thank you for watching everybody I do appreciate you I hope this is helpful to you please feel free to ask questions happy coding and as always until next time take care [Music]

Channel: Kampa Plays

Views: 33,021

Keywords: C#, WPF, User Control, C# Menu

Id: aB9Tgw2JZZI

Length: 8min 55sec (535 seconds)

Published: Wed Dec 07 2022