Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Windows Phone 7 Settings & The ToggleSwitch Control of Toolkit

DZone's Guide to

Windows Phone 7 Settings & The ToggleSwitch Control of Toolkit

· Mobile Zone
Free Resource

Download this comprehensive Mobile Testing Reference Guide to help prioritize which mobile devices and OSs to test against, brought to you in partnership with Sauce Labs.

In my previous Post, I had explained what Windows Phone 7 Toolkit controls are.

In this post I will explain how to change the basic settings of Windows Phone 7. This will be important if you are developing applications for the Phone, so you should be aware of the Basic visual settings provided in the Phone.

Later in the post I will show what ToggleSwitch is.

On the Home page tap the Arrow button AppButton. You will see the list of applications. Tap on settings option Settings

You will see the following settings page:

SettingsPage 
 
Tap on the Theme option, which shows the Theme screen which has two options:

- Background &

- Accent Color.

Background allows you to select the whole look of the phone, you can set either Dark or Light.

theme

We will tap on Background option. You can see the two options as below. We will select light. The background color turns to Light and the Foreground color takes the Dark color.

 Background

Second option on the themes page is Accent color. This defines the color of tiles on home page, or the color of the Hyperlink, ProgressBar, Slider etc. By default the color is set to blue. When you tap on Accent colors you will get 9 options as shown below:

image image image image image image image image image image
Magenta Purple Teal Lime Brown Pink Orange Blue Red Green

You can tap on any of the color you want to set as the Accent color. In our case we will select orange. Now when you go back to the app list you will see that the color of settings link has changed to orange color image.

ToggleSwitch

ToggleSwitch button was introduced in the Toolkit Controls set. It is one of the very important components for the Phone, since it allows the user to make Boolean choices, like whether to keep Wifi in phone on/off and similar other decisions.

Below I am showing the different looks & states a ToggleSwitch can have.

ToggleSwitchBlack
ToggleSwitch on Dark Theme with Off State
 ToggleSwitchBlackOn
ToggleSwitch on Dark Theme with On State 
ToggleSwitchWhite
ToggleSwitch on Light Theme with Off State
ToggleSwitchWhiteOn 
ToggleSwitch on Light Theme with On State

Please note that the color of Switch in On state is Orange because we had set the accent color to orange.

The beauty of WPF & Silverlight is that it allows the designer to change the look of the controls by creating styles. Same applies for controls of Windows Phone 7. Currently the Implicit Styles are not supported on Windows Phone 7, but you can theme a control by providing a key to the style and then applying that key to the control.

I have created a sample theme for the ToggleSwitch. it uses a bit of gradients to define the look, but I have ensured that the accent color is used, so that the control follows the look user has selected in phone settings.

ToggleSwitchThemedOff
Toggle Switch Themed and in Off State
ToggleSwitchThemedOn
Toggle Switch Themed and in On State

You can see that the look of the control has changed but it still uses the accent color and hence maintains a uniformity with the central theme selected by the user for the Phone. If the user selects accent color as green, this ToggleSwitch will according have Green color in the On State.

Analysts agree that a mix of emulators/simulators and real devices are necessary to optimize your mobile app testing - learn more in this white paper, brought to you in partnership with Sauce Labs.

Topics:

Published at DZone with permission of Parvez Ansari, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}