TextAnnotation in WPF Diagram (SfDiagram)

5 May 20213 minutes to read

  • A TextAnnotation points at or references the another BPMN shape, which we call the TextAnnotationTarget of the TextAnnotation. When a target shape is moved, copied, or deleted, any TextAnnotations attached to the shape will be moved, copied, or deleted too. Thus, the TextAnnotations stay with their target shapes though you can reposition the TextAnnotation to any offset from its target. The TextAnnotationTarget property of the BpmnNodeViewModel is used to connect an annotation element to the BpmnNodeViewModel.

  • The annotation element can be switched from a BPMN node to another BPMN node simply by dragging the source end of the annotation connector into the other BPMN node.

  • By default, the TextAnnotation shape having a connection.

  • The TextAnnotationDirection property is used to set the shape direction of the text annotation.

  • To set the size for text annotation, use the UnitWidth and UnitHeight properties.

  • The OffsetX and OffsetY property is used to set the distance between the BPMN node and the TextAnnotation.

  • The TextAnnotation element can be moved (if their have connected with any BPMN Node) while dragging the BPMN node.

The following code example represents how to create a TextAnnotation.

//Initialize the diagram.
SfDiagram diagram = new SfDiagram();

 //Initialize the BpmnNodeViewModel with the type as TextAnnotation.
BpmnNodeViewModel textannotation = new BpmnNodeViewModel()
{
   OffsetX = 300,
   OffsetY = 100,
   UnitWidth = 100,
   UnitHeight = 70,
   Type = BpmnShapeType.TextAnnotation,
   TextAnnotationDirection = TextAnnotationDirection.Left,
   Annotations = new ObservableCollection<IAnnotation>()
   {
     new AnnotationEditorViewModel()
     {
        Content="Text"
     }
   }
};

// Add the node into the Node's collection.
(diagram.Nodes as NodeCollection).Add(textannotation);

BPMN Text Annotation

The following code example represents how to create a TextAnnotation and make a connection between the Activity and TextAnnotation shape.

//Initialize the diagram.
SfDiagram diagram = new SfDiagram();

//Initialize the BpmnNodeViewModel.
BpmnNodeViewModel node = new BpmnNodeViewModel()
{
   OffsetX = 150,
   OffsetY = 250,
   UnitWidth = 100,
   UnitHeight = 100,
   Type = BpmnShapeType.Activity,
};

 //Initialize the BpmnNodeViewModel with the type as TextAnnotation.
BpmnNodeViewModel textannotation = new BpmnNodeViewModel()
{
   OffsetX = 300,
   OffsetY = 100,
   UnitWidth = 100,
   UnitHeight = 70,
   Type = BpmnShapeType.TextAnnotation,
   TextAnnotationTarget = node,
   Annotations = new ObservableCollection<IAnnotation>()
   {
     new AnnotationEditorViewModel()
     {
        Content="Text"
     }
   }
};

// Add the node into the Node's collection.
(diagram.Nodes as NodeCollection).Add(node);
(diagram.Nodes as NodeCollection).Add(textannotation);

BPMN Text Annotation

How to create a connection between the TextAnnotation to BPMNNode

Drag and drop any bpmn shapes from the stencil to diagram and make a connection between the BPMN Node and TextAnnotation.

The following image shows how to drag a symbol from the palette and create a connection between the TextAnnotation to BPMNNode with interaction.

BPMN Text Annotation