Create a Feature-Rich WPF Diagramming App in 2 Minutes

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 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
• Syncfusion WPF Framework V19.2
• Configure toolbox with Syncfusion WPF controls

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.

<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.

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

Note: For more details, refer to the 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.

<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.

<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. 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.

<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 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 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. Here, we are going to apply the Fluent light theme to the diagramming app.

Refer to the following code example.

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 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.

Resources

For more details, download the source project from the WPF Diagramming Application demo.

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. 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.

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. Otherwise, you can download a free, 30-day trial.

You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

Related Blogs

• Everything You Need to Know About Syncfusion WPF Diagram Control
• How to Create an Interactive Flowchart Designer Using Syncfusion WPF Diagram
• Build Digital Logic Circuits Easily with Our WPF Diagram Control
• Easily Prepare Network Diagrams with Our WPF Diagram Control