Adding a Single-Value Slider to Your Application

Before You Begin

You can add the single-value sliders, i.e., xamNumericSlider™or xamDateTimeSlider™, to your application using the same pattern as any control found in Microsoft® WPF™. This pattern involves using a layout container and adding the control to the Children collection of the layout container.

What You Will Accomplish

You will add a xamNumericSlider control to your application. When you run the finished project, you should see a xamNumericSlider control in your browser that looks similar to the screen shot below.

xamSlider Adding a Single Value Slider to Your Application 01 XAML.png

Follow these Steps

Create a WPF project.

Add the following NuGet package reference to your project:
- Infragistics.WPF.Slider
For more information on setting up the NuGet feed and adding NuGet packages, you can take a look at the following documentation: NuGet Feeds.

Place using/Imports directives in your code-behind or add an XML namespace definition for xamSlider™.

In XAML:
```
xmlns:ig="http://schemas.infragistics.com/xaml"
```
In Visual Basic:
```
Imports Infragistics.Controls.Editors
```
In C#:
```
using Infragistics.Controls.Editors;
```

Add an instance of the xamNumericSlider control to default Grid layout panel named "LayoutRoot". If you are doing this in procedural code, you can handle the UserControl’s Loaded event and place the code in the event handler.

Unlike the range sliders, the single-value sliders automatically create a xamSlider thumb for you. You do not have to set a single-value slider’s Thumb property unless you want to modify the thumb’s properties.

Set its Name property to xamNumericSlider1.
Set its MinValue property to 0.
Set its MaxValue property to 100.

In XAML:

<ig:XamNumericSlider
    Name="xamNumericSlider1"
    MinValue="0"
    MaxValue="100">
    <!--TODO: Add SliderTickMarks objects to the TickMarks collection-->
</ig:XamNumericSlider >

In Visual Basic:

Dim xamNumericSlider1 As XamNumericSlider
Private Sub UserControl_Loaded(ByVal sender As Object, ByVal e As RoutedEventArgs)
    xamNumericSlider1 = New xamNumericSlider With {.MinValue = 0, .MaxValue = 100}
    Me.LayoutRoot.Children.Add(xamNumericSlider1)
    'TODO: Add SliderTickMarks objects to the TickMarks collection
End Sub

In C#:

XamNumericSlider xamNumericSlider1;
private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
    xamNumericSlider1 = new xamNumericSlider
    {
        MinValue = 0,
        MaxValue = 100
    };
    this.LayoutRoot.Children.Add(xamNumericSlider1);
    //TODO: Add SliderTickMarks objects to the TickMarks collection
}

Add a SliderTickMarks object to the xamNumericSlider control’s TickMarks collection. For DateTime slider controls, i.e., xamDateTimeSlider or xamDateTimeRangeSlider, you have to add DateTimeSliderTickMarks objects to their TickMarks collection instead of SliderTickMarks objects.
- Set its NumberOfTickMarks property to 10.
- Set its UseFrequency property to False. The xamSlider controls will ignore the NumberOfTickMarks property if you do not set the UseFrequency property to False.
In XAML:
```
<ig:XamNumericSlider.TickMarks>
    <ig:SliderTickMarks NumberOfTickMarks="10" UseFrequency=" />
</ig:XamNumericSlider.TickMarks>
```
In Visual Basic:
```
Dim majorTickMarks As New SliderTickMarks With {.NumberOfTickMarks = 10, .UseFrequency = True}
Me.xamNumericSlider1.TickMarks.Add(majorTickMarks)
```
In C#:
```
SliderTickMarks majorTickMarks = new SliderTickMarks
{
    NumberOfTickMarks = 10,
    UseFrequency = false
};
this.xamNumericSlider1.TickMarks.Add(majorTickMarks);
```

Run the project.

WPF | Help Topics

Adding a Single-Value Slider to Your Application

Before You Begin

What You Will Accomplish

Follow these Steps

Related Topics