How to add a slider (XAML)

Applies to Windows and Windows Phone

This tutorial walks you through the steps to add a slider to a Windows Runtime app using C++, C#, or Visual Basic.

You typically add a slider in the Extensible Application Markup Language (XAML) editor or using a design tool like Blend for Visual Studio. You can also add a slider in code at runtime.

Roadmap: How does this topic relate to others? See:

What you need to know

Technologies

Prerequisites

Instructions

Step 1: Add a slider in XAML

Hh868197.wedge(en-us,WIN.10).gifTo add a slider in XAML

  1. Add a Slider control to a parent container.
  2. To assign a name to the slider, set the x:Name attribute to a string value.

    To refer to a control in code, it must have a name. Otherwise, a name is not required.

  3. To perform an action when the slider value changes, add a handler for the ValueChanged event. In the ValueChanged event handler, add code to perform some action.
    
    <Slider x:Name="slider1" Width="100" ValueChanged="Slider_ValueChanged" />
    
    
    
    
    Private Sub Slider_ValueChanged()
        ' Add code to perform some action here.
    End Sub
    
    
    

    To check the value of the slider outside of the ValueChanged event, use the Value property.

Step 2: Add a slider in code

Hh868197.wedge(en-us,WIN.10).gifTo add a slider in code

  1. Create a new Slider.
  2. To perform an action when the slider value changes, add a handler for the ValueChanged event. In the ValueChanged event handler, add code to perform some action.
  3. Add the Slider to a parent container in the visual tree to make the slider show in the UI.
    
    ' Create a new slider and add a ValueChanged event handler.
    Dim slider1 = New Slider()
    slider1.Width = 100
    AddHandler slider1.ValueChanged, AddressOf Me.Slider_ValueChanged
    
    ' Add the slider to a parent container in the visual tree.
    stackPanel1.Children.Add(slider1)
    
    
    
    
    Private Sub Slider_ValueChanged()
        ' Add code to perform some action here.
    End Sub
    
    
    

    To check the value of the slider outside of the ValueChanged event, use the Value property.

Step 3: Add a slider using a design tool

Hh868197.wedge(en-us,WIN.10).gifTo add a slider using a design tool

  1. Select the Slider control.
    • In Microsoft Visual Studio, pick the Slider in the Toolbox pane.

      You might need to expand the All XAML Controls section if it's collapsed.

    • In Blend for Visual Studio, pick the Slider in the Assets pane.

      Select Controls in the left side of the Assets pane if it's not selected.

  2. Add a Slider to the design surface. Do one of these:
    • Double-click the slider. The slider is added to the selected parent container with default position and size settings.
    • Drag the slider to the design surface and drop it. The slider is added in the position where you drop it with default size settings.
    • Draw the slider control onto the design surface. The slider is added with the size and position settings that you draw.
  3. If you need to, assign a name to the Slider. With the slider selected, type the name into the Name property text box.

    The Name property text box is at the top of the Properties pane. To refer to a control in code, it must have a name. Otherwise, a name is not required.

  4. To perform an action when the slider state changes, add a handler for the ValueChanged event. In the ValueChanged event handler, add code to perform some action.
    1. Select the Event view in the Property pane.
    2. With the slider selected on the design surface, do one of these:
      • Double click the ValueChanged event text box to add a handler with a default name.
      • Type a name into the ValueChanged event text box and press Enter to add a handler with a custom name.

Related topics

Slider
Guidelines and checklist for sliders
Roadmap for Windows Runtime apps using C# or Visual Basic
Roadmap for Windows Runtime apps using C++

 

 

Show:
© 2014 Microsoft