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
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
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)
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
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
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
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