How to add a slider (XAML)

  • Article

[ This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation ]

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

To 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" />

    void MainPage::Slider_ValueChanged(Object^ sender, RangeBaseValueChangedEventArgs^ e)
{
    // Add code to perform some action here.
}

    private void Slider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)
{
    // Add code to perform some action here.
}

    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

To 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.
Slider^ slider1 = ref new Slider();
slider1->Width = 100;
slider1->ValueChanged += 
    ref new RangeBaseValueChangedEventHandler(this, &MainPage::Slider_ValueChanged);

// Add the slider to a parent container in the visual tree.
stackPanel1->Children->Append(slider1);

    // Create a new slider and add a ValueChanged event handler.
Slider slider1 = new Slider();
slider1.Width = 100;
slider1.ValueChanged += Slider_ValueChanged;

// Add the slider to a parent container in the visual tree.
stackPanel1.Children.Add(slider1);

    ' 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)

    void MainPage::Slider_ValueChanged(Object^ sender, RangeBaseValueChangedEventArgs^ e)
{
    // Add code to perform some action here.
}

    private void Slider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)
{
    // Add code to perform some action here.
}

    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

To 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.

Slider

Guidelines and checklist for sliders

Roadmap for Windows Runtime apps using C# or Visual Basic

Roadmap for Windows Runtime apps using C++