As with any application there is usually the need to capture some type of user input. This may be in the form of gathering data like a user name or password or even just capturing a website address. If you have ever done windows application development, these types of items can be captured through two very popular controls, namely, the Textbox and the PasswordBox. While both of these still exists in Windows Phone 7, the Textbox control has a few tricks up its sleeves. One of the biggest tricks is the ability to optimize input on the screen for various types of user input set by input type. In this example, we will take a contact form to take traditional contact information from a user but optimize the keyboard for various inputs like phone, address, e-mail, and a few others.
To get ready for this part of the project, we will be editing the Contact.xaml in our example for this chapter to take some basic contact information for a customer. To begin, let's open the Contact.xaml in Expression Blend.
For the most part, we have the Contact.xaml open in Expression Blend. We will want to begin to layout our control to take the following information:
First Name and Last Name
Phone Number
E-mail Address
Website Address
Address Information (Address, City, State, Zip)
Comments
For the most part, this doesn't seem like anything out of the ordinary for building a form. We will leverage some of the techniques we learned for laying out controls in the layout example to build a very consistent UI:
1. Start by setting the Scrollbars to be Auto on the ContentPanel. This will automatically show the scrollbars once our form has grown past the possible viewable area on the screen, which can be found by expanding the Layout section and setting the
VerticalScrollBarVisiblein the properties window.2. Now let's select the ContentPanel in our
Contact.xamlfile's design surface. Then double-click the Grid control from the toolbox. As you can see, it creates a Grid control that is placed inside the ContentPanel, but one little problem—it doesn't actually fill the ContentPanel. By default, Blend creates a Grid with a few standard settings already set like height, width, and alignment. For our purposes, we actually want to reset those by right-clicking the Grid that you just created and clicking Auto Size | Fill. This will remove the default height, width, and alignment settings, which will cause the new Grid to fill its parent container.3. Now we will need to build our layout for controls. Since this is a very simple control, we will just place the controls on the screen. We will want to place both Textboxes and Textblock controls to identify which inputs are for each textbox. Drag the controls on the screen to look like this:
In this recipe, we discovered many of the basic input controls. These controls use simple input and place them in properties, which you can access from your code behind. This provides the easiest way of getting data input from your users.
Now that you have created your first form for data input, I am sure you can see the simplicity of creating forms. There's more to creating Windows Phone 7 applications than just adding textboxes on a form. We will use this form later for actually sending feedback. So go ahead, run the application, and navigate to the Contact page to find that you can add data using the controls.
As users get savvier with their mobile devices, they also have higher expectations for the application to know more about what they are doing. For example, in the form we just created, users will need to have data input that is more catered to the actual data they are inputting. By this I mean, if you are asking a user to input a phone number, don't show them a keyboard with the alphabet on it so they have to switch to the number and symbol keyboard. Wouldn't it make sense to simply show a numeric input?
So how do you customize these inputs? It is actually very simple. In Blend, select the phone number text box you created before. In the properties window, there is a property called InputScope; change this to TelephoneNumber. Now run the application and navigate to the contact page and try entering a phone number. Notice that instead of the standard keyboard, you get the number pad. This is a simple way to ease user input in your application with no code.
Now let's set a few others to be more optimized for that type of input:
First Name textbox: Set
InputScopetoPersonalGivenNameLast Name textbox: Set
InputScopetoPersonalSurNameEmail textbox: Set
InputScopetoEmailUserNameWeb Site textbox: Set
inputScopetoUriAddress textbox: Set
InputScopetoAddressStreetCity textbox: Set
InputScopetoAddressCityState textbox: Set
InputScopetoAddressStateOrProvince
So you may ask yourself, do I have to do this for every textbox? And the answer is no. But the question is should you do this, and the answer is yes. While this little tweaking doesn't seem to make a huge difference on some input, it is actually highly optimized to give the user the best keyboard for that input, even when it comes to other cultures and languages.
Also, while setting InputScope in Blend gives you a drop-down of a good number of input scopes, there are actually many that aren't displayed that are even more specialized. Here is the list of InputScope instances:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|