[eclipsed4utoo]

This will be the first of a number of posts highlighting the new controls that have been added to the WP7 Toolkit. It’s a really great set of tools that makes life easier for us developers.

Download WP7 Toolkit

So the first control I am going to talk about is the ToggleSwitch control. It’s a control that resembles a lightswitch and is a nice was of showing an On/Off or True/False setting instead of using a plain checkbox.

So let’s create a Windows Phone 7 project called ToggleSwitchDemo.

Open the Toolbox and find the ToggleSwitch control. If it’s not listed, right-click on the Toolbox –> Choose Items –> then scroll down until you find the ToggleSwitch control in the list.

Once the control is in the Toolbox, drag it onto the page. By default, it will look like this…

 11-14-2010-10-21-33-AM.png (29.42K)
Number of downloads: 8

Run the application using F5, then click on the ToggleSwitch. It will change from Off to On.
 11-14-2010-10-24-16-AM.png (14.59K)
Number of downloads: 2  11-14-2010-10-24-28-AM.png (14.62K)
Number of downloads: 1

There are a number of options that are available for the text for the ToggleControl. The Header property will change the heading of the control. The Content property will set the content of the control(On/Off).

In one of my application, I used the ToggleSwitch to allow the user to turn on/off Ads that I have in the app. So for me, I changed the Header to “Ads”, and since I default the ToggleSwitch to being On(IsChecked is True), I set the Content to “Ads are enabled“.

The ToggleSwitch also allows you to handle when the control is checked and unchecked. So here is how my ToggleSwitch would look in XAML…

<toolkit:ToggleSwitch
    Name="AdsToggleSwitch"
    Header="Ads"
    Content="Ads are enabled"
    Height="111"
    HorizontalAlignment="Left"
    Margin="1,197,0,0"
    VerticalAlignment="Top"
    Width="456"
    IsChecked="True"
    Checked="AdsToggleSwitch_Checked"
    Unchecked="AdsToggleSwitch_Unchecked" />

Then the code for the Checked and Unchecked events…

private void AdsToggleSwitch_Checked(object sender, RoutedEventArgs e)
{
     AdsToggleSwitch.Content = "Ads are enabled";
}

private void AdsToggleSwitch_Unchecked(object sender, RoutedEventArgs e)
{
     AdsToggleSwitch.Content = "Ads are disabled";
}

Now my control would look like this…
 11-14-2010-10-41-21-AM.png (16.03K)
Number of downloads: 4  11-14-2010-10-41-30-AM.png (16.12K)
Number of downloads: 1

The ToggleSwitch is a great control that allows your app to keep the “Metro” look and feel that a plain CheckBox wouldn’t allow you to do without custom coding.

[dawmail333]

I personally prefer this:

XAML File:

<toolkit:ToggleSwitch ... Checked="AdsToggleSwitched"
    Unchecked="AdsToggleSwitched" />

Code File:

private void AdsToggleSwitched(object sender, RoutedEventArgs e)
{
    Microsoft.Windows.Phone.Controls.ToggleSwitch ctrl = (Microsoft.Windows.Phone.Controls.ToggleSwitch)sender
    if(ctrl.IsChecked)
    {
        ctrl.Content = "Ads are enabled";
    }
    else
    {
        ctrl.Content = "Ads are disabled";
    }
}

A matter of semantics, I suppose, but I think it's neater.

This post has been edited by dawmail333: 04 December 2010 - 04:53 AM