I am trying to add the XamNumericRangeSlider to our app and the default rendering looks incorrect. I tried to update the styling with the themes in Program Files but get the same effect. Is there an appropriate way to style this control? I am using the 2011.1 version.
Another issue is that the selection range isn't between the thumbs. If we have two thumbs (Value=10 and Value=20), the selected range color is around 0 to 20 rather than 10 to 20.
Hello,
Thank you for your post. I have been looking into it and regarding the second question that you are having, the appearance that you are getting is expected since each thumb is filling the track area to the next thumb and the first thumb is filling the track from the beginning of the slider to itself. What I can suggest in this scenario is to set the TrackFillBrush to Transparent for the first slider and also set InteractionMode of both thumbs to Lock. By doing so the track will be colored only between the two thumbs. Also if you wish to allow dragging the filled area of the track and move both thumbs you can set the IsSelectionRangeEnabled property of the XamNumericRangeSlider to true. Here is an example for doing that:
Result:
Xaml:
<Window x:Class="XamRangeSliderStyling.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ig="http://schemas.infragistics.com/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<ig:XamNumericRangeSlider
x:Name="slider"
MinValue="0"
MaxValue="50"
IsSelectionRangeEnabled="True" >
<ig:XamSliderNumericThumb
Value="10"
InteractionMode="Lock"
TrackFillBrush="Transparent"
Name="thumb1" />
Value="20"
Name="thumb2"
TrackFillBrush="Red"
InteractionMode="Lock" />
</ig:XamNumericRangeSlider>
</Grid>
</Window>
Regarding the first question that you are having, you can get all the default styles for the XamSliders, by going to your Infragistics folder then to \NetAdvantage 2012.1\WPF\DefaultStyles\Slider. The styles are in generic.xaml file. You can get the default style for the XamNumericRangeSlider and modify its template in order to fit your scenario. If you wish you can provide me with more detailed description on the way that you wish to change the appearance of the control, in order to be able to provide you with more accurate guidelines for changing the template.
Looking forward to hearing from you.
Sincerely,
Krasimir
Developer Support Engineer
Infragistics
www.infragistics.com/support