SpinEdit

• Jun 07, 2019
• 2 minutes to read

Overview

The SpinEdit control allows end-users to adjust a numeric values using on screen buttons, mouse wheel or keyboard.

The SpinEdit control offers the following features.

• Customizable increment/decrement value

  Use the SpinEdit.Increment property to specify the SpinEdit‘s increment value.

• Customizable value range

  You can limit the range of values accepted by the SpinEdit control using the SpinEdit.MinValue and SpinEdit.MaxValue properties.

• Optional mouse wheel input processing

  End-users can modify the SpinEdit‘s value with a mouse wheel.

  Setting the SpinEdit‘s TextEdit.AllowSpinOnMouseWheel property to true activates the mouse wheel input processing.

• Value increment acceleration

  SpinEdit‘s buttons support increment acceleration. Holding the spin button makes a value increment faster.

• Optional text box deactivation

  Setting the SpinEdit‘s ButtonEdit.IsTextEditable property to false deactivates the editor’s text box. With the text box deactivated, end-users can only change the editor’s value using the spin buttons, arrow keys and mouse wheel.

• Built-in numeric mask

  The numeric mask prevents end-users from entering the non-numeric characters.

• Optimized for in-place editing

  SpinEdit can be used standalone or as an in-place editor nested in a container control. The SpinEditSettings class implements the in-place editing functionality. See In-place Editors to learn more.

Standalone SpinEdit

To add a standalone SpinEdit to a Window, drag it from the Toolbox.

The following sample demonstrates how to create a SpinEdit using XAML markup.

XAML

<dxe:SpinEdit Increment="0.5" MinValue="0" MaxValue="10" AllowSpinOnMouseWheel="False" IsTextEditable="False" />

In-place SpinEdit

To embed a SpinEdit into a container control, use the SpinEditSettings class.

The following sample demonstrates how to embed a SpinEdit into a GridControl column.

XAML

<dxg:GridControl>
    <dxg:GridColumn FieldName="Items">
        <dxg:GridColumn.EditSettings>
            <dxe:SpinEditSettings/>
        </dxg:GridColumn.EditSettings>
    </dxg:GridColumn>
    <dxg:GridControl.View>
        <dxg:TableView/>
    </dxg:GridControl.View>
</dxg:GridControl>