This example shows how to register UXRangeSliderBar command to a UXButton.

Example

Description

UXRangeSliderBar is built around the commanding semantics which allows the value changing interaction to be executed through declarative definition in the XAML markup. The commanding semantics is also an ideal approach for MVVM pattern development.

UXRangeSliderBar already includes several predefined commands to change the selected value that you can use in your application, such as: DecreaseSmall, DecreaseLarge, IncreaseSmall, IncreaseLarge, Minimize, and Maximize.

The following code example shows how to register IncreaseLarge command to UXButton and set the command parameter to the right UXThumb.

Code

<StackPanel>
    <Intersoft:UXRangeSliderBar x:Name="uxRangeSlider1" TickPlacement="BottomRight" HandlesVisibility="Visible" SelectionStart="3" SelectionEnd="7" />
    <Intersoft:UXButton Height="25" Width="200" Content="Invoke IncreaseLarge Command" Command="Intersoft:SliderCommands.IncreaseLarge" 
                        CommandTarget="{Binding ElementName=uxRangeSlider1}">
        <Intersoft:UXButton.CommandParameter>
            <Intersoft:SliderOption TargetThumb="BottomRightThumb"/>
        </Intersoft:UXButton.CommandParameter>
    </Intersoft:UXButton>
</StackPanel>
            

When the UXButton is clicked, UXRangeSliderBar will invoke IncreaseLarge command to the right UXThumb and add the value of SelectionEnd property.