IT tutorials
 
Mobile
 

Windows Phone 8 : Controls in XAML (part 1) - Using Keyboards

2/1/2013 6:27:13 PM
- Windows 10 Product Activation Keys Free 2019
- How to active Windows 8 without product key
- Malwarebytes Premium 3.7.1 Serial Keys (LifeTime) 2019

Controls are no different from any other XAML elements you have seen so far. For example, here is the TextBox control:

<Grid>
  <TextBox Text="Hello World"
           Height="75"/>
</Grid>

This TextBox will show up like the drawing elements but will support the user interacting with the control through touch (as evidenced by the cursor shown in Figure 1).

Figure 1. TextBox control example

Image

Out of the box, XAML for Windows Phone supports these controls:

Button

CheckBox

HyperlinkButton

ListBox

PasswordBox

ProgressBar

RadioButton

RichTextBox

Slider

WebBrowser

TextBox

These controls represent the main form of interaction with users. While this list is somewhat abbreviated, these controls are specialized to support the Windows Phone touch interface. Most of these controls are built larger than you might imagine (and with large margins) to accommodate users touching them.

Most of the controls in XAML fit into one of three categories, which should help you to understand how the controls are expected to work:

• Simple controls

• Content controls

• List controls

Silverlight Controls

While many of the controls in Silverlight 4 (and the Silverlight Toolkit for Silverlight 4) will work with Windows Phone, Microsoft has not redesigned these controls to be easy to use with the phone. If you need these other controls, they are not forbidden; it is just up to you to change the way they look to conform to the Metro design language as well as make them work sufficiently with the touch-based input that is available on the phone.

The controls Microsoft chose have specific integration with the phone’s touch interface. When you start to look at other controls (e.g., ToolTip, Calendar, etc.), you will see that finding the right functionality for these controls in a touch environment is not simple. Therefore, you may want to stick with the built-in controls until you have a good feel for the way touch affects how users interact with the controls.

Simple Controls

The simple controls include the TextBox, PasswordBox, Slider, and ProgressBar. These controls have a simple API in that they do a specific job and look a certain way. They are, in a word, simple:

<StackPanel>
  <TextBox Text="Hello" />
  <PasswordBox PasswordChar="*" />
  <Slider Value="5" />
  <ProgressBar IsIndeterminate="True" />
</StackPanel>

Using Keyboards

The TextBox and PasswordBox controls support text input by the user. For devices with physical keyboards this is simple, but for the majority of devices (that don’t have physical keyboards) you must use a software input panel (SIP).  A SIP is shown when either of these controls has received focus. You can see the default SIP in Figure 2 (both the portrait and landscape versions).

Figure 2. Software input panel (SIP)

Image

The SIP attempts to put the most common keys directly on the keyboard but also supports ways of getting at the rest of the characters. Figure 3 shows you these special keys. These include the Shift key (#1 in the figure), the &123 key (#2), and special long-hold keys (such as the period key, #3).

Figure 3. Special SIP keys

Image

The long-hold keys offer a way to pop up commonly used keys without making the keyboard looked cramped. For example, in Figure 4 you can see the standard SIP’s period key when the user holds it for more than two seconds.

Figure 4. Long-hold keys

Image

This default look of the SIP is only one of many different layouts that are supported on the phone. When you are building applications that require text input you will want to tell the controls which SIP layout to use. Deciding on the features of the different SIP layouts is important. The faster users can enter data, the happier they will be.

Changing the look of the SIP is as simple as using something called an input scope. For example, you can specify that you want to have some chat features (such as a button for smiley faces) by using the chat input scope, like so:

<TextBox InputScope="Chat" />

This changes the SIP to be friendlier for a simple chat, as shown in Figure 5.

Figure 5. Chat input scope

Image

The chat input scope adds an emoticon button, as well as an Autocorrect panel, to help users more quickly type what they want to say. The items in the long-hold keys are also customized for the type of task that the input scope specifies. For example, when the user is typing on the SIP using the chat input scope, the exclamation point character is located in the period’s long-hold list. But if the user is typing a URL, the colon and slash characters are in the long-hold keys.

While there are a large number of input scopes you can use, for most applications the InputScope values listed in Table 1 should help you pick the right one for your use.

Table 1. Common InputScope Values

Image

 
Others
 
- Windows Phone 8 : XAML Overview - XAML Styling
- Enter Java ME on Symbian OS : Crossing to the Native Land of Symbian OS
- iphone Programming : Handling Data - Storing Data
- iphone Programming : Handling Data - Regular Expressions
- BlackBerry Java Application Development : Importing the HelloWorldDemo sample application
- BlackBerry Java Application Development : Starting the Eclipse IDE, Launching Eclipse for the first time
- Windows Phone 7 : Getting Started with XNA - Sprites in Detail (part 4) - Sprite Transparency, Alpha Tinting
- Windows Phone 7 : Getting Started with XNA - Sprites in Detail (part 3) - Partial Image Rendering, Layer Depth
- Windows Phone 7 : Getting Started with XNA - Sprites in Detail (part 2) - Rotation, Tinting
- Windows Phone 7 : Getting Started with XNA - Sprites in Detail (part 1) - Scaling
 
 
Top 10
 
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
- Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
- Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
programming4us programming4us
 
Popular tags
 
Video Tutorail Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Indesign Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe After Effects Adobe Photoshop Adobe Fireworks Adobe Flash Catalyst Corel Painter X CorelDRAW X5 CorelDraw 10 QuarkXPress 8 windows Phone 7 windows Phone 8 BlackBerry Android Ipad Iphone iOS