Use the Textbox to gather text input from the user, or to show editable text in the UI.
- [Instructor] Use the text box to gather text input from the user or to show editable text in the UI. In this example I have one text box on this page, and I've defined a style at the top for the text box that sets its margin and the text. You might think it's unusual to have a style where I've hard coded the text for every text box, but for my purposes in the demo application it's nice because I can leave the text up here at the top, and that doesn't clutter the view of our demo Xamel here on the bottom of the page.
First step I'd like to show you is the default behavior that's built into the text box. First thing you'll notice, is that it's only showing a single line of text. The text is scrolling off the right edge of the screen here. I can still see that if I move my mouse arrow. I can continue to move to the right to see the extra text. The text box itself supports the left and right arrows. It also supports the mouse for clicking and moving the insertion point.
Other features of the mouse is I can double click on a word to select it in the text box. I can hold down the shift key and click to extend the selection. I can also do the same thing with the keyboard, so hold down the shift key and then tap the arrows just like I am, or I can hold down the shift control, left and right arrow to select my words. Once I have the words selected, I can do a control X to cut them, control V to paste them back. If you prefer context menus, you can right click and get cut copy and paste through a menu.
That's the basic behavior of the text box. Now I'll alter some properties to make the text easier for the user to read. First step is to change the text wrapping. What you see in the designer is that the height of the text box has increased. Essentially, I'm telling the text box it's okay to increase the height to show all of the text. That's good, this works in a lot of situations.
If you're in a scenario where you can't afford all the screen real estate for this text, especially if there's more text than this, you might want to limit the height of this text box. The wrong way to do it would be to come in here and set the height equal to some hard coded value. That's never a good idea in WPF because it ruins the responsive design part of WPF. It's better to use a property of the text box called MinLines and MaxLines. So I'll say I require a minimum of two lines, and I don't allow any more than three lines.
Now, I've got a shorter text box. I still have all the text in there, but I can see more of it, and the reason why this is a better approach than using the hard coded height is when it comes to changing the font size, if I make it smaller, say 10 points, I still get three lines. If I make it bigger, I still get three lines. So it's flexible, it increases its height. It gets taller, but it's doing it in a flexible fashion. Now the user can scroll up and down in this restricted height text box.
Now let's see what that looks like. Here we are on the last line. I'll press the down arrow, and you'll see it's scrolling down through the rest of the text. Many of your users will expect to see a scroll bar when there's scrollable content, so let's add that to our text box. This is done through an attached property. It's actually part of something called the scroll viewer. Like this, and I can set it to auto, which means it will appear as needed.
For my demonstration, I'll set it to visible, and you see it appears in the designer and it also appears at run time. Now the user can grab this to scroll up and down through the text. The last property we'll look at is AcceptsReturn. See, there's one called AcceptsTab and one called AcceptsReturn. So if I set this to true, now I can use the enter key to add a new line to the text box.
Put my cursor here, press the enter key, and I'm adding blank lines to the text box. If I had left this at the defaults, the enter key would not have added any new lines, it would have just ... (clicking) Does nothing while it's in this text box. Now we've taken a brief look at the properties that are part of the text box. In the next video, I'll look at how to select the text, how to programmatically select the text that's inside the text box.
- Interactions and controls
- UIElement family
- FrameworkElement family
- Shape family
- Decorator Family
- Control Fundamentals
- Button family
- Text Editor family