Toggle Switch and Progress Bar in Qt and WP7

This article demonstrates how to use a Toggle Switch and a Progress Bar in Qt and WP7.

Article Metadata

---

Code Example

Source file: Media:ProgressSwitchWp7.zip Media:ProgressSwitchQML.zip

---

Tested with

SDK: Windows Phone SDK 7.1

Devices(s): N8(Nokia Belle), Windows Phone

---

Compatibility

Platform(s): WP7.5, Symbian^3 OS

---

Platform Security

Signing Required: Self-Signed

---

Article

Keywords: Toggle Switch, Progress Bar

Created: somnathbanik (19 Apr 2013)

Last edited: hamishwillee (30 Nov 2012)

Introduction

The code examples both have a Toggle Switch and a Progress Bar. When the toggle switch is "On" a timer is used to update the progress bar value. The progress bar stops if the switch is set to Off.

• 

  Toggle Switch and Progress Bar in QML

• 

  Toggle Switch and Progress Bar in WP7

Implementation

Qt Project (MainPage.qml)

To create a toggle switch and progress bar in QML we use the QML Switch Element and QML ProgressBar Element.

Switch {
    id: toggleSwitch
    }
 
ProgressBar {
    id: progressBar1
    minimumValue: 0
    maximumValue: 100
    value: 0 //initial value is 0!
    indeterminate: false
    width:300
    }

To update the ProgressBar value a Timer is added. The timer stops when the ProgressBar value is maximum

Timer {
        id: progressTimer
        interval: 100
        repeat: true
        running: false
        onTriggered:
        {
            if(progressBar1.value < progressBar1.maximumValue)
                 progressBar1.value += 0.3
            else
            {
                progressBar1.value = progressBar1.maximumValue
                progressTimer.stop(); //or could set running=false
            }
        }
    }

To get the On/Off status of the ProgressBar we add a Text Element and check the text change value in onTextChanged.

Text {
                height: toggleSwitch.height
                verticalAlignment: Text.AlignVCenter
                text: toggleSwitch.checked ? "Progress Bar On" : "Progress Bar Off"
                font.pixelSize: platformStyle.fontSizeMedium
                color: platformStyle.colorNormalLight
                onTextChanged: {
                    if(text === "Progress Bar On" )
                    {
                        progressBar1.value = 0;
                        progressTimer.start();
                    }
                    else if(text === "Progress Bar Off" )
                     {
                        progressBar1.value=0;
                        progressTimer.stop();
                    }
                }
            }

When the toggle switch is checked we set the text value to Progress Bar On, otherwise set to Progress Bar Off. In onTextChanged we check the value of the text field, and start() or stop() the ProgressBar Timer.

WP7 Project (MainPage.xaml)

To use Toggle Switch in WP7 first we add the reference Microsoft.Phone.Controls.Toolkit into our project, which is available in Silverlight Toolkit. Next, add a reference to the assembly in the XAML page.

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

Now we create the toggle switch in the XAML page.

  <toolkit:ToggleSwitch x:Name="ToggleSwitch" Header="Toggle Switch" IsChecked="false" Content="Progress Bar Off" Checked="switch_Checked" Unchecked="switch_Unchecked"/>

In this case the current value of the IsChecked is false, so the switch is in Off state. The Checked and Unchecked event handlers are called when the status of toggle switch is On or Off accordingly. We add a ProgressBar and set its IsIndeterminate value to false and initial Value to zero.

We create a Timer which updates the ProgerssBar value at a particular interval of time.

DispatcherTimer timer = new DispatcherTimer();
        // Constructor
        public MainPage()
        {
            InitializeComponent();
            timer = new DispatcherTimer { Interval = new TimeSpan(5000) };
            timer.Tick += timer_Tick;
          }
        void timer_Tick(object sender, EventArgs e)
        {
            progressBar1.Value += progressBar1.SmallChange;
        }

Now when user Checked or Unchecked the toggle switch the event handlers are called which update the toggle switch content, reset the ProgressBar value to zero and Start() or Stop() the Timer.

private void switch_Checked(object sender, RoutedEventArgs e)
        {
            ToggleSwitch.Content = "Progress Bar On";
            progressBar1.Value = 0;
            timer.Start();
        }
private void switch_Unchecked(object sender, RoutedEventArgs e)
        {
            ToggleSwitch.Content = "Progress Bar Off";
            progressBar1.Value = 0;
            timer.Stop();
        }

Source Code

• The full source code of Qt example is available here: File:ProgressSwitchQML.zip
• The full source code of WP7 example is available here: File:ProgressSwitchWp7.zip