Edit this page

Shapes

This tutorial will walk you through the functionality and the main features of the RadDiagramShape.

Before proceeding with this topic, it is recommended to get familiar with the Visual Structure of the Diagramming Framework.

Overview

Please note that the examples in this tutorial are showcasing Telerik Windows8 theme. In the Setting a Theme article you can find more information on how to set an application-wide theme.

The RadDiagramShape is an object that describes the nodes of the diagram. You can configure its form using the Geometry property as it allows you to define a custom geometry:

XAML

<telerik:RadDiagramShape Width="80"
                         Height="80"
                         Geometry="M16.35,6.39 C16.28,7.36 12.26,20.45 12.26,20.45 L20.56,20.45 C20.56,20.45 16.64,7.54 16.53,6.39 z M12.30,0.50 L20.97,0.50 L32.50,33.50 L24.54,33.50 L22.23,26.16 L10.70,26.16 L8.42,33.50 L0.50,33.50 z"
                         Position="160,80" />         

Rad Diagram Features Shapes Custom Shape

or to use one of the predefined shape geometries:

XAML

<telerik:RadDiagramShape x:Name="ConditionShape"
                Width="80"
                Height="80"
                Content="condition"
                FontWeight="Bold"
                Geometry="{telerik:FlowChartShape ShapeType=PredefinedShape}"
                Position="160,80" />

C#

RadDiagramShape shape = new RadDiagramShape();
shape.Geometry = ShapeFactory.GetShapeGeometry(FlowChartShapeType.PredefinedShape);

VB.NET

Dim shape As New RadDiagramShape()
shape.Geometry = ShapeFactory.GetShapeGeometry(FlowChartShapeType.PredefinedShape)

The ShapeFactory class allows you to get a shape geometry from the enums with predefined shapes. This way you can create a RadDiagramShape in code-behind still taking advantage of the predefined list of shapes. The predefined shapes can be accesses in code-behind through the following enumerations:

  • ArrowShapeType - describes all ArrowShapes
  • CommonShapeType - describes all CommonShapes
  • FlowChartShapeType - describes all FlowChartShapes

Rad Diagram Features Shapes Predefined Shape

Diagramming Framework Predefined Shape Geometries

Telerik Diagramming Framework provides three types of predefined shape geometries - ArrowShapes, CommonShapes and FlowChartShapes. For each of these types the framework exposes xaml markup extensions that can be applied at the RadDiagramShape.Geometry property as a shortcut way of creating a shape.

ArrowShapes

  • A list of all predefined ArrowShapes:

    Arrow1
    Rad Diagram Features Shapes Arrow 1

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:ArrowShape ShapeType=Arrow1}" />
    

    Arrow2
    Rad Diagram Features Shapes Arrow 2

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:ArrowShape ShapeType=Arrow2}" />
    

    Arrow3
    Rad Diagram Features Shapes Arrow 3

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:ArrowShape ShapeType=Arrow3}" />
    

    Arrow4
    Rad Diagram Features Shapes Arrow 4

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:ArrowShape ShapeType=Arrow4}" />  
    

    Arrow5
    Rad Diagram Features Shapes Arrow 5

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:ArrowShape ShapeType=Arrow5}"/>
    

    Arrow6
    Rad Diagram Features Shapes Arrow 6

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:ArrowShape ShapeType=Arrow6}" />
    

    Arrow7
    Rad Diagram Features Shapes Arrow 7

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:ArrowShape ShapeType=Arrow7}"/>
    

    Arrow8
    Rad Diagram Features Shapes Arrow 8

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:ArrowShape ShapeType=Arrow8}"/>                                       
    

    DoubleArrow1
    Rad Diagram Features Shapes Double Arrow 1

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:ArrowShape ShapeType=DoubleArrow1}" />                                        
    

    DoubleArrow2
    Rad Diagram Features Shapes Double Arrow 2

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:ArrowShape ShapeType=DoubleArrow2}" />                                        
    

    DoubleArrow3
    Rad Diagram Features Shapes Double Arrow 3

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:ArrowShape ShapeType=DoubleArrow3}" />
    

    DoubleArrow4
    Rad Diagram Features Shapes Double Arrow 4

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:ArrowShape ShapeType=DoubleArrow4}" />
    

    DoubleArrow5
    Rad Diagram Features Shapes Double Arrow 5

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:ArrowShape ShapeType=DoubleArrow5}" />
    

CommonShapes

  • A list of all predefined CommonShapes:

    CloudShape
    Rad Diagram Features Shapes Cloud Shape

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:CommonShape ShapeType=CloudShape}" />                 
    

    Cross2Shape
    Rad Diagram Features Shapes Cross 2 Shape

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:CommonShape ShapeType=Cross2Shape}"/>
    

    CrossShape
    Rad Diagram Features Shapes Cross Shape

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:CommonShape ShapeType=CrossShape}" />                 
    

    EllipseShape
    Rad Diagram Features Shapes Ellipse Shape

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:CommonShape ShapeType=EllipseShape}" />               
    

    HexagonShape
    Rad Diagram Features Shapes Hexagon Shape

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:CommonShape ShapeType=HexagonShape}"/>                                        
    

    OctagonShape
    Rad Diagram Features Shapes Octagon Shape

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:CommonShape ShapeType=OctagonShape}" />
    

    PentagonShape
    Rad Diagram Features Shapes Pentagon Shape

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:CommonShape ShapeType=PentagonShape}" />
    

    RectangleShape
    Rad Diagram Features Shapes Rectangle Shape

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:CommonShape ShapeType=RectangleShape}"/>                                          
    

    RightTriangleShape
    Rad Diagram Features Shapes Right Triangle Shape

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:CommonShape ShapeType=RightTriangleShape}" />                                         
    

    RoundedRectangleShape
    Rad Diagram Features Shapes Rounded Rectangle Shape

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:CommonShape ShapeType=RoundedRectangleShape}" />                                          
    

    Star5Shape
    Rad Diagram Features Shapes Star 5 Shape

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:CommonShape ShapeType=Star5Shape}"/>                  
    

    Star6Shape
    Rad Diagram Features Shapes Star 6 Shape

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:CommonShape ShapeType=Star6Shape}" />
    

    Star7Shape
    Rad Diagram Features Shapes Star 7 Shape

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:CommonShape ShapeType=Star7Shape}" />
    

    TriangleShape
    Rad Diagram Features Shapes Triangle Shape

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:CommonShape ShapeType=TriangleShape}"/> 
    

FlowChartShapes

  • A list of all predefined FlowChartShapes:
    BeginLoopShape
    Rad Diagram Features Shapes Begin Loop Shape

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:FlowChartShape ShapeType=BeginLoopShape}" />
    

    CardShape
    Rad Diagram Features Shapes Card Shape

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:FlowChartShape ShapeType=CardShape}"/>
    

    CollateShape
    Rad Diagram Features Shapes Collate Shape

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:FlowChartShape ShapeType=CollateShape}" />                                    
    

    CreateRequestShape
    Rad Diagram Features Shapes Create Request Shape

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:FlowChartShape ShapeType=CreateRequestShape}" />
    

    Database1Shape
    Rad Diagram Features Shapes Database 1 Shape

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:FlowChartShape ShapeType=Database1Shape}"/>               
    

    Database2Shape
    Rad Diagram Features Shapes Database 2 Shape

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:FlowChartShape ShapeType=Database2Shape}" />                  
    

    Database3Shape
    Rad Diagram Features Shapes Database 3 Shape

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:FlowChartShape ShapeType=Database3Shape}"/>
    

    DataShape
    Rad Diagram Features Shapes Data Shape

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:FlowChartShape ShapeType=DataShape}" />
    

    DataStoreShape
    Rad Diagram Features Shapes Data Store Shape

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:FlowChartShape ShapeType=DataStoreShape}" />
    

    DecisionShape
    Rad Diagram Features Shapes Decision Shape

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:FlowChartShape ShapeType=DecisionShape}"/>
    

    DelayShape
    Rad Diagram Features Shapes Delay Shape

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:FlowChartShape ShapeType=DelayShape}" />                                          
    

    DevidedProcessShape
    Rad Diagram Features Shapes Devided Process Shape

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:FlowChartShape ShapeType=DevidedProcessShape}" />
    

    DirectDataShape
    Rad Diagram Features Shapes Direct Data Shape

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:FlowChartShape ShapeType=DirectDataShape}"/>
    

    DisplayShape
    Rad Diagram Features Shapes Display Shape

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:FlowChartShape ShapeType=DisplayShape}" />                
    

    DocumentShape
    Rad Diagram Features Shapes Document Shape

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:FlowChartShape ShapeType=DocumentShape}" />               
    

    DuplicatingShape
    Rad Diagram Features Shapes Duplicating Shape

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:FlowChartShape ShapeType=DuplicatingShape}"/>                 
    

    ExternalDataShape
    Rad Diagram Features Shapes External Data Shape

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:FlowChartShape ShapeType=ExternalDataShape}" />
    

    FeedbackShape
    Rad Diagram Features Shapes Feedback Shape

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:FlowChartShape ShapeType=FeedbackShape}" />
    

    FramedRectangleShape
    Rad Diagram Features Shapes Framed Rectangle Shape

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:FlowChartShape ShapeType=FramedRectangleShape}"/>
    

    InternalStorageShape
    Rad Diagram Features Shapes Internal Storage Shape

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:FlowChartShape ShapeType=InternalStorageShape}" />
    

    LinedDocumentShape
    Rad Diagram Features Shapes Lined Document Shape

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:FlowChartShape ShapeType=LinedDocumentShape}" />
    

    LoopLimitShape
    Rad Diagram Features Shapes Loop Limit Shape

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:FlowChartShape ShapeType=LoopLimitShape}"/>               
    

    ManualInputShape
    Rad Diagram Features Shapes Manual Input Shape

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:FlowChartShape ShapeType=ManualInputShape}" />
    

    ManualOperationShape
    Rad Diagram Features Shapes Manual Operation Shape

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:FlowChartShape ShapeType=ManualOperationShape}" />
    

    MessageFromUserShape
    Rad Diagram Features Shapes Message From User Shape

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:FlowChartShape ShapeType=MessageFromUserShape}"/>
    

    MessageToUserShape
    Rad Diagram Features Shapes Message To User Shape

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:FlowChartShape ShapeType=MessageToUserShape}" />
    

    MicroformProcessingShape
    Rad Diagram Features Shapes Microform Processing Shape

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:FlowChartShape ShapeType=MicroformProcessingShape}" />
    

    MicroformRecordingShape
    Rad Diagram Features Shapes Microform Recording Shape

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:FlowChartShape ShapeType=MicroformRecordingShape}"/>
    

    MultipleDocumentShape
    Rad Diagram Features Shapes Multiple Document Shape

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:FlowChartShape ShapeType=MultipleDocumentShape}" />
    

    OffPageConnectionShape
    Rad Diagram Features Shapes Off Page Connection Shape

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:FlowChartShape ShapeType=OffPageConnectionShape}" />
    

    OffPageLinkShape
    Rad Diagram Features Shapes Off Page Link Shape

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:FlowChartShape ShapeType=OffPageLinkShape}"/>
    

    OffPageReflectionShape
    Rad Diagram Features Shapes Off Page Reflection Shape

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:FlowChartShape ShapeType=OffPageReflectionShape}" />
    

    OrShape
    Rad Diagram Features Shapes Or Shape

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:FlowChartShape ShapeType=OrShape}" />
    

    PaperTapeShape
    Rad Diagram Features Shapes Paper Tape Shape

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:FlowChartShape ShapeType=PaperTapeShape}"/>
    

    PredefinedShape
    Rad Diagram Features Shapes Predefined Shape

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:FlowChartShape ShapeType=PredefinedShape}"  />
    

    PreparationShape
    Rad Diagram Features Shapes Preparation Shape

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:FlowChartShape ShapeType=PreparationShape}" />
    

    PrimitiveFromCallShape
    Rad Diagram Features Shapes Primitive From Call Shape

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:FlowChartShape ShapeType=PrimitiveFromCallShape}"/>
    

    PrimitiveToCallShape
    Rad Diagram Features Shapes Primitive To Call Shape

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:FlowChartShape ShapeType=PrimitiveToCallShape}"  />
    

    SequentialDataShape
    Rad Diagram Features Shapes Sequential Data Shape

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:FlowChartShape ShapeType=SequentialDataShape}" />                         
    

    SortShape
    Rad Diagram Features Shapes Sort Shape

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:FlowChartShape ShapeType=SortShape}"/>
    

    StartShape
    Rad Diagram Features Shapes Start Shape

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:FlowChartShape ShapeType=StartShape}"  />
    

    StoredDataShape
    Rad Diagram Features Shapes Stored Data Shape

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:FlowChartShape ShapeType=StoredDataShape}" />
    

    SummingJunctionShape
    Rad Diagram Features Shapes Summing Junction Shape

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:FlowChartShape ShapeType=SummingJunctionShape}"/>
    

    TerminatorShape
    Rad Diagram Features Shapes Terminator Shape

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:FlowChartShape ShapeType=TerminatorShape}"  />
    

    TransmittalTapeShape
    Rad Diagram Features Shapes Transmittal Tape Shape

    XAML

    <telerik:RadDiagramShape Geometry="{telerik:FlowChartShape ShapeType=TransmittalTapeShape}" />
    

Setting the Position of a Shape

The RadDiagramShape.Position property is of type Point and it gets or sets the coordinates of the top left point of a shape. By default its value is a Point with coordinates (0,0).

Content

You can add content in the RadDiagramShape using its Content property. It allows you to define the content as a string, a UIElement or a business property.

  • Define a sample string value for the RadDiagramShape.Content property:

    XAML

    <Grid>
        <telerik:RadDiagram x:Name="MyDiagram">
            <telerik:RadDiagramShape Content="RadDiagramShape" />
        </telerik:RadDiagram>
    </Grid>
    

    Rad Diagram Features Shapes String Content

  • Define UIElements in the Content of the shape:

    XAML

    <Grid>
        <telerik:RadDiagram x:Name="MyDiagram">
            <telerik:RadDiagramShape x:Name="EndShape"
                                        Width="50"
                                        Height="50"
                                        FontWeight="Bold"
                                        Geometry="{telerik:CommonShape ShapeType=EllipseShape}"
                                        Position="185,450">
                <telerik:RadDiagramShape.ContentTemplate>
                    <DataTemplate>
                        <Ellipse Width="25"
                                 Height="25"
                                 Fill="#FF333333" />
                    </DataTemplate>
                </telerik:RadDiagramShape.ContentTemplate>
            </telerik:RadDiagramShape>
        </telerik:RadDiagram>
    </Grid>
    

    Rad Diagram Features Shapes Custom Content

  • Bind the Content to a business property: For the purpose of this tutorial, let's define a sample business class and set it as the DataContext of the UserControl.

    C#

    public class EmployeeViewModel
    {
        public string ImagePath { get; set; }
        public string JobPosition { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
    }
        ....
    this.DataContext = new EmployeeViewModel()
    {
        ImagePath = "Images/NancyDavolio.jpg",
        FirstName = "Nancy",
        LastName = "Davolio",
        JobPosition = "President Marketing"
    };
    

    VB.NET

    Public Class EmployeeViewModel
        Public Property ImagePath() As String
        Public Property JobPosition() As String
        Public Property FirstName() As String
        Public Property LastName() As String
    End Class
    ...
    Me.DataContext = New EmployeeViewModel() With {
      .ImagePath = "Images/NancyDavolio.jpg",
      .FirstName = "Nancy",
      .LastName = "Davolio",
      .JobPosition = "President Marketing"
      }
    

    XAML

        <Grid>
            <telerik:RadDiagram x:Name="MyDiagram">
                <telerik:RadDiagramShape Content="{Binding LastName}"
                                         Position="20,40" />
            </telerik:RadDiagram>
        </Grid>
    

    Rad Diagram Features Shapes Data Binding
    When you bind the Content to a business class, the RadDiagramShape will display the result of the business item ToString() method. If you bind to a business property, then the value of the property will be displayed as the content of the shape.

  • If you want to customize the visual representation of the bound property, you can take advantage of the RadDiagramShape ContentTemplate property:

    XAML

    <Grid>
        <telerik:RadDiagram x:Name="MyDiagram">
            <telerik:RadDiagramShape Content="{Binding}"
                                     Position="20,40"
                     Padding="0">
                <telerik:RadDiagramShape.ContentTemplate>
                    <DataTemplate>
                        <Grid Width="200"
                              Height="74"
                              Background="#FF9F9E9E">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Image Width="61"
                                   Height="70"
                                   Margin="2"
                                   Source="{Binding ImagePath}"
                                   Stretch="Fill" />
                            <StackPanel Grid.Column="1"
                                        Margin="5 0 0 0"
                                        HorizontalAlignment="Left"
                                        VerticalAlignment="Top">
                                <TextBlock Margin="0 5 0 0"
                                           FontWeight="Bold"
                                           Text="{Binding JobPosition}" />
                                <TextBlock Width="80"
                                           HorizontalAlignment="Left"
                                           FontFamily="Segoe UI Light"
                                           FontSize="19"
                                           Foreground="#FFFFFFFF"
                                           Text="{Binding FirstName}"
                                           TextWrapping="Wrap" />
                                <TextBlock Width="80"
                                           HorizontalAlignment="Left"
                                           FontFamily="Segoe UI Light"
                                           FontSize="19"
                                           Foreground="#FFFFFFFF"
                                           Text="{Binding LastName}"
                                           TextWrapping="Wrap" />
                            </StackPanel>
                        </Grid>
                    </DataTemplate>
                </telerik:RadDiagramShape.ContentTemplate>
            </telerik:RadDiagramShape>
        </telerik:RadDiagram>
    </Grid>
    

    Rad Diagram Features Shapes Data Template

Connectors

Each RadDiagramShape has 5 default connectors - Top, Right, Bottom, Left and Auto. Those are the predefined points where you can connect a RadDiagramConnection to the shape.
Rad Diagram Features Shapes Connectors

  • Top - the connector point positioned in the middle of the top border of a shape

  • Bottom - the connector point positioned in the middle of the bottom border of a shape

  • Right - the connector point positioned in the middle of the right border of a shape

  • Left - the connector point positioned in the middle of the left border of a shape

  • Auto - the connector positioned at the center of a shape. If you attach a RadDiagramConnection to this point, the connector point of the connection will dynamically change based on the shortest path to the shape.

You can also define custom connectors as described in the Custom Connectors tutorial. Or you can use the gliding connectors feature exposed by the RadDiagramShape class. This feature essentially says to a shape that it doesn't have any explicitly positioned connectors thus allowing a connection to glide through the edges of the shape. In order to use this feature you can set the RadDiagramShape.UseGlidingConnector property to True. Moreover, this feature comes with a set of predefined shape forms determining the form of edges through which a gliding connection can slide. These shapes are described by the GlidingStyle property, which is a GlidingStyle enumeration exposing the following members:

  • Rectangle - The connections attached to a gliding connector will glide along a rectangle with dimensions equal to the bounds of the shape.

  • Ellipse - The connections attached to a gliding connector will glide along an ellipse with dimensions equal to the bounds of the shape.

  • Diamond - The connections attached to a gliding connector will glide along a rhombus (diamond polygon) with dimensions equal to the bounds of the shape.

  • RightTriangle - The connections attached to a gliding connector will glide along a right triangle with dimensions equal to the bounds of the shape.

  • Triangle - The connections attached to a gliding connector will glide along a triangle with dimensions equal to the bounds of the shape.

All connector points of a shape can be accessed through the RadDiagramShape.Connectors property. It is a collection of RadDiagramConnector items. Each item represents a RadDiagramShape connector and can give you information about the coordinates of each connector point, its position and if the connector is active. A connector is active when the connection tool activates it in order to prepare it to start drawing a connection.

If you want to change the default appearance of the connector points you can use the RadDiagramShape.ConnectorStyle property to apply a custom style on them.

Common Properties

The RadDiagramShape class exposes multiple properties that allow you to control the state and appearance of a shape.

Shape Bounds

You can get the bounds of a RadDiagramShape through the Bounds and ActualBounds properties:

  • Bounds - this property is of type Rect and it gets the width, height and location of the shape's bounds.

  • ActualBounds - this property is of type Rect and it gets the width, height and location of a rotated shape's bounds.

Shape Connections

You can get all incoming and outgoing connections related to the shape through the following properties:

  • IncomingLinks - this property is an enumeration that gets all incoming connections. It gives you information about the connections type, starting and ending points as well as the related connector positions.

  • OutgoingLinks - this property is an enumeration that gets all outgoing connections. It gives you information about the connections type, starting and ending points as well as the related connector positions.

Rotation Angle

Telerik RadDiagramShape supports rotation. You can get or set the rotation angle of a shape using the RotationAngle property.

Edit Mode

You can set the RadDiagramShape in edit mode using the IsInEditMode property. By default when a shape enters edit mode, the RadDiagramShape.Content is displayed inside a TextBox control so that you can change its value.
Rad Diagram Features Shapes Edit String

If the RadDiagramShape.Content property is bound to a business item, you can set the connection EditTemplate to define how the business item will be edited. For example if we use the BusinessItem class, defined above, as a DataContext of the RadDiagram, we can set up the following connection:

XAML

<Grid>
    <telerik:RadDiagram x:Name="MyDiagram">
        <telerik:RadDiagramShape Content="{Binding}"
                                 Position="20,40">
            <telerik:RadDiagramShape.ContentTemplate>
                <DataTemplate>
                    <Grid Width="200"
                          Height="74"
                          Background="#FF9F9E9E">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Image Width="61"
                               Height="70"
                               Margin="2"
                               Source="{Binding ImagePath}"
                               Stretch="Fill" />
                        <StackPanel Grid.Column="1"
                                    Margin="5 0 0 0"
                                    HorizontalAlignment="Left"
                                    VerticalAlignment="Top">
                            <TextBlock Margin="0 5 0 0"
                                       FontWeight="Bold"
                                       Text="{Binding JobPosition}" />
                            <TextBlock Width="80"
                                       HorizontalAlignment="Left"
                                       FontFamily="Segoe UI Light"
                                       FontSize="19"
                                       Foreground="#FFFFFFFF"
                                       Text="{Binding FirstName}"
                                       TextWrapping="Wrap" />
                            <TextBlock Width="80"
                                       HorizontalAlignment="Left"
                                       FontFamily="Segoe UI Light"
                                       FontSize="19"
                                       Foreground="#FFFFFFFF"
                                       Text="{Binding LastName}"
                                       TextWrapping="Wrap" />
                        </StackPanel>
                    </Grid>
                </DataTemplate>
            </telerik:RadDiagramShape.ContentTemplate>
            <telerik:RadDiagramShape.EditTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal"
                                VerticalAlignment="Center"
                                HorizontalAlignment="Center">
                        <TextBox Text="{Binding FirstName}"
                                 Margin="5,0" />
                        <TextBox Text="{Binding LastName}"
                                 Margin="5,0" />
                    </StackPanel>
                </DataTemplate>
            </telerik:RadDiagramShape.EditTemplate>
        </telerik:RadDiagramShape>
    </telerik:RadDiagram>
</Grid>

Rad Diagram Features Shapes Edit Template

Apart from setting the IsInEditMode property to True, you can also enter edit mode by pressing F2 or double-clicking on the shape. For more information please refer to the Items Editing tutorial.

Shape Selection State

The following properties allow you to track and control the selection state of a shape:

  • IsSelected - gets or sets whether the shape is selected.

Shape ZIndex

You can get or set the z-order rendering behavior of the RadDiagramShape through the ZIndex property.

Customize the Shape Appearance

You can easily customize the visual appearance of the RadDiagramShape by using the following properties:

  • Background - gets or sets the brush that specifies the RadDiagramShape background color.

  • BorderBrush - gets or sets the brush that specifies the RadDiagramShape border color.

  • StrokeDashArray - gets or sets a collection of Double values that indicate the pattern of dashes and gaps that is used to outline the RadDiagramShape.

  • StrokeThickness - gets or sets the width of the RadDiagramShape outline.

You can use the RadDiagram.ShapeStyle property to explicitly apply a style on all RadDiagramShapes in a RadDiagram instance. Read more.

See Also