Skip to main content

How to: Customize a SpinEdit to Display Currency Values

A SpinEdit editor allows you to operate with numeric values.

This document demonstrates how to create a SpinEdit control and customize it to show currency values.

Create a New Project and Add a SpinEdit

  1. Run MS Visual Studio.
  2. Create a new WPF Application project. For this, choose New Project on the File menu or press Ctrl+Shift+N, and then choose WPF Application.
  3. Add a SpinEdit component to the project.

    To do this, open the Visual Studio toolbox, locate the “DX: Common Controls” tab, choose the SpinEdit toolbox item and drop it onto the window.

    <Window x:Class="How_to_SpinEdit.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Height="300" Width="300" xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors" Title="Main Window">
        <Grid>
            <dxe:SpinEdit HorizontalAlignment="Center" Name="spinEdit1" Width="200" Height="40" VerticalAlignment="Center" />
        </Grid>
    </Window>
    

Customize the SpinEdit

  1. Right click the SpinEdit and select Properties. Set the BaseEdit.DisplayFormatString property to ‘c2’ to display currency values.
  2. Set the SpinEdit.Increment property to 0.01 to specify a value by which the editor’s value changes each time the editor is spun.

    <Window x:Class="How_to_SpinEdit.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Height="300" Width="300" xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors" Title="Main Window">
        <Grid>
            <dxe:SpinEdit HorizontalAlignment="Center" Name="spinEdit1" Width="200" Height="40" VerticalAlignment="Center" DisplayFormatString="c2" Increment="0.01" />
        </Grid>
    </Window>
    
  3. Run the application to see the result.

    SpinEdit MainWindow