Frequency of WPF-slider ValueChanged-Event

Question

In my application I use two sliders to control the brightness and contrast of certain images and the image has to be completely recalculated pixel by pixel every single time when either one of the two sliders changes its value-property. The recalculation of smaller images goes completely fine and doesn't cause any problems, however, larger images need longer to be recalculated and the slider thumb moves with a slight delay compared to the mouse pointer. I do need the image to be recalculated more or less in real time so simply having an event on DragCompleted or similarly is not acceptable.

The recalculation is initialized using the ValueChanged-event of the slider. I think a good solution to this problem would be if the event is not fired as quickly as possible but will at least wait say 50ms before it is fired again, but is there a property of a slider that can control that?

Another solution I was thinking of, is removing the event from the slider right at the start when the event gets handled and adding it again some short time later, but that might cause some delay itself which is also not preferred here.

I couldn't really find anything on this topic anywhere, so if somebody has any good suggestions or directions I could use, I would be very greatful.

Answer 1

You can also make use of BindingBase.Delay property introduced in WPF 4.5.

Simply bind Slider's value to a dependency property setting Delay on the binding. This will cause value updates only after certain time (e.g. 500 ms) and this can make your app smoother.

Answer 2

If you think your application don't need to do the calculations every time the ValueChanged event is triggered,You can use the DragCompleted Event in Thumb control to determine the position after the user finished dragging the control.

<Slider Thumb.DragCompleted="Slider_DragCompleted_1"  
    Height="27" Margin="132,162,0,0" VerticalAlignment="Top" Width="303"/>

When the user stopped dragging,

private void Slider_DragCompleted_1(object sender, DragCompletedEventArgs e)
{
    Slider s = sender as Slider;
    // Your code
    MessageBox.Show(s.Value.ToString());
}

But beware that this works only when user drags the slider.This doesn't get triggered when user clicks on the slider.

Refer this for handling other events like mouse click etc..

If you want to calculate with some time delay then you can use a timer .

EDIT: Based on your request you can do like this. In the 'ValueChanged' event.

 // Start a new thread only if the thread is stopped 
 // or the thread has not been created yet.
 if (threadPopular == null || threadPopular.ThreadState == ThreadState.Stopped)
 {
           threadPopular = new Thread(new ThreadStart(Your function));
           threadPopular.Start();
  }

Answer 3

I might implement this using the Backgroundworker where image processing will be done on Backgroundworker asynchronously.

Also what I will suggest is you can use Timer here and set its tick time to the comfortable value. On every sliderchanged event, you start the timer if it is not enabled. In timer tick event handler you can check if the background worker is working then you can cancel the previous operation and put the new operation on it. In bacgroundworkerdone event handler, just stop the timer.

Thanks

Answer 4

While you could use BindingBase.Delay, this causes a delay even when a single change is required. another approach might be to use a OneWay binding in the Slider Value and use an asynchronous command like so:

XAML code:

<Slider Value="{Binding MyValue, Mode=OneWay}">
    <i:Interaction.Triggers>
     <i:EventTrigger EventName="ValueChanged">
        <mvvmlight:EventToCommand 
        Command="{Binding SetValueCommand, Mode=OneWay}"
        EventArgsConverter="{StaticResource 
        RoutedPropertyChangedEventArgsToDoubleConverter}"
        PassEventArgsToCommand="True" />
        </i:EventTrigger>
     </i:Interaction.Triggers>

Value Converter:

using GalaSoft.MvvmLight.Command;

    public class RoutedPropertyChangedEventArgsToDoubleConverter : IEventArgsConverter
    {
        public object Convert(object value, object parameter)
        {
            var args = (RoutedPropertyChangedEventArgs<double>)value;
            var element = (FrameworkElement)parameter;

            return args.NewValue;
        }
    }

And the callback for the command:

    double _updateVal;
    Task _delay;

    private async void SetValue(double val)
    {            
        if (_delay != null)
        {
            // in case of high frequency updates, most updates will return here
            _updateVal = val; 
            return;
        }

        // only the first update reaches here

        // caluclate the image here 
        MyValue = val; // update slider

        _delay = Task.Delay(500);
        await _delay;

        // in case there are pending updates:
        while (_updateVal.HasValue)
        {
            // caluclate the image here 
            MyValue = _updateVal.Value; // update slider

            _updateVal = null;

            _delay = Task.Delay(500);
            await _delay;
        }

        _delay = null;

    }

This way you only get to reduce the frequency of the image calculations without a significant delay on the first value change.