Included Components

• Nov 12, 2019
• 4 minutes to read

This topic describes the components available from the WPF Data Editors library.

This topic contains the following sections.

• Overview
• Buttons
• Item Selection
• Data Input
• Date and Time
• Image and Color
• Visualization
• Utility

Overview

The WPF Data Editors library contains a set of editors and simple controls that can be used in WPF applications.

Each editor provides a specific functionality that is required for editing data values of a certain type. In the Visual Studio IDE,

all Data Editors and Simple Controls components are available on the DX.19.2.WPF: Common Controls toolbox tab.

WPF Data Editors are designed to be used in the following ways.

• As a standalone control

  The code sample below demonstrates how to use the BarCodeEdit control to display a bar code.

  XAML

  <dxe:BarCodeEdit Width="150" Height="60" EditValue="9780470500835">
      <dxe:BarCodeEdit.StyleSettings>
          <dxe:EAN13StyleSettings />
      </dxe:BarCodeEdit.StyleSettings>
  </dxe:BarCodeEdit>
  

  The image below demonstrates the result.

  

• As an in-place control

  DevExpress WPF data editors can be used for in-place editing within the container control such as GridControl or Bars. To embed a specific editor in a container control, create a BaseEditSettings descendant that corresponds to a specific editor type. This object provides the implementation of all the editor properties that allow the in-place editor to be fully customized. A container control (e.g., GridControl) uses information provided by the EditSettings classes to create fully-functional editors when required.

  The code sample below demonstrates how to display barcodes within the GridControl using the in-place BarCodeEdit editors.

  XAML

  <dxg:GridControl Name="grid">
      <dxg:GridControl.View>
          <dxg:TableView />
      </dxg:GridControl.View>
      <dxg:GridControl.Columns>
          <dxg:GridColumn FieldName="ProductName" />
          <dxg:GridColumn FieldName="QuantityPerUnit"/>
          <dxg:GridColumn FieldName="UnitPrice"/>
          <dxg:GridColumn FieldName="EAN13" >
              <dxg:GridColumn.EditSettings>
                  <!-- The BarCodeEditSettings objects allows you to -->
                  <!-- fully customize the in-place BarCodeEdit settings -->
                  <dxe:BarCodeEditSettings ShowText="False">
                      <dxe:BarCodeEditSettings.StyleSettings>
                          <dxe:EAN13StyleSettings />
                      </dxe:BarCodeEditSettings.StyleSettings>
                  </dxe:BarCodeEditSettings>
              </dxg:GridColumn.EditSettings>
          </dxg:GridColumn>
      </dxg:GridControl.Columns>
  </dxg:GridControl>
  

  The image below demonstrates the result.

  

Buttons

Control name	Description
SimpleButton	Serves as a base for classes that represent button controls.
DropDownButton	Represents a dropdown button control.
SplitButton	Represents a split button control.

Item Selection

Control name	In-place editor settings	Description
ListBoxEdit	ListBoxEditSettings	A list box (checked list box, radio list box) editor.
ComboBoxEdit	ComboBoxEditSettings	A combobox editor.
FontEdit	FontEditSettings	A font editor.
LookUpEdit	LookUpEditSettings	Represents a lookup editor.
SearchLookUpEdit (LookUpEdit with the SearchLookUpEditStyleSettings settings) MultiSelectLookUpEdit (LookUpEdit with the MultiSelectLookUpEditStyleSettings settings) TokenLookUpEdit (LookUpEdit with the TokenLookUpEditStyleSettings settings)	LookUpEditSettings	A lookup editor with a built-in search functionality. A lookup editor with multiple value selection. A lookup editor with multiple value selection. Selected values are represented by tokens.
AutoSuggestEdit	AutoSuggestEditSettings	An editor that displays a drop-down list of suggestions as a user types in the text box.

Data Input

Control name	In-place editor settings	Description
CheckEdit	CheckEditSettings	Represents a check box editor.
ToggleSwitchEdit	ToggleSwitchEditSettings	Represents a toggle switch editor.
ButtonEdit	ButtonEditSettings	Represents a text editor with embedded buttons.
TextEdit	TextEditSettings	Represents a text editor.
PasswordBoxEdit	PasswordBoxEditSettings	Represents a control allowing you to enter and manage passwords.
MemoEdit	MemoEditSettings	Represents an editor that displays a multi-line edit box in its popup.
SpinEdit	SpinEditSettings	Represents an editor with spin buttons used to adjust a numerical value.

Date and Time

Control name	In-place editor settings	Description
DateEdit	DateEditSettings	Represents a date editor with a dropdown calendar.
DateNavigator		Represents a date navigator.

Image and Color

Control name	In-place editor settings	Description
ImageEdit	ImageEditSettings	Represents an image editor.
PopupImageEdit	PopupImageEditSettings	Represents an editor that displays an image within a dropdown window.
BrushEdit	BrushEditSettings	Represents a brush editor.
PopupBrushEdit	PopupBrushEditSettings	Represents a brush editor displayed within a dropdown window.
ColorEdit	ColorEditSettings	Represents a color editor.
PopupColorEdit	PopupColorEditSettings	Represents a color editor displayed within a drop-down window.

Visualization

Control name	In-place editor settings	Description
ProgressBarEdit	ProgressBarEditSettings	Represents a progress bar.
SparklineEdit	SparklineEditSettings	Represents a sparkline control.
TrackBarEdit	TrackBarEditSettings	Represents a track bar.
RatingEdit		Represents a rating editor.
RangeControl		Represents a range control.

Utility

Control name	In-place editor settings	Description
BarCodeEdit	BarCodeEditSettings	Represents a barcode editor.
HyperlinkEdit	HyperlinkEditSettings	A hyperlink editor.
FlyoutControl		Represents a flyout control.
Calculator		Represents a calculator.
PopupCalcEdit	CalcEditSettings	Represents a calculator displayed within a dropdown window.