Interactivity

Usually shapes do not have logic to care about interactivity and to handle mouse and keyboard requests. To provide functionality like moving and rotating shapes we use behaviors, that are well known from Expression Blend and adorners, which are controls that are rendered on top of all diagrams.

Use Adorners and Behaviors

Adorners and behaviors can be assigned by xaml or by code in the constructor of a shapes.

(1) Assign Adorners and Behaviors by Code

public abstract class Rectangle : NodeBase
{
    protected Rectangle ()
    {
        BehaviorCollection behaviors = Interactions.GetBehaviors(this);
        behaviors.Add(new ShapeSelectionBehavior());
        behaviors.Add(new ShapeBaseMovementBehavior());

        AdornerCollection adorners = Interactions.GetAdorners(this);
        adorners.Add(new NodeBaseCompositeAdorner(
            new NodeBaseRotationAdorner(),
            new NodeBaseScalingAdorner()));
        adorners.Add(new TextEditorAdorner());
    }
}

(2) Assign Adorners and Behaviors by Xaml

<shapesBasic:Rectangle>
    <sd:Interactions.Behaviors>
        <sd:ShapeSelectionBehavior />
        <sd:ShapeBaseMovementBehavior />
    </sd:Interactions.Behaviors>
    <sd:Interactions.Adorners>
        <sd:NodeBaseRotationAdorner />
        <sd:NodeBaseScalingAdorner />
        <sd:TextEditorAdorner />
    </sd:Interactions.Adorners>
</shapesBasic:Rectangle>

Available Adorners and Behaviors

AutoConnectAdorner

Assignable to all classes that derive from SD.Shapes.Common.NodeBase.
  • This Adorner provides four arrows at each side of the node. When the user clicks one of the arrows a new connection is created to the next node at the corresponding side of the node. If such a node does not exist a copy of the existing node will be created.

Interactivity_Types_AutoConnect.png

ConnectionMovementBehavior

Assignable to all classes that derive from SD.Shapes.Common.Connections.Connection.
  • Move a connection. When either the source or sink is located over a connector, the connection will be connected with this connector.

ConnectionPointAdorner

Assignable to all classes that derive from SD.Shapes.Common.Connections.Connection.
  • Use this adorner to move one point, either the source or the sink of the connection.

Interactivity_Types_ConnectionPoint.png

ConnectionSegmentAdorner

Assignable to all classes that derive from SD.Shapes.Common.Connections.Connection.
  • This adorner can be used to manipulate the different segments of a connection.

Interactivity_Types_ConnectionSegment.png

DiagramDebugAdorner

Assignable to any SD.Shapes.Common.Diagram.
  • Press F12 to see a list of the all completed transactions.

Interactivity_Types_DiagramDebug.png

DiagramPaintingAdorner

Assignable to any SD.Shapes.Common.Diagram.
  • This adorner can be used to draw free lines. When the left mouse button has been released a new connection will be created.

DiagramSelectionAdorner

Assignable to any SD.Shapes.Common.Diagram.
  • Choose a rectangle of the diagram and select all shapes that are within this rectangle.

Interactivity_Types_DiagramSelection.png

NodeBaseConnectorLinkBehavior

Assignable to all classes that derive from SD.Shapes.Common.NodeBase.
  • The user can press the left mouse button over a connector. A new connection will be created and the source is connected with this connector, the sink position will be set to the mouse position.

NodeBaseRotationAdorner

Assignable to all classes that derive from SD.Shapes.Common.NodeBase.
  • Rotate all selected shapes.

Interactivity_Types_NodeBaseRotation.png

NodeBaseScalingAdorner

Assignable to all classes that derive from SD.Shapes.Common.NodeBase.
  • Change the size of all selected shapes.

Interactivity_Types_NodeBaseScaling.png

ShapeBaseMovementBehavior

Assignable to all classes that derive from SD.Shapes.Common.ShapeBase.
  • Move all selected shapes.

TextEditorAdorner

Assignable to all classes that derive from SD.Shapes.Common.ShapeBase.
  • This adorner is activated when the user double clicks the node. A textbox is rendered at the top of the node where the user can change the text of the node or connection.

Interactivity_Types_TextEditor.png

Last edited Apr 17, 2011 at 8:17 AM by malignate88, version 29

Comments

No comments yet.