WPF Diagram - Create a DiagramShape Descendant with Editable and Serializable Properties

This example demonstrates how to serialize and allow users to edit custom properties of DiagramShape descendants. In the example, the DiagramShapeEx class contains the serializable Description property. Users can edit this property value in the Properties Panel.

Implementation Details

1. Mark your custom properties with the XtraSerializableProperty attribute to enable their serialization:

   public class DiagramShapeEx : DiagramShape {
       [XtraSerializableProperty]
       public string Description { get; set; }
       static DiagramShapeEx() {
           DiagramControl.ItemTypeRegistrator.Register(typeof(DiagramShapeEx));
       }
   }

   Make sure that your descendant class has a parameterless constructor.

2. Call the DiagramItemTypeRegistrator.Register method to register your descendant type and allow its serialization. You should register descendants at the application startup. If the custom item is used in the Diagram Designer or Item Template Designer, it is necessary to also register it in the item static constructor:

   DiagramControl.ItemTypeRegistrator.Register(typeof(DiagramShapeEx));

3. Create and register a FactoryItemTool that creates your custom shape when a user adds it to the canvas:

   var stencil = new DiagramStencil("CustomStencil", "Custom Shapes");
   var itemTool = new FactoryItemTool(
       "CustomShape",
       () => "Custom Shape", diagram => {
           DiagramShapeEx customShape = new DiagramShapeEx() { Width = 100, Height = 50 };
           return customShape;
       },
       new Size(100, 50),
       false
   );
   stencil.RegisterTool(itemTool);
   DiagramToolboxRegistrator.RegisterStencil(stencil);

4. To allow users to edit your custom property in the Properties Panel, handle the DiagramControl.CustomGetEditableItemProperties event:

   private void diagramControl_CustomGetEditableItemProperties(object sender, DiagramCustomGetEditableItemPropertiesEventArgs e) {
       if (e.Item is DiagramShapeEx) {
           e.Properties.Add(TypeDescriptor.GetProperties(typeof(DiagramShapeEx))["Description"]);
       }
   }

Files to Review

• DiagramData.xml
• MainWindow.xaml
• MainWindow.xaml.cs (VB: MainWindow.xaml.vb)
• ShapeClasses.cs (VB: ShapeClasses.vb)

Documentation

• Shapes
• DiagramShape
• Saving and Loading Diagrams
• DiagramControl.CustomGetEditableItemProperties

More Examples

• WPF DiagramControl - Register FactoryItemTools for Regular and Custom Shapes

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)