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
130
XamSlider Command binding to ThumbValueChanged event
posted

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

  • 2700
    Offline posted

    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:

    Fullscreen
    1
    this.CalculateRangeSpanCommand = new RelayCommand(param => CalculateRangeSpanCommandMethod(param), param => true);
    XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

    The sample command method's purpose is to refresh the text block, displaying the difference, upon changing a thumb value. It is defined as follows:
    Fullscreen
    1
    2
    3
    4
    5
    6
    7
    8
    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);
    }
    }
    XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

    The Command is bound to the XamNumericRangeSlider's ThumbValueChanged using the Interaction class. I am also passing a parameter to the command, to be able to retrieve the Thumbs collection in the method:

    Fullscreen
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <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>
    XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

    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

    • 130
      Offline posted in reply to Bozhidara Pachilova

      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?

      • 2700
        Offline posted in reply to Anushri Jain

        Hello Anushri,

        It has been a while since the last update on this forum thread. Please, keep in mind that we handle a single question per support request. As the initial topic of the current thread was about Command binding and it was already addressed, my suggestion is to create new support cases or forum posts about your new queries. This is to ensure all your issues are handled correctly.

        I would just like to mention that, the TickMarksFrequency property is a property of the generic class SliderTickMarks<T> and could not be bound, which would explain any erroneous behavior that you observe. In order to display the tick marks you can set the property to a specific value or it will be automatically calculated by the control.

        Best regards,
        Bozhidara Pachilova

        • 130
          Offline posted in reply to Bozhidara Pachilova

          Hi, 

          I am facing another issue with the XamNumeric range slider tick marks.

          I have done propery binding for number of ticks, Max and Min value.

          I m initializaing Max = 100, Min = 0 and TickFrequencey = 10.

          Slider and tick frequencey are correct.

          Then I am changing it to Max = 1, Min = 0, Tick Frequency = 0.1

          Slider and tick frequency are correct.

          Again i Change it back to Max = 100, Min = 0 and TickFrequencey = 10.

          then tick display is not coming correctly.

          Can you help me with this.

          My code is mentioned below:

              <ig:XamNumericRangeSlider
                           Grid.Row="1"
                           Width="60"
                           x:Name="RangeSlider"
                           Orientation="Vertical"
                           TrackClickAction="MoveToPoint"
                           IsMouseWheelEnabled="True"
                           MinValue="{Binding DoseColourBarLowerRange,
          UpdateSourceTrigger=PropertyChanged}"
                           MaxValue="{Binding DoseColourBarUpperRange,
          UpdateSourceTrigger=PropertyChanged}"
                           FontSize="11"
                           IncreaseButtonVisibility="Collapsed"
                           DecreaseButtonVisibility="Collapsed"
                           Style="{StaticResource XamNumericRangeSliderStyle}">
                               <ig:XamNumericRangeSlider.TickMarks>
                                   <ig:SliderTickMarks TickMarksFrequency="{Binding
          DataContext.TickFrequency,Source={x:Reference ProxyElement},
          UpdateSourceTrigger=PropertyChanged,diag:PresentationTraceSources.TraceLevel=High
          }" IncludeSliderEnds="True" UseFrequency="True"
          VerticalTickMarksTemplate="{StaticResource VerticalTick1}">
                                   </ig:SliderTickMarks>
                               </ig:XamNumericRangeSlider.TickMarks>
                           </ig:XamNumericRangeSlider>

          • 2700
            Offline posted in reply to Anushri Jain

            Hello Anushri,

            I am glad that you have successfully managed to display the tick marks.

            If I understand correctly, the issue you are facing is that both the regular and value tick marks are not displayed for the MinValue/MaxValue. Please, correct me if my assumption is wrong.

            What I can suggest is setting the IncludeSliderEnds property of the SliderTickMarks objects to “True”:

            Fullscreen
            1
            2
            3
            4
            5
            6
            7
            8
            9
            10
            <ig:XamNumericRangeSlider.TickMarks>
            <ig:SliderTickMarks UseFrequency="True"
            NumberOfTickMarks="10"
            IncludeSliderEnds="True">
            </ig:SliderTickMarks>
            <ig:SliderTickMarks TickMarksFrequency="5"
            UseFrequency="True"
            HorizontalTickMarksTemplate="{StaticResource HorizontalTick}"
            IncludeSliderEnds="True" />
            </ig:XamNumericRangeSlider.TickMarks>
            XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

            I am also attaching the modified sample showing this as well as binding to the XamNumericRangeSlider’s MinValue and MaxValue properties. On my side, everything seems to be working as expected and no binding errors are observed.

            Please, test it on your side and if you require any further assistance on the matter, please let me know.

            Best regards,
            Bozhidara Pachilova

            3858.XNRSommandBinding.zip

            • 130
              Offline posted in reply to Bozhidara Pachilova

              Thanks for the help.

              I used the link and I could dispay the tick marks.

              I have done data binding of maxValue, MinValue and tick frequency from code behind.

              The MaxValue and TickFrequency binding are working well, but MinValue binding is not getting reflected on tick frequency.

              Any Suggestions?

              • 2700
                Verified Answer
                Offline posted in reply to Anushri Jain

                Hello Anushri,

                I believe you will find this topic in our documentation about Value Tick Marks very helpful on the matter. There you will find example code on how to define a data template for a tick mark, displaying text bound to its value.

                Regarding your second question, I am wondering if you had the chance to test the previously suggested sample on your side? As it demonstrates the XamNumericRangeSlider in an MVVM-like scenario, it has two thumbs, bound to two numeric values of the view model. Both values are set in the view model, that is from code. Upon change, the new values are reflected as the binding mode is two-way.

                Sincerely,
                Bozhidara Pachilova
                Associate Software Developer