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
Thanks for the response. This works perfectly in a new project, but not in our complex project that uses infragistic controls. I copied the exact xaml and styles to the project and it doesn't work. One thing that I noticed is that it renders fine if I removed the interaction lock, but if the thumbs are swapped, the invalid render occurs (selected color from 0 to thumbs). Is there anything that could be affecting this?
The control renders properly in the Visual Studio designer but not in the actual app. We can swap the Min (transparent) and Max (red brush) thumbs and it "looks" proper. How can we get this to work consistently without the re-ordering of the thumbs?
Thank you for your replies. I have been reading through them and I am not sure in which way the XamNumericRangeSlider is not render correctly. Would you please provide me with more details on the appearance that you are getting and what is the incorrect in the slider’s rendering and if possible provide me with a screenshot or a sample application that demonstrates the issue, so I will be able to identify the issue and what might causing it?
I am just checking if you require any further assistance on the matter.