C# WPF Tutorial #7 - Custom Textbox Control

welcome back everyone let's jump into some more custom controls last video we created a custom control that was the menu bar of our application it was a large piece of the GUI this video we're going to talk about customizing existing controls and creating smaller reusable controls that you can use within other controls let's start with a bit of setup let's say our customer wants us to create some sort of form that they can fill out for their personal details so we don't need it quite as tall we definitely don't need it as wide and we know we're going to need a lot of rows so let's put some row definitions in here and let's copy and paste this several times to get a bunch of rows so we'll say that the first row is going to be some label that tells them to enter their details in the last row will be a button to submit them so every other row we're going to need text boxes and we'll say that they're going to be about 250 wide and we'll say they're about 40 tall and we need to put them in their rows so this will be grid Row one and now we can copy and paste this several times and change the row number so now we have a very simple basic input form with some text will be here but it'll be here and then there's some text boxes so we get to this point and we have some text boxes for user input but we don't have any way to tell the user what the text boxes are for so at the very least we're going to need some sort of labels on the top or the left or wherever to show the user what these text boxes are and then also say we have a requirement that the customer wants to be able to push a button to clear each text box individually in case they want to immediately clear it out so we could add some column definitions make a spot for a label make a spot for a button and then for every text box add a label control and a button control and put them in their various rows and columns and that would work but even for four text boxes that's a lot of extra work and a lot of extra code and if they needed any of these input Fields anywhere else then it's a lot more so this is a perfect use case for us to create a custom text box that can handle all of that so like I did before I am going to add folder called View and in there I'm going to add folder called user controls I'm going to right click it I'm going to add a user control and I am going to call this clearable Xbox now I'm going to set design height of 40 because that's kind of where I want to be at and a design width of say 250. and then I'm going to make this a little bigger so I can see what I am doing note I am not setting the height or the width because I want whoever is adding this custom control to be able to Define that themselves so now I want to add a text box to my grid and it's going to populate the entire size of the control which is what I want because what I decided is I was going to make the label of the text box a placeholder text inside the text box so I want the text box to fill up this whole control so let's customize the text box a little bit put a name on it first I'll call it dxt input now let's go ahead and set a text property so we can see what we're doing let's go ahead and vertically align the content vertical content alignment center then let's make our font size a bit bigger and let's make our font weight light so let's say we're happy with how the text box looks so we can take away our test text the next thing we need to do is create a button that is going to serve as our clear button so we can give it a name we'll say button clear we could probably give it a static width of about 30. we could say maybe horizontally align it to the right that way it's on top of the text box but it's all the way to the right we're going to need some content so the user knows what it does so let's use x for clear for now and now let's make it blend in a little bit better let's say we want the background of the button to be transparent we want the foreground which is the font color to be say a light gray to kind of take Focus away from it and now let's remove the borders from the button say border thickness 0. so now this text box is a very subtle clear button in the right side next thing that we need visually is we're going to need an X block on top of our text box let's call that TB Place folder and now let's style it up the same so we'll say font size 16 and font weight Lite go ahead and give it a test text so we can see what we're doing again now for a placeholder text usually it is also kind of grayed out so let's make the foreground dark gray and let's make the vertical alignment center now it's really close to the left border so let's add a margin of 5 on the left to pull it away from the left a little bit and now this will be our placeholder text visually this looks pretty good we're going to call it done there are a few missing pieces but let's hook it up first so you can see how to piece it all together so let's grab our local namespace go back to our main window add our namespace all this user controls because it is our user controls namespace and then instead of text box we are going to use user controls clearable text box and let's change all of our text boxes to be our clearable text box so now we have our custom controls instead of the built-in text box but when we run this you'll notice a few issues first of all all of our placeholders say hello there second of all you can't click on top of the placeholder so it's very hard to get into the text box once you do the hello there placeholder is on top of the text and the clear button doesn't work so we need to tackle all of those issues in our custom control but let's start with the easiest and that would be the clear button so what we need to do is we need to add a click Handler and in our code behind clear this up really quick in our code behind what we're going to want to do is when the button is clicked we are going to want to call our text box dot clear and after we clear a text box what we're going to want to happen is we're going to want to focus the text box again because you see my cursor left type in it you clear it the cursor is gone you can't type it in anymore so after we clear it we want to say it takes input.focus and that will put the cursor back in the box so now when we run and we type in our box and we press our clear button it's ready to be typed in again and we can clear as many times as we want so now our clear buttons all work now we need to solve the problem where you can't click into the text box because the placeholder is in the way wbf has something called panel dot Z index and the default is zero every one of these controls has a z index of zero now if they're all the same the control that got declared later is the one that's going to be on top so if I move this text Block in its entirety up here then the text box is going to be on top of the text block so if I move the text block Back Down Under text box now it's on top but another way to sort your layers is to set values for Z index so the lower the value the lower it is on Z so now 0 is higher than negative one so the text box is on top of the text block now we need to be able to see the text of our text block so what we can do is take the background off of the text box so we can see through it and put the background on the grid so if we set Xbox background transparent and then set the grids background white now the grid itself has the background and the controls on the grid are all transparent so when we run this it looks like they're all on the same layer but really the text box is a higher Z index so the label or text block doesn't get in the way anymore the next issue we need to fix is the overlapping placeholder and text box text so what we can do is we can hook an event up or text changed and anytime the text in this text box is changed we are going to enter this text change method and what we want to do is check to see if there is any text in the Box so if the string method is null or empty for our text box so we're saying is this string null or empty and we're passing it the text from our text box so if this has nothing in it what we want to do is we want to set our placeholders visibility property to the visibility type visible so if there's nothing in the box we can see our placeholder if there is something in the box then we want to set our visibility to the visibility type hidden so now if we run this and we type in our box the placeholder will magically disappear if you backspace them all away it comes back and even the clear button will flag the text changed and put the placeholder back as well the last thing we need to be able to do is when we declare our text box we need to be able to make this placeholder text be custom to each text box because we needed to say things like first name and last name so the first thing we need to do to make this possible is we need a property inside of clearable text box so let's go in here make a bit of room and you want a full property so you can type prop full tab tab so we want a string tap tab we'll call it lowercase placeholder for the private variable Tab and then uppercase placeholder for the public variable so now if we save this and go back to our clearable text box then this text property what we're going to want to do is put a set of curly braces in here use the word binding with a capital B and then our property name which is capital placeholder so once we save this and build our solution if we go back to our main window that property should now be available from here so we can say placeholder equals and then we can put first name but you will notice that it does not yet show up so when this text box gets created and this placeholder property gets set we can access that setter and we can tell it to update the text of the placeholder to whatever it was set as and if we build this and look back at Main window you can see our placeholder has shown up because of this okay so that being said quick note do not do this this should be done with something called on property changed that is a different video we will go over it and we will go over why you should use this later but you should not do it this way we're only doing this so we don't have to pile on a bunch of complicated stuff to this video and you can still see the value that it provides to the user control so let's jump back to main window and let's add our placeholders to the other ones so we can say first name we can say last name we can say email and we can say bone and now when we run this we have met our requirements and having a label for all of the boxes clearable boxes and what we've done for ourselves is we've created a custom control that we can use anywhere so if we had other forms or other needs for a clearable text box or even another text box that's not clearable but we need placeholder text or anything like that we can use our custom control instead of a regular text box in any project that we have the really great thing about it is that it only took about 10 minutes to create the custom control whereas if we were trying to create a bunch of labels and additional buttons and try to hook all of this stuff up it would take a lot longer and we only had to do it once and now we can reuse it next up we're going to talk about I notify property change to help us with our bindings so thank you for watching everybody I do appreciate you happy coding and until next time as always take care

Channel: Kampa Plays

Views: 27,636

Keywords: C#, WPF, User Control, Panel.ZIndex, C# Visibility, c# transparency

Id: V86kaIBBcRk

Length: 13min 25sec (805 seconds)

Published: Thu Dec 15 2022