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

Glossary Item Box

Before You Begin

You can add the range sliders, (e.g. xamNumericRangeSlider™ or xamDateTimeRangeSlider™), 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 the xamDateTimeRangeSlider control to your application. When you run the application, you should see the xamDateTimeRangeSlider 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™ controls.

    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 xamDateTimeRangeSlider 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.
    • Set its Name property to xamDateTimeRangeSlider1.
    • Set its MinValue property to 1/1/2009 in XAML or to an equivalent DateTime structure in code.
    • Set its MaxValue property to 12/31/2009 or to an equivalent DateTime structure in code.

    In XAML:

    <ig:XamDateTimeRangeSlider 
        Name="xamDateTimeRangeSlider1" 
        MinValue="1/1/2009" 
        MaxValue="12/31/2009">
        
        <!--TODO: Add DateTimeSliderTickMark objects to the TickMarks collection-->
        <!--TODO: Add xamSliderDateTimeThumb objects to the Thumbs collection-->
    
    </ig:XamDateTimeRangeSlider>
    

    In Visual Basic:

    Dim xamDateTimeRangeSlider1 As XamDateTimeRangeSlider
    
    Private Sub UserControl_Loaded(ByVal sender As Object, ByVal e As RoutedEventArgs)
        xamDateTimeRangeSlider1 = New xamDateTimeRangeSlider With {.MinValue = New DateTime(2009, 1, 1), .MaxValue = New DateTime(2009, 12, 31)}
        
        Me.LayoutRoot.Children.Add(xamDateTimeRangeSlider1)
    
        'TODO: Add DateTimeSliderTickMark objects to the TickMarks collection
        'TODO: Add xamSliderDateTimeThumb objects to the Thumbs collection
    End Sub
    

    In C#:

    XamDateTimeRangeSlider xamDateTimeRangeSlider1;
    
    private void UserControl_Loaded(object sender, RoutedEventArgs e)
    {
        xamDateTimeRangeSlider1 = new XamDateTimeRangeSlider
        {
            MinValue = new DateTime(2009, 1, 1),
            MaxValue = new DateTime(2009, 12, 31)
        };
    
        this.LayoutRoot.Children.Add(xamDateTimeRangeSlider1);
    
        //TODO: Add DateTimeSliderTickMark objects to the TickMarks collection
        //TODO: Add xamSliderDateTimeThumb objects to the Thumbs collection
    }
    
  5. Add a DateTimeSliderTickMarks object to the xamDateTimeRangeSlider control's TickMarks collection. For numeric slider controls, i.e., xamNumericSlider or xamNumericRangeSlider, you have to add SliderTickMarks objects to their TickMarks collection instead of DateTimeSliderTickMarks 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:XamDateTimeRangeSlider.TickMarks>
        <ig:DateTimeSliderTickMarks NumberOfTickMarks="10" UseFrequency="False"/>
    </ig:XamDateTimeRangeSlider.TickMarks>
    

    In Visual Basic:

    Dim majorTickMarks As New DateTimeSliderTickMarks With {.NumberOfTickMarks = 10, .UseFrequency = False}
    
    Me.xamDateTimeRangeSlider1.TickMarks.Add(majorTickMarks)
    

    In C#:

    DateTimeSliderTickMarks majorTickMarks = new DateTimeSliderTickMarks
    {
        NumberOfTickMarks = 10,
        UseFrequency = false
    };
    
    this.xamDateTimeRangeSlider1.TickMarks.Add(majorTickMarks);
    
  6. Add three xamSliderDateTimeThumb objects to the xamDateTimeRangeSlider control's Thumbs collection. You do not have to declare tags for the Thumbs collection in XAML. For the xamNumericRangeSlider control, you have to add xamSliderNumericThumb objects to its Thumbs collection instead of xamSliderDateTimeThumb objects.

    In XAML:

    <ig:XamSliderDateTimeThumb Value="4/1/2009" />
    <ig:XamSliderDateTimeThumb Value="8/1/2009" />
    <ig:XamSliderDateTimeThumb Value="12/1/2009" />
    

    In Visual Basic:

    Dim thumb1 As New XamSliderDateTimeThumb With {.Value = New DateTime(2009, 4, 1)}
    Dim thumb2 As New XamSliderDateTimeThumb With {.Value = New DateTime(2009, 8, 1)}
    Dim thumb3 As New XamSliderDateTimeThumb With {.Value = New Datetime(2009, 12, 1)}
    
    Me.xamDateTimeRangeSlider1.Thumbs.Add(thumb1)
    Me.xamDateTimeRangeSlider1.Thumbs.Add(thumb2)
    Me.xamDateTimeRangeSlider1.Thumbs.Add(thumb3)
    

    In C#:

    xamSliderDateTimeThumb thumb1 = new XamSliderDateTimeThumb
    {
        Value = new DateTime(2009, 4, 1)
    };
    
    xamSliderDateTimeThumb thumb2 = new XamSliderDateTimeThumb 
    {
        Value = new DateTime(2009, 8, 1)
    };
    
    xamSliderDateTimeThumb thumb3 = new XamSliderDateTimeThumb
    {
        Value = new DateTime(2009, 12, 1)
    };
        
    this.xamDateTimeRangeSlider1.Thumbs.Add(thumb1);
    this.xamDateTimeRangeSlider1.Thumbs.Add(thumb2);
    this.xamDateTimeRangeSlider1.Thumbs.Add(thumb3);
    
  7. Run the project.
Related Topics

Adding a Single-Value Slider to Your Application

Using xamSlider