[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Collapse]WPF Controls
 [Expand]What's Installed
 [Expand].NET Core 3 Support
 [Expand]Common Concepts
 [Expand]MVVM Framework
 [Collapse]Controls and Libraries
  [Expand]Data Grid
  [Expand]Ribbon, Bars and Menu
  [Expand]Charts Suite
  [Expand]Pivot Grid
  [Expand]Rich Text Editor
  [Expand]Tree List
  [Expand]Gauge Controls
  [Expand]Map Control
  [Expand]Layout Management
  [Expand]Windows Modern UI
  [Expand]Data Editors
  [Expand]Navigation Controls
  [Expand]Spell Checker
  [Expand]Property Grid
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Gantt Control
  [Collapse]Diagram Control
    Getting Started
   [Collapse]Diagram Control
     Diagram Designer Control
     Shapes Panel
     Properties Panel
     Bottom Panel
     Page Setup Dialog Window
     Print Preview
     Pan and Zoom Panel
   [Expand]End-User Interaction
   [Expand]Diagram Items
   [Expand]Automatic Layout
   [Expand]Data Binding
    Themes and Styles
    Printing and Exporting
    Saving and Loading Diagrams
  [Expand]Windows and Utility Controls
   Dialogs, Notifications and Panels
  [Expand]Scheduler (legacy)
 [Expand]Scaffolding Wizard
  Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Properties Panel

The Properties panel displays properties of an object that is selected in the canvas and allows end-users to edit them.

Users can toggle the auto-hide mode or close the panel. To show the panel, right-click a diagram item or empty space in the canvas and select Properties in the menu. You can also use the Ribbon UI (View > Panes) to show or hide the Properties panel.

The table below lists the main customization options.

Characteristics Members
Availability DiagramControl.AllowPropertiesPanel
Visibility DiagramControl.PropertiesPanelVisibility

Expanded Add Properties

To add a property to the Properties panel, handle the CustomGetEditableItemProperties (see DiagramControl.CustomGetEditableItemProperties) event. The following code snippet illustrates how to add the DiagramItem.CanSnapToThisItem property for shapes:

You can add properties from a custom DiagramItem (see DiagramItem) descendant and other sources, for example, objects stored in a DataContext.

Add a Shape Descendant's Property

To add a property from a DiagramShape (see DiagramShape) descendant, use the System.ComponentModel.TypeDescriptor.GetProperties method to obtain the PropertyDescriptor (see System.ComponentModel.PropertyDescriptor) and add it to the DiagramItemCreatingEventArgs.Properties collection:

The Properties panel uses the INotifyPropertyChanged (see System.ComponentModel.INotifyPropertyChanged) interface for notifications about updates in the source object. To enable synchronization when the Info property is modified, implement the INotifyPropertyChanged interface in the CustomDiagramShape class and raise the PropertyChanged event in the Info property setter.


Use the DiagramItemTypeRegistrator.Register method to register diagram item descendants in a DiagramControl. To use custom diagram item types instead of the regular ones, handle the DiagramControl.ItemCreating event.

Add Independent Properties

The Properties panel allows users to edit properties that are not defined directly at the DiagramItem (see DiagramItem) level. This can be useful when your diagram is bound to a data source and you need to edit data item properties. For this purpose, DiagramCustomGetEditableItemPropertiesEventArgs provides the CreateProxyProperty method that allows you to create a custom property descriptor.

Add the property descriptor to the DiagramCustomGetEditableItemPropertiesEventArgs.Properties collection to edit a custom property. For instance, you can use the following code to add the Customer.Name property to the Properties panel if the DiagramShape (see DiagramShape)'s DataContext contains a Customer class instance:

Expanded Remove Properties


If you use protection options to restrict user actions, the corresponding properties are automatically removed from the Properties panel. For example, the Width and Height properties are removed from the panel if you set the DiagramControl.AllowResizeItems property to false. The diagram protection options are listed in the DiagramControl.IsReadOnly property's description.

To remove a property from the Properties panel, handle the DiagramControl.CustomGetEditableItemProperties and remove the corresponding property descriptor from the Properties collection:

Expanded Customize Properties

Customize Property Names

To customize a property name, handle the DiagramControl.CustomGetEditableItemProperties event. Create a custom property descriptor wrapper with the CreateProxyProperty method and use the DisplayNameAttribute attribute.

The example below illustrates how to rename the Content property.

Customize Property Editors

To use a custom control to edit a property, create a property descriptor wrapper with the CreateProxyProperty method and pass an instance of PropertyGridEditorAttribute to this wrapper. Add this attribute to the property descriptor wrapper and define a template for your editor in diagram resources. The example below illustrates how to use a ComboBoxEdit (see ComboBoxEdit) to edit the diagram item's content.

The PropertyGridControl (see PropertyGridControl) locates your template based on the specified TemplateKey. Note that the editor’s name should be set to PART_Editor.

Expanded Use Different Properties for Items of the Same Type

The DiagramControl caches property descriptors for items of the same type. Handle the CustomGetEditableItemPropertiesCacheKey (see DiagramControl.CustomGetEditableItemPropertiesCacheKey) event to conditionally choose properties for diagram items of the same type.

Expanded Validation

The PropertyGridControl (see PropertyGridControl) supports attribute-based validation. This type of validation allows you to define validation rules for edited properties. The following code snippet adds a validation attribute that prevents users from typing a text string longer than five characters:

You can use the following attributes for validation:

Note: You should add a reference to the System.ComponentModel.DataAnnotations assembly to use these attributes.

Expanded See Also

Is this topic helpful?​​​​​​​