Discovering the various input controls

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.

Getting ready

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.

How to do it...

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. 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 VerticalScrollBarVisible in the properties window.

2. 2. Now let's select the ContentPanel in our Contact.xaml file'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. 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:

   

How it works

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.

There's more...

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 InputScope to PersonalGivenName

• Last Name textbox: Set InputScope to PersonalSurName

• Email textbox: Set InputScope to EmailUserName

• Web Site textbox: Set inputScope to Uri

• Address textbox: Set InputScope to AddressStreet

• City textbox: Set InputScope to AddressCity

• State textbox: Set InputScope to AddressStateOrProvince

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:

AddressCity	Address CountryName	AddressCountry ShortName	AddressState OrProvince
AddressStreet	Alphanumeric FullWidth	Alphanumeric HalfWidth	ApplicationEnd
Bopomofo	Chat	CurrencyAmount	CurrencyAmount AndSymbol
Currency Chinese	Date	DateDay	DateDayName
DateMonth	DateMonthName	DateYear	Default
Digits	EmailNameOr Address	EmailSmtpAddress	EmailUserName
EnumString	FileName	FullFilePath	Hanja
Hiragana	Katakana FullWidth	Katakana HalfWidth	LogOnName
Maps	NameOr PhoneNumber	Number	NumberFullWidth
OneChar	Password	PersonalFullName	PersonalGivenName
Personal MiddleName	Personal NamePrefix	Personal NameSuffix	PersonalSurname
PhraseList	PostalAddress	PostalCode	Private
Regular Expression	Search	Srgs	TelephoneAreaCode
Telephone CountryCode	Telephone LocalNumber	TelephoneNumber	Text
Time	TimeHour	TimeMinorSec	Url
Xml	Yomi