Create a Feature-Rich WPF Diagramming App in 2 Minutes
Tags: csharp, dotnet, wpf, desktop
Published: 2021-08-17 11:49:12

---
title: Create a Feature-Rich WPF Diagramming App in 2 Minutes
published: true
date: 2021-08-17 10:30:34 UTC
tags: csharp, dotnet, wpf, desktop
canonical_url: https://www.syncfusion.com/blogs/post/create-a-feature-rich-wpf-diagramming-app-in-2-minutes.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/azgwj5gtjoxw2iwpd9l4.png
---

Are you struggling to convey a workflow or finding it hard to create an organizational chart? Don’t worry, our Diagram control makes it easier and you can get started in no time. The Syncfusion [WPF Diagram control](https://www.syncfusion.com/wpf-ui-controls/diagram "Link to WPF Diagram control") is a powerful, extensible, and feature-rich library for creating and editing interactive diagrams. It is a one-stop solution for all your diagram needs, such as annotations, grouping, localization, printing, exporting, and more.

In this blog post, we are going to learn how to create a feature-rich diagramming application with the WPF Diagram control in two minutes.

## Prerequisites

- [Visual Studio 2015 or above](https://visualstudio.microsoft.com/vs/older-downloads/ "Link to download Visual Studio")
- [Syncfusion WPF Framework V19.2](https://www.syncfusion.com/downloads/wpf "Link to Essential Studio for WPF")
- [Configure toolbox with Syncfusion WPF controls](https://help.syncfusion.com/wpf/visual-studio-integration/toolbox-configuration "Link to Toolbox Configuration documentation")

## Step 1: Design application layout.

In the MainWindow.xaml file, split the default grid into two rows and two columns before adding the Syncfusion controls.

Refer to the following code example.

```html
<Grid>
 <Grid.RowDefinitions>
   <RowDefinition Height="Auto"/>
   <RowDefinition Height="*"/>
 </Grid.RowDefinitions>

 <Grid.ColumnDefinitions>
   <ColumnDefinition Width="Auto" />
   <ColumnDefinition Width="8*" />
 </Grid.ColumnDefinitions>
</Grid>
```

## Step 2: Add and configure the diagram ribbon from the toolbox.

The diagram ribbon control is a user interface that hosts a quick access toolbar, an application menu, and tabs to provide the most common features and settings for the WPF Diagram.

So let’s, add the **_SfDiagramRibbon_** control to the application by dragging it from the toolbox to the designer view. Once dropped, set the Grid.Row to 0, Grid.Column to 0, and Grid.ColumnSpan to 2 in your XAML file.

Refer to the following code example.

```html
<syncfusion:SfDiagramRibbon Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" />
```

**Note:** For more details, refer to the [Diagram Ribbon in WPF Diagram documentation](https://help.syncfusion.com/wpf/diagram/diagram-ribbon "Link to Diagram Ribbon in WPF Diagram documentation").

## Step 3: Add Diagram Canvas from the toolbox.

Now, add the **_SfDiagram_** control to the application by dragging it from the toolbox to the designer view. Once dropped, set the Name to  **Diagram** , Grid.Row to  **1** , Grid.Column to  **1** , and the Nodes, Connectors, and Groups properties with the new instances of NodesCollection, ConnectorCollection, and GroupCollection respectively.

Bind the DataContext of the SfDiagramRibbon to the **ElementName** of the **Diagram** control.

Refer to the following code example.

```html
<syncfusion:SfDiagramRibbon Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" DataContext="{Binding ElementName=Diagram}"/>
 <syncfusion:SfDiagram x:Name="Diagram" Grid.Column="1" Grid.Row="1">
   <syncfusion:SfDiagram.Theme>
      <syncfusion:OfficeTheme/>
   </syncfusion:SfDiagram.Theme>
   <syncfusion:SfDiagram.HorizontalRuler>
      <syncfusion:Ruler/>
   </syncfusion:SfDiagram.HorizontalRuler>
   <syncfusion:SfDiagram.SnapSettings>
      <syncfusion:SnapSettings SnapConstraints="ShowLines"/>
   </syncfusion:SfDiagram.SnapSettings>
   <syncfusion:SfDiagram.VerticalRuler>
      <syncfusion:Ruler Orientation="Vertical"/>
   </syncfusion:SfDiagram.VerticalRuler>
   <syncfusion:SfDiagram.Nodes>
      <syncfusion:NodeCollection/>
   </syncfusion:SfDiagram.Nodes>
   <syncfusion:SfDiagram.Connectors>
      <syncfusion:ConnectorCollection/>
   </syncfusion:SfDiagram.Connectors>
   <syncfusion:SfDiagram.Groups>
      <syncfusion:GroupCollection/>
   </syncfusion:SfDiagram.Groups>
 </syncfusion:SfDiagram>
```

## Step 4: Add resources and style.

To use WPF Diagram control’s built-in shapes, you need to add “_/Syncfusion.SfDiagram.Wpf;component/Resources/BasicShapes.xaml_” into windows resource dictionary. Also, add style for node in the same resource dictionary and set ShapeStyle property with value for Fill, Stroke, StrokeThickness and Stretch.

```html
<Window.Resources>
 <ResourceDictionary>
   <ResourceDictionary.MergedDictionaries>
     <ResourceDictionary Source="/Syncfusion.SfDiagram.WPF;component/Resources/BasicShapes.xaml"/>
   </ResourceDictionary.MergedDictionaries>
   <Style TargetType="syncfusion:Node">
      <Setter Property="ShapeStyle">
         <Setter.Value>
            <Style TargetType="Path">
               <Setter Property="Fill" Value="#FF5B9BD5 "/>
               <Setter Property="Stroke" Value="#FFC8C8C8 "/>
               <Setter Property="StrokeThickness" Value="1"/>
               <Setter Property="Stretch" Value="Fill"/>
            </Style>
         </Setter.Value>
      </Setter>
   </Style>
 </ResourceDictionary>
</Window.Resources>
```

## Step 5: Add a gallery of reusable shapes.

The WPF Diagram control provides a gallery of reusable symbols and diagram elements called the [Stencil](https://help.syncfusion.com/wpf/diagram/stencil "Link to Stencil in WPF Diagram documentation"). You can drag the symbols and elements onto the diagram canvas any number of times.

The following code illustrates how to create a stencil using our built-in basic shapes. You can add any of our built-in shapes or custom shapes to the Stencil.

```html
<syncfusion:Stencil x:Name="Stencil" Width="230" Grid.Column="0" Grid.Row="1" Title="Shapes">
    <syncfusion:Stencil.Categories>
        <syncfusion:StencilCategoryCollection>
        <!--Specify the basic shapes category with title and resource key-->
            <syncfusion:StencilCategory Title="Basic Shapes" Keys="{StaticResource BasicShapes}"/>
        </syncfusion:StencilCategoryCollection>
     </syncfusion:Stencil.Categories>
</syncfusion:Stencil>
```

**Note:** Refer to the [Stencil in WPF Diagram documentation](https://help.syncfusion.com/wpf/diagram/stencil "Link to Stencil in WPF Diagram documentation") for how to add custom shapes and shape categories, and how to customize the stencil appearance.

## Step 6: Apply a theme to your application (optional).

The [SfSkinManager](https://help.syncfusion.com/cr/wpf/Syncfusion.SfSkinManager.SfSkinManager.html "Link to the Class SfSkinManager") helps you apply various built-in themes to the Syncfusion and Framework controls. Use those themes to get a rich user-interface experience.

You can add the Syncfusion themes libraries from [NuGet.org](https://www.nuget.org/ "Link to NuGet Gallery"). Here, we are going to apply the [Fluent light theme](https://www.nuget.org/packages/Syncfusion.Themes.FluentLight.WPF/ "Link to the Syncfusion.Themes.FluentLight.WPF NuGet package") to the diagramming app.

Refer to the following code example.

```csharp
using Syncfusion.SfSkinManager;
/// <summary>
/// Interaction logic for MainWindow.xaml.
/// </summary>
public partial class MainWindow : Window
{
  public MainWindow()
  {
     InitializeComponent();
     SfSkinManager.SetTheme(this, new Theme() { ThemeName = "FluentLight" });
  }
}
```

**Note:** Refer to the [Themes in WPF Diagram documentation](https://help.syncfusion.com/wpf/themes/skin-manager "Link to Getting Started with WPF Skin Manager") for more details about our built-in themes and how to add them to your application.

## Step 7: Run your first diagramming application and create diagrams.

Now, run your first diagramming application and create desired diagrams with it.

Refer to the following YouTube video.

https://www.youtube.com/watch?v=AW-SV-BPsHc

## Resources

For more details, download the source project from the [WPF Diagramming Application demo](https://github.com/SyncfusionExamples/WPF-Diagram-Examples/tree/master/Samples/Diagramming%20Application "Link to WPF Diagramming Application demo on GitHub").

## Conclusion

In this blog post, we have seen how to create a feature-rich diagramming application within two minutes using the Syncfusion [WPF Diagram library](https://www.syncfusion.com/wpf-ui-controls/diagram "Link to WPF Diagram control"). With this, you can create an organization chart creator, a flow chart creator, a network diagram, a logic circuit diagram, and more. The WPF Diagram library supports even more rich, interactive features than those demonstrated here, like automatic layouts, and data binding from different data sources. To explore available features in more depth, refer to our [WPF Diagram documentation](https://help.syncfusion.com/wpf/diagram/overview "Link to WPF Diagram (SfDiagram) Overview").

Diagrams speak louder than words. So, illustrate your ideas with the help of our WPF Diagram control and leave your feedback in the comments section of this blog post!

If you’re already a Syncfusion user, you can download the product setup from [our website](https://www.syncfusion.com/account/downloads "Link to license and download page of Essential Studio"). Otherwise, you can download a free, [30-day trial](https://www.syncfusion.com/downloads/wpf/ "Link to the free evaluation of the Syncfusion Essential Studio").

You can also contact us through our [support forums](https://www.syncfusion.com/forums "Link to the Syncfusion support forum"), [Direct-Trac](https://www.syncfusion.com/support/directtrac/incidents "Link to the Syncfusion support system Direct Trac"), or [feedback portal](https://www.syncfusion.com/feedback/wpf "Link to Syncfusion Feedback Portal"). We are always happy to assist you!

## Related Blogs

- [Everything You Need to Know About Syncfusion WPF Diagram Control](https://dev.to/syncfusion/everything-you-need-to-know-about-syncfusion-wpf-diagram-control-57bj "Link to Everything You Need to Know About Syncfusion WPF Diagram Control blog")
- [How to Create an Interactive Flowchart Designer Using Syncfusion WPF Diagram](https://dev.to/sureshmohan/how-to-create-an-interactive-flowchart-creator-using-syncfusion-wpf-diagram-lm0-temp-slug-344378 "Link to How to Create an Interactive Flowchart Designer Using Syncfusion WPF Diagram blog")
- [Build Digital Logic Circuits Easily with Our WPF Diagram Control](https://dev.to/karthickramasamy08/build-digital-logic-circuits-easily-with-our-wpf-diagram-control-59jf-temp-slug-2484682 "Link to Build Digital Logic Circuits Easily with Our WPF Diagram Control blog")
- [Easily Prepare Network Diagrams with Our WPF Diagram Control](https://dev.to/karthickramasamy08/easily-prepare-network-diagrams-with-our-wpf-diagram-control-36ap-temp-slug-1532678 "Link to Easily Prepare Network Diagrams with Our WPF Diagram Control blog")