Book Image

Windows Phone 7 Silverlight Cookbook

By : Robb Schiefer Jr., Jonathan Marbutt, Robb Schiefer
Book Image

Windows Phone 7 Silverlight Cookbook

By: Robb Schiefer Jr., Jonathan Marbutt, Robb Schiefer

Overview of this book

Silverlight has revolutionized development using Microsoft technologies. It is an excellent tool for mobile application development. The XAML-based markup and familiar C# code are the perfect combination for building apps efficiently and with minimum hassle.Packed full of recipes containing comprehensive instructions for the tasks required to build modern compelling smartphone apps using Silverlight.Starting with application design and architecture, you will quickly move on to more technical features and APIs you can implement to make your app stand out. You will use the Camera API to scan barcode, location services to pinpoint the user’s GPS coordinates and accelerometer to provide feedback based on movement of the phone. All of these features can be provided in a slick user interface through the power of Silverlight. Animations, behaviors and XAML provide all you need and more.
Table of Contents (18 chapters)
Windows Phone 7 Silverlight Cookbook
About the Authors
About the Reviewers

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:


Address CountryName

AddressCountry ShortName

AddressState OrProvince


Alphanumeric FullWidth

Alphanumeric HalfWidth





CurrencyAmount AndSymbol

Currency Chinese









EmailNameOr Address








Katakana FullWidth

Katakana HalfWidth



NameOr PhoneNumber







Personal MiddleName

Personal NamePrefix

Personal NameSuffix






Regular Expression




Telephone CountryCode

Telephone LocalNumber