In order for your end users to interact with the xamSlider™ controls, you must add a thumb that they can drag. The type of thumb you use will depend on the type of slider you are using. For example, if you are using xamNumericRangeSlider™ or xamNumericSlider™, you must use xamSliderNumericThumb objects. On the other hand, if you are using xamDateTimeRangeSlider™ or xamDateTimeSlider™, you must use the xamSliderDateTimeThumb objects. The two types of thumbs are not interchangeable; however, they both share these commonly used properties (in addition to properties inherited from the Control class):
The range sliders will not add a default thumb for you; therefore, you must add the thumbs to the range slider’s Thumbs collection. However, the single-value sliders will create a default thumb for you; therefore, you only need to the set a single-value slider’s Thumb property if you want to modify the thumb’s properties.
The following example code demonstrates adding and setting thumb properties.
In XAML:
<StackPanel> <!--Numeric single-value slider--> <TextBlock Text="Numeric single-value slider:" /> <ig:XamNumericSlider Name="xamNumericSlider1" MinValue="0" MaxValue="100"> <ig:XamNumericSlider.Thumb> <ig:XamSliderNumericThumb TrackFillBrush="Red" Value="25" /> </ig:XamNumericSlider.Thumb> </ig:XamNumericSlider > <!--Numeric range slider--> <TextBlock Text="Numeric range slider:" /> <ig:XamNumericRangeSlider Name="xamNumericRangeSlider1" MinValue="0" MaxValue="100"> <!--You do not have declare tags for the slider's Thumbs collection--> <ig:XamSliderNumericThumb InteractionMode="Free" Value="25" /> <ig:XamSliderNumericThumb InteractionMode="Lock" Value="50" /> <ig:XamSliderNumericThumb InteractionMode="Push" Value="75" /> </ig:XamNumericRangeSlider> <!--DateTime single-value slider--> <TextBlock Text="DateTime single-value slider:" /> <ig:XamDateTimeSlider Name="xamDateTimeSlider1" MinValue="1/1/2009" MaxValue="12/31/2009"> <ig:XamDateTimeSlider.Thumb> <ig:XamSliderDateTimeThumb TrackFillBrush="Red" Value="6/1/2009" /> </ig:XamDateTimeSlider.Thumb> </ig:XamDateTimeSlider> <!--DateTime range slider--> <TextBlock Text="DateTime range slider:" /> <ig:XamDateTimeRangeSlider Name="xamDateTimeRangeSlider1" MinValue="1/1/2009" MaxValue="12/31/2009"> <!--You do not have declare tags for the slider's Thumbs collection--> <ig:XamSliderDateTimeThumb InteractionMode="Free" Value="4/1/2009" /> <ig:XamSliderDateTimeThumb InteractionMode="Lock" Value="8/1/2009"/> <ig:XamSliderDateTimeThumb InteractionMode="Push" Value="12/1/2009" /> </ig:XamDateTimeRangeSlider> </StackPanel>
In Visual Basic:
Imports Infragistics.Controls.Interactions Imports Infragistics ... 'Numeric single-value slider Dim numericThumb As New XamSliderNumericThumb() numericThumb.TrackFillBrush = New SolidColorBrush(Colors.Red) numericThumb.Value = 25 Me.xamNumericSlider1.Thumb = numericThumb 'Numeric range slider Dim numericRangeThumb1 As New XamSliderNumericThumb() numericRangeThumb1.InteractionMode = SliderThumbInteractionMode.Free numericRangeThumb1.Value = 25 Dim numericRangeThumb2 As New XamSliderNumericThumb() numericRangeThumb2.InteractionMode = SliderThumbInteractionMode.Lock numericRangeThumb2.Value = 50 Dim numericRangeThumb3 As New XamSliderNumericThumb() numericRangeThumb3.InteractionMode = SliderThumbInteractionMode.Push numericRangeThumb3.Value = 75 Me.xamNumericRangeSlider1.Thumbs.Add(numericRangeThumb1) Me.xamNumericRangeSlider1.Thumbs.Add(numericRangeThumb2) Me.xamNumericRangeSlider1.Thumbs.Add(numericRangeThumb3) 'DateTime single-value slider Dim datetimeThumb As New XamSliderDateTimeThumb() datetimeThumb.TrackFillBrush = new SolidColorBrush(Colors.Red) datetimeThumb.Value = New DateTime(2009, 6, 1) Me.xamDateTimeSlider1.Thumb = datetimeThumb 'DateTime range slider Dim datetimeRangeThumb1 As New XamSliderDateTimeThumb() datetimeRangeThumb1.InteractionMode = SliderThumbInteractionMode.Free datetimeRangeThumb1.Value = New DateTime(2009, 4, 1) Dim datetimeRangeThumb2 As New XamSliderDateTimeThumb() datetimeRangeThumb2.InteractionMode = SliderThumbInteractionMode.Lock datetimeRangeThumb2.Value = New DateTime(2009, 8, 1) Dim datetimeRangeThumb3 As New XamSliderDateTimeThumb() datetimeRangeThumb3.InteractionMode = SliderThumbInteractionMode.Push datetimeRangeThumb3.Value = New DateTime(2009, 12, 1) Me.xamDateTimeRangeSlider1.Thumbs.Add(datetimeRangeThumb1) Me.xamDateTimeRangeSlider1.Thumbs.Add(datetimeRangeThumb2) Me.xamDateTimeRangeSlider1.Thumbs.Add(datetimeRangeThumb3) ...
In C#:
using Infragistics.Controls.Interactions; using Infragistics; ... //Numeric single-value slider xamSliderNumericThumb numericThumb = new XamSliderNumericThumb { TrackFillBrush = new SolidColorBrush(Colors.Red), Value = 25 }; this.xamNumericSlider1.Thumb = numericThumb; //Numeric range slider xamSliderNumericThumb numericRangeThumb1 = new XamSliderNumericThumb { InteractionMode = SliderThumbInteractionMode.Free, Value = 25 }; xamSliderNumericThumb numericRangeThumb2 = new XamSliderNumericThumb { InteractionMode = SliderThumbInteractionMode.Lock, Value = 50 }; xamSliderNumericThumb numericRangeThumb3 = new XamSliderNumericThumb { InteractionMode = SliderThumbInteractionMode.Push, Value = 75 }; this.xamNumericRangeSlider1.Thumbs.Add(numericRangeThumb1); this.xamNumericRangeSlider1.Thumbs.Add(numericRangeThumb2); this.xamNumericRangeSlider1.Thumbs.Add(numericRangeThumb3); //DateTime single-value slider xamSliderDateTimeThumb datetimeThumb = new XamSliderDateTimeThumb { TrackFillBrush = new SolidColorBrush(Colors.Red), Value = new DateTime(2009, 6, 1) }; this.xamDateTimeSlider1.Thumb = datetimeThumb; //DateTime range slider xamSliderDateTimeThumb datetimeRangeThumb1 = new XamSliderDateTimeThumb { InteractionMode = SliderThumbInteractionMode.Free, Value = new DateTime(2009, 4, 1) }; xamSliderDateTimeThumb datetimeRangeThumb2 = new XamSliderDateTimeThumb { InteractionMode = SliderThumbInteractionMode.Lock, Value = new DateTime(2009, 8, 1) }; xamSliderDateTimeThumb datetimeRangeThumb3 = new XamSliderDateTimeThumb { InteractionMode = SliderThumbInteractionMode.Push, Value = new DateTime(2009, 12, 1) }; this.xamDateTimeRangeSlider1.Thumbs.Add(datetimeRangeThumb1); this.xamDateTimeRangeSlider1.Thumbs.Add(datetimeRangeThumb2); this.xamDateTimeRangeSlider1.Thumbs.Add(datetimeRangeThumb3); ...