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.

Revision as of 05:16, 27 June 2013 by hamishwillee (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Slider and Progress Bar in Qt and Windows Phone

From Wiki
Jump to: navigation, search

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

WP Metro Icon Porting.png
SignpostIcon XAML 40.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: Slider, Progress Bar
Created: somnathbanik (20 Apr 2012)
Last edited: hamishwillee (27 Jun 2013)



This article shows how to create a slider and progress bar in Qt (QML) and Windows Phone. 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:

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.


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
progressValue = value;
targetProgressBar.value = value;
ProgressBar {
id: targetProgressBar
minimumValue: 0
maximumValue: 100
value: 0
indeterminate: false
width:280 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" />

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;


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

Source Code

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