SpinEdit Class

An editor with spin buttons used to adjust a numerical value.

Assembly: DevExpress.Xpf.Core.v24.1.dll

Declaration

C#
VB.NET

public class SpinEdit :
    ButtonEdit

Public Class SpinEdit
    Inherits ButtonEdit

Remarks

The SpinEdit class is a text editor with a pair of spin buttons that users can click to adjust a value. Spin buttons are used to increment or decrement the editor’s value displayed in the text edit region.

WPF SpinEdit Control

Tip

The SpinEdit class inherits its features from the ButtonEdit class.

Refer to the ButtonEdit class description for information on derived features and API.

Create a SpinEdit

Use the BaseEdit.EditValue property to specify the editor’s value.

XAML

<Window ...
    xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors">

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

Handle the BaseEdit.EditValueChanged event to get a notification when the editor’s value is changed. To validate the new value, handle the BaseEdit.Validate event.

Editor Value

The SpinEdit is designed to work with decimal values. Specify the BaseEdit.EditValueType property if you bind the editor to a property of another type:

XAML

<dxe:SpinEdit EditValue="{Binding EditValue}" 
              EditValueType="{x:Type sys:Int32}" 
              IsFloatValue="False"/>

C#
VB.NET

public class MainViewModel : ViewModelBase {
    public int EditValue { get; set; } = 12;
}

Public Class MainViewModel
    Inherits ViewModelBase

    Public Property EditValue As Integer = 12
End Class

In this case, the SpinEdit.MinValue and SpinEdit.MaxValue properties still accept values of the decimal? type (regardless of the BaseEdit.EditValueType property value).

Value Edit Options

The editor’s increment value, by which the edit value is changed every time the editor is spun, is specified by the SpinEdit.Increment property.

The editor’s value can be integer or floating-point. Use the SpinEdit.IsFloatValue property to specify the editor’s value type.

Minimum and Maximum Values

The minimum and maximum allowed values are specified by the SpinEdit.MinValue and SpinEdit.MaxValue properties, respectively. Use the SpinEdit.Minimize or SpinEdit.Maximize method to set the editor’s value to the minimum or maximum value, respectively.

Useful API:

The SpinEdit does not raise the BaseEdit.Validate event if the entered value exceeds the SpinEdit.MinValue or SpinEdit.MaxValue property.

Masked Input

You can use a variety of predefined masks or create your own custom masks to additionally customize user input:

SpinEdit - Numeric Masks

XAML

<dxe:SpinEdit EditValue="{Binding EditValue}"
              Mask="c" 
              MaskUseAsDisplayFormat="True"/>

Refer to the following help topic for more information: Mask Type: Numeric.

Mouse Wheel Input

Users can modify the SpinEdit‘s value with a mouse wheel.

Set the SpinEdit’s TextEdit.AllowSpinOnMouseWheel property to true to allow users to spin a mouse wheel to change an edit value. This property is in effect only when the TextEdit.AllowSpin property is true.

Appearance Customization

The following code sample displays spin buttons horizontally:

SpinEdit - Horizontal Buttons

XAML

<dxe:SpinEdit AllowDefaultButton="False">
    <dxe:SpinEdit.Buttons>
        <dxe:SpinButtonInfo IsDefaultButton="True" SpinStyle="Horizontal"/>
    </dxe:SpinEdit.Buttons>
</dxe:SpinEdit>

Tip

Refer to the following topic for more information: Appearance Customization.

The following code snippets (auto-collected from DevExpress Examples) contain references to the SpinEdit class.

Note

The algorithm used to collect these code examples remains a work in progress. Accordingly, the links and snippets below may produce inaccurate results. If you encounter an issue with code examples below, please use the feedback form on this page to report the issue.

XAML

reporting-wpf-wizard-custom-page/CS/App.xaml#L45

<dxlc:LayoutItem Label="Left Margin:">
    <dxe:SpinEdit EditValueType="{x:Type sys:Int32}" EditValue="{Binding LeftMargin, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True}" />
</dxlc:LayoutItem>

wpf-lookupedit-process-new-values/CS/HowToCreateLookUpEdit/UserControl1.xaml#L47

               Grid.Column="0" Margin="0,0,6,4" />
<dxe:SpinEdit x:Name="spUnitPrice" Grid.Row="3" Grid.Column="1"
                  EditValue="{Binding Path=UnitPrice, Mode=TwoWay, Converter={StaticResource converter}}" Margin="0,0,0,4"/>

wpf-reporting-create-a-document-sections-based-on-the-input-values/CS/MainWindow.xaml#L72

<Label Grid.Row="5" Margin="5">Detail Count:</Label>
<dxe:SpinEdit Name="seDetail" Grid.Column="2" Grid.Row="5" Margin="5" MinValue="0" IsFloatValue="False" IsTextEditable="False" />

wpf-scheduler-create-reminders-in-code-and-implement-custom-reminder-window/CS/CustomReminderExample/CustomReminderWindow.xaml#L98

<TextBlock Margin="0,5,5,5" Text="Select Snooze to be reminded again in" Grid.Column="0" />
<dxe:SpinEdit
    x:Name="txtSnoozeTime"

reporting-wpf-report-designer-customize-controls-smart-tag/CS/App.xaml#L49

<dxlc:LayoutItem Label="Max Value">
    <dxe:SpinEdit EditValue="{Binding MaxValue, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                      EditValueType="{x:Type sys:Single}" />