(For more resources related to this topic, see here.)

Supported controls in Windows Phone

The following list will illustrate the different controls supported in Windows Phone. These controls are included in the System.Windows.Controls namespace in the .NET Framework class library for Silverlight:

Button: As the name goes, this is a button wherein a user interacts by clicking on it. On clicking, it raises an event.
HyperlinkButton: This is a button control that displays a hyperlink.
When clicked, it allows users to navigate to an external web page or
content within the same application.
ProgressBar: This is a control that indicates the progress of an operation.
MessageBox: This is a control that is used to display a message to the user and optionally prompts for a response.
TextBox: This is a control that allows users to enter single or multiple lines
of text.
Checkbox: This is a control that a user can select or clear, that is, the control
can be checked or unchecked.
ListBox: This is a control that contains a list of selectable items.
PasswordBox: This is a control used for entering passwords.
RadioButton: This is a control that allows users to select one option from
a group of options.
Slider: This is a control that allows users to select from a range of values
by moving a thumb control along a track.

Hello world in F#

The previous section gave us an insight into different controls available for Windows
Phone applications. Before understanding how to work with them, let's create a
Windows Phone "Hello World" application using F#. The following steps will help
us create the application:

Create a new project of type F# and C# Windows Phone Application
(Silverlight)A solution with App and AppHost projects will be created:

Image
In the App project, we will have the main visual for the application called
MainPage.xaml. If you open MainPage.xaml, you will notice that MainPage
is actually a PhoneApplicationPage type. This is evident from the following
XAML declaration:

code

Note the x:Class attribute; this denotes that the XAML contains a
counterpart class called MainPage available in the WindowsPhoneApp
namespace. The MainPage class can be found in the AppLogic.fs file
in the App project.
Let us take a closer look at the UI itself. The main contents of the application
is contained in a grid. A grid is a layout control that is used to define a flexible
area that consists of rows and columns. The body contains three TextBlock
controls. A TextBlock control, as the name suggests, is used to display a
small block of text. We have three TextBlock controls on the page, one for
ApplicationTitle, another for PageTitle, and the last one for Results.
There is also an empty grid named ContentGrid. So this is where we will
be creating our "Hello World" experiment. The XAML for the content is
shown as follows:

code

As you can see from the code, ContentGrid is empty. So let's place a
TextBlock control and a Button element inside ContentGrid. The idea
is to generate the text "Hello World" when we click on the button.
First, let's take a look at the XAML portion of the "Hello World" experiment
in MainPage.xaml:

code

Pay attention to the TextBlock element and the Button names.
We have the TextBlock control named as txtMessage and Button
named as btnSayHelloButton.
Now the second part of this experiment is to wire up the button's Click
event with an event handler in the MainPage class. In the AppLogic.fs file,
find the MainPage type and add the following code:

code
First we create a reference to the text block and the button. Then we add
an event handler to the button's Click event. In F#, the way we add event
handlers is by writing a function using the fun keyword. The _ (underscore)
tells the F# compiler to ignore the parameters of the function and then we
define the statement of a function. On button click, we just change the text
of the text block to say "Hello World !". Well, that's all there is to this "Hello
World" experiment.

Notice the use of the ? operator. This is not F#-specific
code. Rather, the project template creates a module in the
AppLogic.fs file called Utilities. There, ? is defined
as an operator that can be used for dynamic lookup of
XAML object names for binding purposes.

The code snippet of the operator is shown as follows:

code
Now let's build and run the project. Windows Phone Emulator will be
invoked by Visual Studio to deploy the app we just built. You will see a
text block with the text Click the button and a button with the text Click
to Say Hello !. When the button is clicked, the text block will show the text
Hello World !. The screenshots of the final output are shown as follows:

Image

Working with the Button control

A button, as the name goes, is a rectangular control that allows a user to click on it,
and when clicked, raises a Click event. We can write listeners for this Click event
and add an event handler for the Click event. When the Click event occurs, the
event handler will be notified and we can run our business logic against the button
click—whatever logical thing we need. Let's see how to work with the button control.

Create a project and add three buttons in the XAML code. For the first button, we
will set its properties from the XAML itself. For the second button, we will set the
properties from the code. For the third button we will set its properties in its Click
event. The XAML code snippet is shown as follows:

code

For the second and third button, except for its Content attribute, nothing is set
in XAML. The properties for the second button is set on the page load event in
the MainPage class. The properties for the third button is set on the click of the
third button in an event handler. Now let us see the F# code snippet for this in
the MainPage class:

code

One thing to learn from here is—whatever properties can be set from XAML,
the same can also be set from the code. The preceding demo shows how at page
load and with event handlers, a control's properties can be changed at runtime.
The screenshot of the final output is shown as follows:

Image

Working with the Checkbox control

As mentioned earlier, Checkbox is a control that allows a user to select or clear an
option. We can use a Checkbox control to provide a list of options that a user can
select, for example a list of settings to apply in an application. The Checkbox control
can have three states namely Checked, Unchecked, and Indeterminate.

To demonstrate this control usage, let's build a demo that contains two checkboxes.
The first checkbox demonstrates the Checked and Unchecked states. The second
checkbox demonstrates the Checked, Unchecked, and Indeterminate states. We will
handle the Checked event when checkboxes are checked, and the Unchecked event
when checkboxes are unchecked. The XAML code snippet for this demo is shown
as follows:

code

As you can see, we have two checkboxes stacked vertically one below the other.
StackPanel is a layout control, which, as its name goes, just stacks its children
content either vertically or horizontally. The second checkbox has a Boolean property
named IsThreeState set to true. That means this checkbox will have three states –
Checked, Unchecked, and Indeterminate. Checkboxes expose Checked, Unchecked,
and Indeterminate events. We will wire up event handlers for these events and
write out a message to the txtMessage text block as seen in the code snippet.
The following is the code snippet where we handle the events:

code

We first get a reference to the checkbox controls. Then we wire up the Checked and
Unchecked events. For the second checkbox, since it supports the Indeterminate
state, we wire up the Indeterminate event too. When you run the app and select
or clear any checkbox, a message will be shown in the text block. The screenshot
of the output is shown as follows:

Image

Working with the Hyperlink control

Hyperlink is a control that presents a button control with a hyperlink. When the
hyperlink is clicked, it will navigate to the URI specified, which can be an external
web page or content within the app. We specify the URI to navigate through the
NavigateUri property. The XAML code snippet for this control is shown as follows:

code

The same effect can be obtained using code. On page load, we would have to just
set the NavigateUri property, and when the user clicks on the hyperlink button,
he will be navigated to the set URI.

Working with the ListBox control

A ListBox control represents a list of selectable items. It basically displays a collection
of items. More than one item in a ListBox control is visible at a time.

As part of the demo app, we will create a listbox and fill it with available color
names. When an item is selected in the listbox, we will set the background of
the listbox to the selected item. The XAML code snippet is shown as follows:

code

The code to fill up the listbox with the names of the colors along with the event handler
to handle the listbox's SelectionChanged event is shown as follows:

code

For filling up the listbox with color names, we iterate through the public properties
of the System.Windows.Media.Colors class. The Colors class implements a different
set of predefined colors. We fill the listbox with the names of the predefined colors by
adding them to the Items collection of the listbox.

To handle item selection change, we handle the SelectionChanged event. First,
we get the SelectedItem property, and since we know it's a string in our case,
we convert it into a string. Then we get the Color property by making use of the
string that we converted from SelectedItem. Once we get the color, we set the
background of the listbox to the color selected.

The final output of this demo is shown as follows:

Image

Working with the MessageBox control

In this section we will take a look at the MessageBox control. This control displays
a message to the user and optionally prompts for a response. The MessageBox class
provides a static Show method, which can be used to display the message in a simple
dialog box. The dialog box is modal and provides an OK button.

A code to work with the MessageBox control is shown next. Note that this can be
worked with only from the code and not from the XAML. First, we show a message
box with the ok and cancel button. When a user clicks on the ok button, we show a
simple message box with just the ok button.

code

The final output of this demo is shown as follows:

Image

Working with the PasswordBox control

PasswordBox, as the name suggests, is used to enter a password in applications.
The user cannot view the entered text; only password characters that represent
the text are displayed. The password character to be displayed can be specified
by using the property PassowrdChar.

Add PasswordBox, Button, and TextBlock in the XAML code. The idea is to enter
some text in the PasswordBox control, and on clicking the button show the password
text in the text block. The XAML for this demo is shown as follows:

code

The code to handle the button click and display the password entered in the text block
is shown as follows:

code

The password box contains a property called Password, which can be used to read
the entered password. The final output of the demo is shown as follows:

Image

Working with the ProgressBar control

The ProgressBar control is used to display the progress of an operation. This is often
used in UI layouts to indicate a long running operation. One of the requirements of
the Windows Phone app is to include a progress bar and show a progress animation
whenever a task is a long-running task in any application. The progress bar can have
a range between Minimum and Maximum values. It also has an IsIndeterminate
property, which means no Minimum and Maximum value is set and the progress bar
displays a repeating pattern. This is predominantly used in XAML and its visibility
is controlled by the code. The XAML code snippet is shown as follows:

code

Working with the RadioButton control

RadioButton is a control, which represents a button that allows a user to select a
single option from a group of options. A RadioButton control is usually used as one
item in a group of RadioButton controls. RadioButtons can be grouped by setting
their GroupName property. To group radio buttons, the GroupName property on each
of the radio button should have the same value. RadioButtons contain two states,
namely selected or cleared. RadioButtons have the IsSelected property, which
will let us know if a radio button is selected or not.

Create three radio buttons in XAML. Two of them will be grouped and one will be
ungrouped. We will listen for the Checked event on the radio buttons and update a
text block with the appropriate message. The XAML code snippet is shown as follows:

code

As you can see, the first two radio buttons have their GroupName property set
whereas the last radio button does not have any GroupName set. We will wire up the
Checked event on all three radio buttons and update the text block with information
such as which radio button was clicked. The code snippet is shown as follows:

code

The output from this demo is shown as follows:

Image

Working with the Slider control

The Slider control represents a control that lets users select from a range of values
by moving a thumb control along a track.

The Slider control exposes certain properties that can be set to customize the
functioning of the slider. We can set the Orientation property to orient the slider
either horizontally or vertically. We can change the direction of the increasing value
with IsDirectionReversed. The range of values can be set using the Minimum and
Maximum properties. The value property can be used to set the current position of
the slider.

Add a Slider control to the XAML. Set its Minimum to 0 and Maximum to 10.
When the user changes the position of the thumb on the slider, we will listen
to the ValueChanged event on the slider and show the current value in a text
block. The XAML snippet for the slider is shown as follows:

code

As you can see, we set the Minimum and Maximum range in the XAML. From the
code, we wire up the ValueChanged event. Whenever a user changes the value
using the thumb on the slider, the ValueChanged event will be fired and we just
read the current value of the slider and update a text block. The final output of
this demo is shown as follows:

Image

Working with the TextBox control

The TextBox control can be used to display single or multiline text. It is often used to
accept user input in applications. This control is one of the most widely used controls
for data input.

On a Windows Phone, whenever a textbox gets focus, an on-screen keyboard known
as Software Input Panel (SIP) will be shown automatically by the Windows Phone
OS. If we do not want the user to edit the text, we can set the IsReadOnly property
on the textbox to true. This will prevent the user from typing anything in the textbox.
We can read the value entered in a textbox using the i property. The XAML snippet
for a simple textbox is shown as follows:

code

A screenshot of a simple textbox with SIP displayed when the textbox gets focus is
shown as follows:

Image

Summary

In this article, we took a lap around the supported controls for the Silverlight runtime on the Windows Phone platform. We looked at the XAML way of defining the controls and also how to programmatically work with these controls in the code. We learnt what properties each control exposes and how to wire up events supported by each control.