Revision as of 08:20, 30 November 2012 by hamishwillee (Talk | contribs)

Basic Slider control in Windows Phone

From Nokia Developer Wiki
Jump to: navigation, search
WP Metro Icon UI.png
SignpostIcon XAML 40.png
WP Metro Icon WP8.png
SignpostIcon WP7 70px.png
Article Metadata
Code ExampleCompatibilityArticle
Created: pooja_1650 (25 Jan 2012)
Last edited: hamishwillee (30 Nov 2012)



This article will help us in creating a Slider Control whose value will be bind to a text box. Hence whenever the value of slider control will change corresponding value will be reflected in the text box.

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, Text Box & Text Block 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" />

Binding the Text Box with the Slider's value

  • To bind the Text Box control with the value of Slider control, we need to set the 'Text' property of Text Box 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.
792 page views in the last 30 days.