‫Welcome back.
‫In this video, we are going to check out the text box and the password box in combination.
‫So we're going to create a little log in screen here.
‫So let's go ahead and do that.
‫First of all, I'm going to make XAML a little bigger, and I don't want to use a grid here.
‫I'm just going to use a stack panel instead, which allows me to stack controls on top of each other.
‫I'm going to start with a label, so the user should know what kind of information should be entered.
‫So I'm going to start with username.
‫Then below that I would like to have a text box.
‫So I'm going to add a text box and that text box should have the name of text box user name.
‫So TB username.
‫So just a text box right now.
‫And as you can see, well, it's too close to the edges.
‫So I want to add a little margin to my STACK panel and I'm just going to go for ten pixels.
‫So now it has a margin towards all directions, as you can see.
‫All right.
‫So that's our text box.
‫Now, I want to have another label for my password.
‫So I'm just going to create one with password as its content.
‫And now below that, I'm just going to create the password box and that's it.
‫So there we are, we have our little password box and actually let me add a button below that as well.
‫So I'm going to create a new button, which is with a margin of, let's say five, and then we have
‫content of the log in.
‫So the text should be log in on that button and let's add a click event to it.
‫So click, click and I'm going to create a new event handler.
‫So that's our button.
‫As you can see, we have this little button here with this margin.
‫So it's not exactly the same width as those text fields.
‫And yeah, we can we can change that as we please, but that's going to be fine for now.
‫And now the password box is something that I want to execute later on and change a little bit.
‫So first of all, I'm going to add a new message box here.
‫So it's just going to say something like welcome and then the user name.
‫So TB user name, dot text.
‫So it should welcome the person who tries to log in.
‫And that's pretty much everything this button is going to do in this example.
‫Now that we are and I'm going to add my username here or enter it, it's going to be Dennis and the
‫password is going to be password.
‫And as you can see, the password is hidden because it's a password box and it doesn't want to show
‫you any information.
‫So that's exactly what I wanted to happen.
‫So I'm going to press log in and it says, Welcome, Dennis.
‫So instead of just logging me in, this could sent me to a different window and or a different screen
‫where I see all the relevant information that is required.
‫So what if I don't want these dots to be here?
‫I want to have, let's say, access instead.
‫Well, then I can go into my password box and change its settings so I can change, for example, the
‫password char, which is going to be the password character.
‫And I can change that to, for example, this little star.
‫So let me run that again.
‫And you will see if I enter something now it's a star instead.
‫So you could even go ahead and do something like an H.
‫So instead of having the circle or the star, you will have H's now which hide the password.
‫So now somebody could think I have plenty of H's as my password, dear.
‫All right, so that's what you can play around with.
‫And there are plenty of other properties you can check out for the password box.
‫All right, so I'm going to go back to my star.
‫And what I would also like to add is a max length.
‫So you can see there is something called max length, a property.
‫And here I can specify how long the password has to be maximum.
‫So it shouldn't be longer than, let's say, eight characters because I just want to have this very
‫simple login box and some people are very disappointed about those kind of boxes where you only can
‫have eight characters because some passwords are just longer.
‫And then people have to think about new passwords.
‫So whenever you use something that that be very careful with that.
‫So in max length, maybe something like 25 or 20 should be good to go.
‫But eight, let's say I have eight and then I want to add another well character to my password.
‫It's not possible.
‫So you can see eight characters, nothing more than that.
‫So you can limit it straight away without having to inform the user afterwards.
‫Hey, this password is too long because you can only enter a specific amount of characters.
‫All right, so that's how you can use the password box in your UI.