Namespaces

Variants
Actions

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 over the next few weeks. Thanks for all your past and future contributions.

Basic Slider control in Windows Phone

From Wiki
Jump to: navigation, search

This article shows how to create a Slider that has its position bound to the value in a TextBox. Changes in the value of either the Slider or TextBox are reflected in each other.

WP Metro Icon UI.png
SignpostIcon XAML 40.png
WP Metro Icon WP8.png
SignpostIcon WP7 70px.png
Article Metadata
Code ExampleTested with
SDK: Windows Phone 8.0/7.1
Devices(s): Nokia Lumia 920, Nokia Lumia 800
CompatibilityArticle
Created: pooja_1650 (25 Jan 2012)
Updated: pooja_1650 (27 May 2013)
Last edited: hamishwillee (31 Jul 2013)

Starting a New Project

  • Create a new project in Visual Studio 2010 from File | New Project | Windows Phone Application - Visual C#. Give a desired name of the project.

Making UI

  • Drag and drop a Slider control, TextBox and TextBlock from the ToolBox to the design view of the MainPage.xaml file.
  • Slider Control has 5 main properties - Minimum, Maximum, Value, Small Change & Large Change.
  • 'Minimum' reflects the minimum value a slider control can possess, here we are setting it to 10. Similarly, 'Maximum' reflects the maximum value a slider control can possess, here we are setting it to 100. *'Value'- as the name suggests depicts the value the slider control currently possess, by default we are setting it to 30.
  • 'Small Change' & 'Large Change' are the values by which the slider's value will be incremented on using the thumb of slider. Here we are setting the value of 'Small Change' as '10' and 'Large Change' as 20.
  • Mathematically, Minimum Value <= Value <= Maximum Value
  • After placing the controls, the screen look something like as shown in screenshot.
    Ui SliderControl.PNG
  • The code in code view should be like:
            <!--ContentPanel - place additional content here-->
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <Slider Height="84" HorizontalAlignment="Left" Margin="45,51,0,0" Name="slider1"
    VerticalAlignment="Top" Width="369" Minimum="10" Maximum="100" Value="30"
    SmallChange="10" LargeChange="20"/>
    <TextBox Height="72" HorizontalAlignment="Left" Margin="107,141,0,0" Name="textBox1"
    VerticalAlignment="Top" Width="120" />
    <TextBlock Height="30" HorizontalAlignment="Left" Margin="233,169,0,0" Name="textBlock1" Text="%" VerticalAlignment="Top" />
    </Grid>
    </Grid>

Binding the Text Box with the Slider's value

  • To bind the TextBox control with the value of Slider, we need to set the Text property of TextBox as
    Text="{Binding Value, ElementName=slider1}"
    Binding is always done inside curly braces with the keyword 'Binding'. So here we are binding the Text Box value with the element having name "slider1".
  • After above binding, our Text Box code should look like
                <TextBox Height="72" HorizontalAlignment="Left" Margin="107,141,0,0" Name="textBox1" 
    Text="{Binding Value, ElementName=slider1}" VerticalAlignment="Top" Width="120" />
  • Now we need to build the program by F6 and run it via Ctrl+F5 and hence we will see that on changing the slider's value, the text box value is also changed in correspondence.
This page was last modified on 31 July 2013, at 01:46.
584 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×