How to: Customize a SpinEdit to Display Currency Values

• Jun 07, 2019
• 2 minutes to read

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.

Follow the steps listed below:

• Steps 1-3. Create a New Project and Add a SpinEdit
• Steps 4-6. Customize the SpinEdit

Steps 1-3. Create a New Project and Add a SpinEdit

1. Run MS Visual Studio 2010.
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.

   

   XAML

   <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>
   

Steps 4-6. Customize the SpinEdit

4. Right click the SpinEdit and select Properties. Set the BaseEdit.DisplayFormatString property to ‘c2’ to display currency values.

5. 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.

   XAML

   <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>
   

6. Run the application to see the result.