Infragistics(R) NetAdvantage(R) : WPF 2012.1
Adding a Single-Value Slider to Your Application
E-mail your feedback on this topic.
Shared XAML > Interactions > xamSlider > Getting Started with xamSlider > Adding a Single-Value Slider to Your Application

Glossary Item Box

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.

Follow these Steps

  1. Create a WPF project.
  2. In the Solution Explorer, add the following references:
    • InfragisticsWPF4.v12.1.dll
    • InfragisticsWPF4.Controls.Editors.XamSlider.v12.1.dll
  3. 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;
    
  4. 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
    }
    
  5. 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="False" />
    </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);
    
  6. Run the project.
Related Topics

About xamSlider

Adding a Range Slider to Your Application

Using xamSlider