Slider and Progress Bar in Qt and WP7

This code example shows how to create a slider and progress bar, and link their values together, using Qt and WP7.

Article Metadata

---

Code Example

Source file: Media:ProgressSliderWP7 v1.1.zip Media:ProgressSliderQML v1.1.zip

---

Tested with

SDK: Windows Phone SDK 7.1

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

---

Compatibility

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

---

Platform Security

Signing Required: Self-Signed

---

Article

Keywords: Slider, Progress Bar

Created: somnathbanik (20 Apr 2012)

Last edited: hamishwillee (30 Nov 2012)

Introduction

This article shows how to create a slider and progress bar in Qt (QML) and Windows Phone 7. When the slider value is changed we will change the value of the progress bar accordingly. A screenshot of the UI on both platforms is shown below:

• 

  Slider and Progress Bar in QML

• 

  Slider and Progress Bar in WP7

Note that in both cases we update the text and progress bar in an event handler when the slider changes. We could also have used data binding to link the slider and progress bar values.

Implementation

Qt Project (MainPage.qml)

We create a QML Slider Element and ProgressBar with a minimumValues of 0 and a maximumValues of 100:

Slider {
        maximumValue: 100
        minimumValue: 0
        value: 0
        stepSize: 5
        width: 300
        anchors.centerIn: parent
        onValueChanged:
        {
            progressValue = value;
            targetProgressBar.value = value;
        }
    }
 
ProgressBar {
        id: targetProgressBar
        minimumValue: 0
        maximumValue: 100
        value: 0
        indeterminate: false
        width:280
        anchors.top: textValue.bottom
        anchors.topMargin: 30
        anchors.horizontalCenter: parent.horizontalCenter
    }

When we move the Slider it emits the valueChanged signal, which is handled in onValueChanged(). In the handler we update the value of the Progress Bar, which we reference by its id. In the handler we also update the property progressValue with the slider value - while not shown here, this is a property of the parent object which is used to populate a text field with the slider value.

WP7 Project (MainPage.xaml)

For Windows phone we add a Slider, TextBlock and a ProgressBar in the XAML page, and set the minimum and maximum values to 0 and 100 as in the Qt example:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Slider Minimum ="0" Maximum="100"  Height="84" HorizontalAlignment="Left" Margin="12,363,0,0" Name="slider1" VerticalAlignment="Top" ValueChanged="slider1_ValueChanged" Width="434" />
            <TextBlock Height="71" HorizontalAlignment="Left" Margin="12,148,0,0" Name="textBlock1" Text="Progress 0%" VerticalAlignment="Top" Width="434" FontSize="38"  TextAlignment="Center"  />
            <ProgressBar Minimum="0" Maximum="100" Value="0" Height="33" HorizontalAlignment="Left" Margin="12,225,0,0" Name="progressBar1" VerticalAlignment="Top" Width="434"   />
</Grid>

When user moves the Slider the event handler slider1_ValueChanged() is called. This is where we update the progress bar and text block.

private void slider1_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            string msg = e.NewValue.ToString("0");
            this.textBlock1.Text ="Progress "+ msg+"%";
            progressBar1.Value = e.NewValue;
        }

Summary

This article is being created for beginners to show how the UI elements can relate with each other in both the platforms.

Source Code

• The full source code of Qt example is available here: File:ProgressSliderQML v1.1.zip
• The full source code of WP7 example is available here: File:ProgressSliderWP7 v1.1.zip