Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
20
Slider thumbs change values as I scroll
posted

I have a user control with a grid. The grid's itemsource is bound to a collection.
My DataGridTemplate creates a slider with 2 thumbs for each item.

I have a button that adds objects into my bound collection, which creates more sliders in my view. As I add rows beyond the size of the control (scroll bars come up) and scroll through the control, the sliders seem to behave erratically.
i.e. I set the thumbs in the first slider, I added a bunch more and as I scroll up and down the control the thumb positions change. The first one will get reset and the slider positions will be set in the 6th one instead, and if I scroll some more, it moves to the second slider, etc.

If I have these values bound to double values in my view model and it is behaving even more erratically, the left thumb will move past the right thumb, and it wreaks havoc. I removed all bindings and styles and left it to simply this:

<DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
                <ig:XamNumericRangeSlider MinWidth="150"
                                                      MinValue="0"
                                                      MaxValue="100">
                  <ig:XamSliderNumericThumb Value="0"/>
                  <ig:XamSliderNumericThumb Value="100"/>
                 </ig:XamNumericRangeSlider>
         </DataTemplate>
</DataGridTemplateColumn.CellTemplate>

And I am seeing the behavior described above.
I would include attachments but it appears that my workplace has blocked imagehosting sites, I hope that this post has been understandable, any ideas?


  • 34430
    Verified Answer
    Offline posted

    Hello Mingyuan,

    Thank you for your post!

    I have been investigating into this, and the behavior you are seeing appears to be caused by a mix of the WPF DataGrid's virtualization, the values of the slider not currently being bound, and the slider existing in the CellTemplate. I would recommend instead of only having a CellTemplate, that you include a CellEditingTemplate as well. The reason you are seeing the behavior you are seeing when you are binding the values is because when the slider is in the CellTemplate, it will not change the underlying value, even though it is bound. This is because the cell in the data grid is not in edit mode.

    When not binding the value, and only setting it, like the code you have provided, this is where the data grid's virtualization takes over. I am not completely sure how exactly the virtualization of the WPF DataGrid works, as I am more versed in Infragistics-specific controls, but it appears that the grid is recycling the cells and rows. If you set the EnableRowVirtualization property of the DataGrid to "False", you will notice that the behavior you are currently seeing no longer exists. However, this would likely have performance implications, especially if your ItemsSource is very large.

    For your scenario, I would recommend that you bind the values of your XamNumericSliderThumbs, but also include a CellEditTemplate on your DataGridTemplateColumns so that the value changes when you are editing the column. If you have the CellTemplate the same as the CellEditTemplate, it may be difficult to tell what state you are in, though. In this case, I would recommend possibly styling the slider in a way that is somewhat different for the CellEditTemplate. Alternatively, you may want to look into this post about single-click editing in the WPF DataGrid, as this will put the cell into edit mode as soon as that cell is clicked: http://wpf.codeplex.com/wikipage?title=Single-Click%20Editing&ProjectName=wpf.

    I hope this helps. Please let me know if you have any other questions or concerns on this matter.

    Sincerely,
    Andrew
    Associate Developer
    Infragistics Inc.
    www.infragistics.com/support