1 00:00:00,240 --> 00:00:01,020 ‫Welcome back. 2 00:00:01,050 --> 00:00:06,090 ‫In this video, we are going to check out the text box and the password box in combination. 3 00:00:06,090 --> 00:00:09,480 ‫So we're going to create a little log in screen here. 4 00:00:09,480 --> 00:00:11,250 ‫So let's go ahead and do that. 5 00:00:11,640 --> 00:00:16,050 ‫First of all, I'm going to make XAML a little bigger, and I don't want to use a grid here. 6 00:00:16,050 --> 00:00:22,860 ‫I'm just going to use a stack panel instead, which allows me to stack controls on top of each other. 7 00:00:22,860 --> 00:00:27,990 ‫I'm going to start with a label, so the user should know what kind of information should be entered. 8 00:00:27,990 --> 00:00:30,000 ‫So I'm going to start with username. 9 00:00:30,820 --> 00:00:35,050 ‫Then below that I would like to have a text box. 10 00:00:35,050 --> 00:00:47,710 ‫So I'm going to add a text box and that text box should have the name of text box user name. 11 00:00:47,890 --> 00:00:49,420 ‫So TB username. 12 00:00:49,810 --> 00:00:51,490 ‫So just a text box right now. 13 00:00:51,490 --> 00:00:55,870 ‫And as you can see, well, it's too close to the edges. 14 00:00:55,870 --> 00:01:01,510 ‫So I want to add a little margin to my STACK panel and I'm just going to go for ten pixels. 15 00:01:01,510 --> 00:01:04,840 ‫So now it has a margin towards all directions, as you can see. 16 00:01:05,440 --> 00:01:05,920 ‫All right. 17 00:01:05,920 --> 00:01:07,180 ‫So that's our text box. 18 00:01:07,180 --> 00:01:11,740 ‫Now, I want to have another label for my password. 19 00:01:11,740 --> 00:01:16,360 ‫So I'm just going to create one with password as its content. 20 00:01:16,840 --> 00:01:21,790 ‫And now below that, I'm just going to create the password box and that's it. 21 00:01:21,790 --> 00:01:27,550 ‫So there we are, we have our little password box and actually let me add a button below that as well. 22 00:01:27,550 --> 00:01:36,640 ‫So I'm going to create a new button, which is with a margin of, let's say five, and then we have 23 00:01:36,640 --> 00:01:39,970 ‫content of the log in. 24 00:01:40,240 --> 00:01:46,390 ‫So the text should be log in on that button and let's add a click event to it. 25 00:01:46,390 --> 00:01:50,740 ‫So click, click and I'm going to create a new event handler. 26 00:01:50,740 --> 00:01:52,150 ‫So that's our button. 27 00:01:52,480 --> 00:01:55,780 ‫As you can see, we have this little button here with this margin. 28 00:01:55,780 --> 00:01:59,470 ‫So it's not exactly the same width as those text fields. 29 00:02:00,010 --> 00:02:05,740 ‫And yeah, we can we can change that as we please, but that's going to be fine for now. 30 00:02:06,280 --> 00:02:14,050 ‫And now the password box is something that I want to execute later on and change a little bit. 31 00:02:14,050 --> 00:02:18,040 ‫So first of all, I'm going to add a new message box here. 32 00:02:18,040 --> 00:02:26,110 ‫So it's just going to say something like welcome and then the user name. 33 00:02:26,110 --> 00:02:28,960 ‫So TB user name, dot text. 34 00:02:29,200 --> 00:02:32,410 ‫So it should welcome the person who tries to log in. 35 00:02:32,410 --> 00:02:36,400 ‫And that's pretty much everything this button is going to do in this example. 36 00:02:38,120 --> 00:02:43,400 ‫Now that we are and I'm going to add my username here or enter it, it's going to be Dennis and the 37 00:02:43,400 --> 00:02:45,830 ‫password is going to be password. 38 00:02:45,830 --> 00:02:50,630 ‫And as you can see, the password is hidden because it's a password box and it doesn't want to show 39 00:02:50,630 --> 00:02:51,770 ‫you any information. 40 00:02:51,770 --> 00:02:54,620 ‫So that's exactly what I wanted to happen. 41 00:02:54,620 --> 00:02:57,410 ‫So I'm going to press log in and it says, Welcome, Dennis. 42 00:02:57,410 --> 00:03:03,800 ‫So instead of just logging me in, this could sent me to a different window and or a different screen 43 00:03:03,800 --> 00:03:07,730 ‫where I see all the relevant information that is required. 44 00:03:09,140 --> 00:03:13,040 ‫So what if I don't want these dots to be here? 45 00:03:13,040 --> 00:03:15,740 ‫I want to have, let's say, access instead. 46 00:03:15,980 --> 00:03:25,520 ‫Well, then I can go into my password box and change its settings so I can change, for example, the 47 00:03:25,520 --> 00:03:31,430 ‫password char, which is going to be the password character. 48 00:03:31,820 --> 00:03:36,350 ‫And I can change that to, for example, this little star. 49 00:03:36,710 --> 00:03:38,810 ‫So let me run that again. 50 00:03:39,810 --> 00:03:44,340 ‫And you will see if I enter something now it's a star instead. 51 00:03:44,550 --> 00:03:49,650 ‫So you could even go ahead and do something like an H. 52 00:03:50,250 --> 00:03:57,760 ‫So instead of having the circle or the star, you will have H's now which hide the password. 53 00:03:57,780 --> 00:04:02,760 ‫So now somebody could think I have plenty of H's as my password, dear. 54 00:04:02,880 --> 00:04:05,460 ‫All right, so that's what you can play around with. 55 00:04:05,730 --> 00:04:09,540 ‫And there are plenty of other properties you can check out for the password box. 56 00:04:09,840 --> 00:04:12,690 ‫All right, so I'm going to go back to my star. 57 00:04:12,690 --> 00:04:17,550 ‫And what I would also like to add is a max length. 58 00:04:17,550 --> 00:04:20,490 ‫So you can see there is something called max length, a property. 59 00:04:20,490 --> 00:04:24,600 ‫And here I can specify how long the password has to be maximum. 60 00:04:24,600 --> 00:04:29,790 ‫So it shouldn't be longer than, let's say, eight characters because I just want to have this very 61 00:04:29,790 --> 00:04:37,380 ‫simple login box and some people are very disappointed about those kind of boxes where you only can 62 00:04:37,380 --> 00:04:41,190 ‫have eight characters because some passwords are just longer. 63 00:04:41,190 --> 00:04:43,830 ‫And then people have to think about new passwords. 64 00:04:43,830 --> 00:04:46,740 ‫So whenever you use something that that be very careful with that. 65 00:04:46,740 --> 00:04:51,750 ‫So in max length, maybe something like 25 or 20 should be good to go. 66 00:04:51,750 --> 00:04:57,660 ‫But eight, let's say I have eight and then I want to add another well character to my password. 67 00:04:57,660 --> 00:04:58,410 ‫It's not possible. 68 00:04:58,410 --> 00:05:02,040 ‫So you can see eight characters, nothing more than that. 69 00:05:02,040 --> 00:05:06,900 ‫So you can limit it straight away without having to inform the user afterwards. 70 00:05:06,900 --> 00:05:12,120 ‫Hey, this password is too long because you can only enter a specific amount of characters. 71 00:05:13,500 --> 00:05:17,940 ‫All right, so that's how you can use the password box in your UI.