title	page_title	description	slug	tags	published	position
Getting Started	Getting Started	Check our "Getting Started" documentation article for the RadDiagram {{ site.framework_name }} control.	raddiagram-getting-started	getting,started	true	2

Getting Started with {{ site.framework_name }} Diagram

Telerik RadDiagrams are a powerful diagramming framework that can bring to life your rich data-visualization scenarios. This tutorial will walk you through the main concepts and tools of the diagramming framework and help you to create the flow diagram of an "if-else" operator.

Figure 1: Flow diagram example

Adding Telerik Assemblies Using NuGet

To use RadDiagram when working with NuGet packages, install the Telerik.Windows.Controls.Diagrams.for.Wpf.Xaml package. The [package name may vary]({%slug nuget-available-packages%}) slightly based on the Telerik dlls set - [Xaml or NoXaml]({%slug xaml-vs-noxaml%})

Read more about NuGet installation in the [Installing UI for WPF from NuGet Package]({%slug nuget-installation%}) article.

tip With the 2025 Q1 release, the Telerik UI for WPF has a new licensing mechanism. You can learn more about it [here]({%slug installing-license-key%}).

Adding Assembly References Manually

If you are not using NuGet packages, you can add a reference to the following assemblies:

Telerik.Licensing.Runtime
Telerik.Windows.Controls
Telerik.Windows.Controls.Diagrams
Telerik.Windows.Diagrams.Core

To use the RadDiagram [MVVM support]({%slug raddiagram-data-extensionsviewmodels%}) or one of the extensions tools like the [settings pane]({%slug raddiagram-extensions-settingspane-overview%}) or the [toolbox]({%slug raddiagram-extensions-toolbox%}) you will need to add reference also to the following assemblies:

Telerik.Windows.Controls.Diagrams.Extensions
Telerik.Windows.Controls.Input
Telerik.Windows.Controls.Navigation

The following picture shows the interdependency between the RadDiagram main assemblies. Note that the Telerik.Windows.Controls.Diagrams.Extensions relies also on Telerik.Windows.Controls.Input and Telerik.Windows.Controls.Navigation.

Figure 2: Interdependency of the RadDiagram control main assemblies

tip You can find more info about the Telerik UI for WPF dependencies in the [Controls Dependencies]({%slug installation-installing-controls-dependencies-wpf%}) help article.

Graph Object Model

The Graph Object Model is the main concept behind the diagramming framework. It contains the following three main objects:

Graph - this is the structure that contains the RadDiagramShapes and RadDiagramConnections. In the Telerik Diagramming Framework, the graph is represented by the RadDiagram class.
Shape - the shape describes a node of a Graph that in the Telerik Diagramming Framework is represented by the RadDiagramShape class.
Connection - the connection describes the edges of the graph and it is basically an object that connects zero, one or two shapes. In the Telerik Diagramming Framework, the connection is represented by the RadDiagramConnection class.

tip The RadDiagram items are represented by the RadDiagramItem class. Therefore, both RadDiagramConnection and RadDiagramShape classes derive from the RadDiagramItem class.

important In order to populate the RadDiagram with RadDiagramItems, you can add RadDiagramShapes and RadDiagramConnections in the RadDiagram.Items collection from code-behind ([read more]({%slug raddiagram-data-code-behind%})) or declaratively in xaml ([read more]({%slug raddiagram-data-declaratively%})). Also, because the RadDiagram control is a data-driven control, it supports data binding. In order to bind the RadDiagram to a collection, you can use its GraphSource property. Note that when the GraphSource property is set, the Items collection is made read-only and fixed-size. For more information, please refer to the [DataBinding]({%slug raddiagram-data-databinding%}) tutorial.

Please note that the examples in this tutorial are showcasing the Telerik Windows8 theme. In the {% if site.site_name == 'Silverlight' %}Setting a Theme{% endif %}{% if site.site_name == 'WPF' %}Setting a Theme{% endif %} article you can find more information on how to set an application-wide theme.

Setting Up the Drawing Canvas

Before proceeding with adding RadDiagram to your project, make sure the required assembly references are added to the project. When you want to create a diagram in your application, you first need to add the RadDiagram control, as it represents the main canvas onto which the diagramming tools and shapes are drawn.

[XAML] Example 1: Adding RadDiagram in XAML

{{region raddiagram_getting_started_0}} <telerik:RadDiagram /> {{endregion}}

Figure 3: Default drawing canvas:

RadDiagram exposes a set of properties that allow you to customize the graph layout and operations. For example, you can set up the active mouse tool, specify if a cut, copy, paste or delete operation is allowed, and customize the background color, the cells' height and width as well as the GridLine thickness of the drawing canvas.

Adding RadDiagramShapes

In order to create a diagram describing the flow of an "if-else" operator, you will need four shapes - two will represent the statements, one will describe the condition and one will represent the final result of the operator.

Let's start with the condition of the "if-else" operator. In a block diagram, a condition is usually described by a diamond shape, called a decision shape.

tip The RadDiagramShape exposes a Geometry property that allows you to create a custom geometry or use predefined shape geometry. The predefined shape geometries in the Telerik Diagramming Framework are described by the ArrowShape, CommonShape and FlowChartShape extension classes. For more information, pelase refer to the [DiagramShapes]({%slug raddiagrams-features-shapes%}) tutorial.

[XAML] Example 2: Adding RadDiagramShape in XAML

{{region raddiagram_getting_started_1}} telerik:RadDiagram <telerik:RadDiagramShape Geometry="{telerik:FlowChartShape ShapeType=DecisionShape}" /> </telerik:RadDiagram> {{endregion}}

Figure 4: DecisionShape default visual look

You can define the size of the shape and set its Content and x:Name properties to better describe it.

[XAML] Example 3: Customize DecisionShape in XAML

{{region raddiagram_getting_started_2}} telerik:RadDiagram <telerik:RadDiagramShape x:Name="ConditionShape" Width="80" Height="80" Content="condition" FontWeight="Bold" Geometry="{telerik:FlowChartShape ShapeType=DecisionShape}" /> </telerik:RadDiagram> {{endregion}}

Figure 5: Customized DecisionShape visual look

To describe the statements of the "if-else" operator you can use the default geometry of the RadDiagramShape.

[XAML] Example 4: Setting default geometry of the RadDiagramShape in XAML

{{region raddiagram_getting_started_3}} telerik:RadDiagram <telerik:RadDiagramShape x:Name="ConditionShape" Width="80" Height="80" Content="condition" FontWeight="Bold" Geometry="{telerik:FlowChartShape ShapeType=DecisionShape}" /> <telerik:RadDiagramShape x:Name="StatementShape1" Width="100" Content="statement(s)" FontWeight="Bold" /> <telerik:RadDiagramShape x:Name="StatementShape2" Width="100" Content="statement(s)" FontWeight="Bold" /> </telerik:RadDiagram> {{endregion}}

Figure 6: RadDiagramShapes without its Position property set

Adding multiple shapes in the RadDiagram without setting their position, by default, will position all shapes at the top left corner of the drawing canvas. In order to rearrange their layout, you need to set the Position property of each shape. This property is of type Point and it gets or sets the coordinates of the top left point of a shape.

[XAML] Example 5: Set the Position property in XAML

{{region raddiagram_getting_started_4}} telerik:RadDiagram <telerik:RadDiagramShape x:Name="ConditionShape" Width="80" Height="80" Content="condition" FontWeight="Bold" Geometry="{telerik:FlowChartShape ShapeType=DecisionShape}" Position="160,80" /> <telerik:RadDiagramShape x:Name="StatementShape1" Width="100" Content="statement(s)" FontWeight="Bold" Position="60,280" /> <telerik:RadDiagramShape x:Name="StatementShape2" Width="100" Content="statement(s)" FontWeight="Bold" Position="240,280" /> </telerik:RadDiagram> {{endregion}}

Figure 7: RadDiagramShape with its Position property set

To describe the final result of the operator you can use an ellipse shape. Telerik Diagramming Framework provides such a predefined shape. You can find a shape of type EllipseShape in the CommonShape extension class.

[XAML] Example 6: Declaring EllipseShape in XAML

{{region raddiagram_getting_started_5}} telerik:RadDiagram <telerik:RadDiagramShape x:Name="EndShape" Width="50" Height="50" Content="End" FontWeight="Bold" Geometry="{telerik:CommonShape ShapeType=EllipseShape}" /> </telerik:RadDiagram> {{endregion}}

Figure 8: Customized EllipseShape look

tip The RadDiagramItem class exposes ContentTemplate and ContentTemplateSelector properties that allow you to customize the content of the RadDiagramShapes and RadDiagramConnections.

You can customize the content of the ellipse RadDiagramShape to mark it as the end of the "if-else" flow diagram.

[XAML] Example 7: Customize EllipseShape in XAML

{{region raddiagram_getting_started_6}} telerik:RadDiagram <telerik:RadDiagramShape x:Name="ConditionShape" Width="80" Height="80" Content="condition" FontWeight="Bold" Geometry="{telerik:FlowChartShape ShapeType=DecisionShape}" Position="160,80" /> <telerik:RadDiagramShape x:Name="StatementShape1" Width="100" Content="statement(s)" FontWeight="Bold" Position="60,280" /> <telerik:RadDiagramShape x:Name="StatementShape2" Width="100" Content="statement(s)" FontWeight="Bold" Position="240,280" /> <telerik:RadDiagramShape x:Name="EndShape" Width="50" Height="50" FontWeight="Bold" Geometry="{telerik:CommonShape ShapeType=EllipseShape}" Position="185,450"> telerik:RadDiagramShape.ContentTemplate </telerik:RadDiagramShape.ContentTemplate> </telerik:RadDiagramShape> </telerik:RadDiagram> {{endregion}}

Figure 9: Customized EllipseShape

Adding RadDiagramConnections

Finally, you can connect all shapes using RadDiagramConnections.

tip The RadDiagramConnection class exposes a set of properties that allow you to define and customize the source and target of the connection. For more information, please refer to the [DiagramConnection]({%slug raddiagrams-features-connections%}) tutorial.

In order to connect the shapes and finish the flow diagram of the "if-else" operator, you need to set up 5 connections:

Add connections between the 'condition' shape and the 'statements' shapes:

[XAML] Example 8: Adding RadDiagramConnection in XAML

{{region raddiagram_getting_started_7}} <telerik:RadDiagramConnection Content="if condition is false" FontWeight="Bold" Source="{Binding ElementName=ConditionShape}" SourceConnectorPosition="Bottom" StrokeThickness="2" Target="{Binding ElementName=StatementShape1}" TargetCapType="Arrow1Filled"> telerik:RadDiagramConnection.ContentTemplate </telerik:RadDiagramConnection.ContentTemplate> </telerik:RadDiagramConnection> <telerik:RadDiagramConnection Content="if condition is true" FontWeight="Bold" Source="{Binding ElementName=ConditionShape}" SourceConnectorPosition="Bottom" StrokeThickness="2" Target="{Binding ElementName=StatementShape2}" TargetCapType="Arrow1Filled"> telerik:RadDiagramConnection.ContentTemplate </telerik:RadDiagramConnection.ContentTemplate> </telerik:RadDiagramConnection> {{endregion}}

Figure 10: RadDiagramConnection visual example
Add connections between the 'statements' shape and the 'final result' shapes:

[XAML] Example 9: Add connection between shapes

{{region raddiagram_getting_started_8}} <telerik:RadDiagramConnection Source="{Binding ElementName=StatementShape1}" SourceConnectorPosition="Bottom" StrokeThickness="2" Target="{Binding ElementName=EndShape}" TargetCapType="Arrow1Filled" /> <telerik:RadDiagramConnection Source="{Binding ElementName=StatementShape2}" SourceConnectorPosition="Bottom" StrokeThickness="2" Target="{Binding ElementName=EndShape}" TargetCapType="Arrow1Filled" /> {{endregion}}

Figure 11: RadDiagramConnection visual example
Add the connection that points to the start of the operator:

[XAML] Example 10: Setting custom DataTemplate to RadDiagramConnection

{{region raddiagram_getting_started_9}} <telerik:RadDiagramConnection HorizontalContentAlignment="Center" VerticalContentAlignment="Top" Content="Start" FontWeight="Bold" SourceCapType="Arrow6Filled" StrokeThickness="2" Target="{Binding ElementName=ConditionShape}" TargetCapType="Arrow1Filled" StartPoint="200,20"> telerik:RadDiagramConnection.ContentTemplate </telerik:RadDiagramConnection.ContentTemplate> </telerik:RadDiagramConnection> {{endregion}}

Figure 12: Customized RadDiagramConnection

RadDiagram Example - "if-else" Operator Flow Diagram

You can find the final XAML definition of the "if-else" flow diagram in Example 11.

[XAML] Example 11: Final "if-else" flow diagram XAML

{{region raddiagram_getting_started_10}} telerik:RadDiagram <telerik:RadDiagramShape x:Name="ConditionShape" Width="80" Height="80" Content="condition" FontWeight="Bold" Geometry="{telerik:FlowChartShape ShapeType=DecisionShape}" Position="160,80" /> <telerik:RadDiagramConnection HorizontalContentAlignment="Center" VerticalContentAlignment="Top" Content="Start" FontWeight="Bold" SourceCapType="Arrow6Filled" StrokeThickness="2" Target="{Binding ElementName=ConditionShape}" TargetCapType="Arrow1Filled" StartPoint="200,20"> telerik:RadDiagramConnection.ContentTemplate </telerik:RadDiagramConnection.ContentTemplate> </telerik:RadDiagramConnection> <telerik:RadDiagramShape x:Name="StatementShape1" Width="100" Content="statement(s)" FontWeight="Bold" Position="60,280" /> <telerik:RadDiagramConnection Content="if condition is false" FontWeight="Bold" Source="{Binding ElementName=ConditionShape}" SourceConnectorPosition="Bottom" StrokeThickness="2" Target="{Binding ElementName=StatementShape1}" TargetCapType="Arrow1Filled"> telerik:RadDiagramConnection.ContentTemplate </telerik:RadDiagramConnection.ContentTemplate> </telerik:RadDiagramConnection> <telerik:RadDiagramShape x:Name="StatementShape2" Width="100" Content="statement(s)" FontWeight="Bold" Position="240,280" /> <telerik:RadDiagramConnection Content="if condition is true" FontWeight="Bold" Source="{Binding ElementName=ConditionShape}" SourceConnectorPosition="Bottom" StrokeThickness="2" Target="{Binding ElementName=StatementShape2}" TargetCapType="Arrow1Filled"> telerik:RadDiagramConnection.ContentTemplate </telerik:RadDiagramConnection.ContentTemplate> </telerik:RadDiagramConnection> <telerik:RadDiagramShape x:Name="EndShape" Width="50" Height="50" FontWeight="Bold" Geometry="{telerik:CommonShape ShapeType=EllipseShape}" Position="185,450"> telerik:RadDiagramShape.ContentTemplate </telerik:RadDiagramShape.ContentTemplate> </telerik:RadDiagramShape> <telerik:RadDiagramConnection Source="{Binding ElementName=StatementShape1}" SourceConnectorPosition="Bottom" StrokeThickness="2" Target="{Binding ElementName=EndShape}" TargetCapType="Arrow1Filled" /> <telerik:RadDiagramConnection Source="{Binding ElementName=StatementShape2}" SourceConnectorPosition="Bottom" StrokeThickness="2" Target="{Binding ElementName=EndShape}" TargetCapType="Arrow1Filled" /> </telerik:RadDiagram> {{endregion}}

Figure 13: "if-else" operator flow diagram visual look

Setting a Theme

The controls from our suite support different themes. You can see how to apply a theme different than the default one in the [Setting a Theme]({%slug styling-apperance-implicit-styles-overview%}) help article.

important Changing the theme using implicit styles will affect all controls that have styles defined in the merged resource dictionaries. This is applicable only for the controls in the scope in which the resources are merged.

To change the theme, you can follow the steps below:

Choose between the themes and add reference to the corresponding theme assembly (ex: Telerik.Windows.Themes.Windows8.dll). You can see the different themes applied in the Theming examples from our {% if site.site_name == 'WPF' %}WPF Controls Examples{% else %}Silverlight Controls Examples{% endif %} application.
Merge the ResourceDictionaries with the namespace required for the controls that you are using from the theme assembly. For the RadDiagram, you will need to merge the following resources:
- Telerik.Windows.Controls
- Telerik.Windows.Controls.Diagrams
- Telerik.Windows.Controls.Diagrams.Extensions
- Telerik.Windows.Controls.Input
- Telerik.Windows.Controls.Navigation

Example 12 demonstrates how to merge the ResourceDictionaries so that they are applied globally for the entire application.

[XAML] Example 12: Merge the ResourceDictionaries

{{region raddesktopalert-getting-started_6}} <Application.Resources> <ResourceDictionary.MergedDictionaries> </ResourceDictionary.MergedDictionaries> </Application.Resources> {{endregion}}

Alternatively, you can use the theme of the control via the {% if site.site_name == 'WPF' %}StyleManager{% else %}StyleManager{% endif %}.

Figure 14 shows a RadDiagram with the Windows8 theme applied.

Figure 14: RadDiagram with the Windows8 theme

{% if site.site_name == 'WPF' %}

Telerik UI for WPF Learning Resources

Telerik UI for WPF Diagrams Component
[Getting Started with Telerik UI for WPF Components]({%slug getting-started-first-steps%})
[Telerik UI for WPF Installation]({%slug installation-installing-which-file-do-i-need%})
[Telerik UI for WPF and WinForms Integration]({%slug winforms-integration%})
[Telerik UI for WPF Visual Studio Templates]({%slug visual-studio-templates%})
[Setting a Theme with Telerik UI for WPF]({%slug styling-apperance-implicit-styles-overview%})
Telerik UI for WPF Virtual Classroom (Training Courses for Registered Users)
Telerik UI for WPF License Agreement {% endif %}

Files

getting-started.md

Latest commit

History