I am using XamNumericRangeSlider in my application. I want to do command binding to ThumbValueChanged event using MVVM pattern.
I tried using Microsoft interaction event triggers with Relay Command. I am not able to get it right.
Any kind of help is highly appreciated. Thanks
I want to show lables in In xam numeric range slider. Also want to configure range from the code dynamically.
Is it possible to do it?
Hello,
I have been looking into your question and created a small sample that demonstrates a command binding to XamNumericRangeSlider's ThumbValueChanged Event. I have added a XamNumericRangeSlide with two thumbs. The thumb values are bound to members of the View Model. There is also a text block, which shows the difference between the thumb values. In the View Model I defined an ICommand - CalculateRangeSpanCommand, which is initialized as RelayCommand:
this.CalculateRangeSpanCommand = new RelayCommand(param => CalculateRangeSpanCommandMethod(param), param => true);
public void CalculateRangeSpanCommandMethod(object parameter) { if(parameter != null) { ObservableCollection<XamSliderThumb<Double>> Thumbs = parameter as ObservableCollection<XamSliderThumb<Double>>; RangeSpan = Math.Abs(Thumbs[1].Value - Thumbs[0].Value); } }
<ig:XamNumericRangeSlider Name="xnrs1"> <i:Interaction.Triggers> <i:EventTrigger EventName="ThumbValueChanged"> <i:InvokeCommandAction Command="{Binding Path=CalculateRangeSpanCommand}" CommandParameter="{Binding Path=Thumbs, RelativeSource={RelativeSource AncestorType={x:Type ig:XamNumericRangeSlider}}}"> </i:InvokeCommandAction> </i:EventTrigger> </i:Interaction.Triggers> ... </ig:XamNumericRangeSlider>
I have added a Relay Command class implementation to the sample, however, you could modify it according to your requirements.
Attached could be found my sample for your reference. Please test it on your side and let me know if you require any further assistance on the matter.
Sincerely, Bozhidara Pachilova Associate Software Developer
5875.XNRSCommandBinding.zip