Windows Phone 7 Settings & The ToggleSwitch Control of Toolkit

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 . You will see the list of applications. Tap on settings option

You will see the following settings page:

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. 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.   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: 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 .

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.

ToggleSwitch on Dark Theme with Off State	ToggleSwitch on Dark Theme with On State
ToggleSwitch on Light Theme with Off State	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.

Toggle Switch Themed and in Off State

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.