Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Toggle Switch and Progress Bar in Qt and Windows Phone

From Wiki
Jump to: navigation, search

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

WP Metro Icon Porting.png
WP Metro Icon WP8.png
SignpostIcon WP7 70px.png
Article Metadata
Code ExampleTested with
Devices(s): N8(Nokia Belle), Nokia Lumia 820, Lumia 920
Platform(s): Windows Phone 8.0/ 7.1, Symbian^3 OS
Windows Phone 8
Windows Phone 7.5
Platform Security
Signing Required: Self-Signed
Keywords: Toggle Switch, Progress Bar
Created: somnathbanik (19 Apr 2015)
Last edited: hamishwillee (27 Jun 2013)



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.


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

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
if(progressBar1.value < progressBar1.maximumValue)
progressBar1.value += 0.3
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;
else if(text === "Progress Bar Off" )

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 Windows Phone 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.


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()
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;
private void switch_Unchecked(object sender, RoutedEventArgs e)
ToggleSwitch.Content = "Progress Bar Off";
progressBar1.Value = 0;

Source Code

This page was last modified on 27 June 2013, at 05:17.
86 page views in the last 30 days.