Infragistics(R) NetAdvantage(R) : WPF 2012.1
Value Tick Marks
E-mail your feedback on this topic.
Shared XAML > Interactions > xamSlider > Using xamSlider > Value Tick Marks

Glossary Item Box

Before You Begin

By default the tick marks are displayed as ticks on the slider; however you can override this default setting and display the value of the tick mark instead.

There are no standard left, right, top bottom tick marks. Everything depends on the data template

This topic assumes that you already have a xamSlider™ control on your page, for more information, see the Getting Started with xamSlider topic.

What You Will Accomplish

You will display the value of the tick mark, similar to labels.

Follow these Steps

  1. Add a grid resource.

    In XAML:

    <Grid.Resources>
       <!— Add DataTemplate -->
    </Grid.Resources>
    
    
  2. Add a data template. This data template will bind to the value of the tick mark and display that value.

    In XAML:

    <DataTemplate x:Key="HorizontalTick">
       <Border >
          <TextBlock Text="{Binding}" Margin="0,60,0,0"/>
       </Border>
    </DataTemplate>
    
    
  3. Within the SliderTickMarks, set the HorizontalTickMarksTemplate property to the data template you created.

    In XAML:

    <ig:XamNumericRangeSlider Grid.Row="1" MinValue="0"   MaxValue="80" Height="100" Margin="10">
       <ig:XamSliderNumericThumb Value="15" InteractionMode="Push"/>
       <ig:XamSliderNumericThumb Value="40" />
       <ig:XamSliderNumericThumb Value="65" InteractionMode="Lock"/>
       <ig:XamNumericRangeSlider.TickMarks>
          <ig:SliderTickMarks TickMarksFrequency="5" UseFrequency="True"/>
          <ig:SliderTickMarks TickMarksFrequency="5" UseFrequency="True" HorizontalTickMarksTemplate="{StaticResource HorizontalTick}"/>
       </ig:XamNumericRangeSlider.TickMarks>
    </ig:XamNumericRangeSlider>
    
    
  4. Save and run your application.

Related Topics