Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (150).NET Core  (25)Angular  (48)ASP.NET  (48)ASP.NET Core  (64)ASP.NET MVC  (86)Azure  (28)Blazor  (91)DocIO  (20)Essential JS 2  (69)Essential Studio  (162)File Formats  (18)Flutter  (102)JavaScript  (148)Microsoft  (101)PDF  (59)React  (33)Succinctly series  (122)Syncfusion  (472)TypeScript  (30)Uno Platform  (3)UWP  (4)Vue  (26)Webinar  (24)Windows Forms  (55)WinUI  (16)WPF  (119)Xamarin  (127)XlsIO  (24)Other CategoriesBarcode  (4)BI  (29)Bold BI  (3)Build conference  (6)Business intelligence  (53)Button  (4)C#  (107)Chart  (50)Cloud  (9)Company  (445)Dashboard  (6)Data Science  (3)Data Validation  (5)DataGrid  (45)Development  (252)Doc  (7)DockingManager  (1)eBook  (93)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (20)Extensions  (13)File Manager  (4)Gantt  (9)Gauge  (6)Git  (4)Grid  (27)HTML  (9)Installer  (2)Knockout  (2)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (214)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (22)Performance  (6)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (5)Road Map  (9)Scheduler  (26)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (18)Solution Services  (2)Spreadsheet  (9)SQL  (7)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (10)Tips and Tricks  (57)UI  (117)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (1)Visual Studio  (19)Visual Studio Code  (10)Web  (205)What's new  (125)Windows 8  (19)Windows App  (1)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
Create a Feature-Rich WPF Diagramming App in 2 Minutes

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

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 forumsDirect-Trac, or feedback portal. We are always happy to assist you!

Related Blogs

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin

Comments (2)

The Diagram product has many capabilities not illustrated in the apps that are published here. The app that shows these capabilities the best is one I found only by a search on Google: an entity-relationship diagramming app that was “somehwhere” on the syncfusion site.

What makes that app special: the user can “add” information to the “entity” (fields, etc.). There are many uses for this type of capability in business apps. The variety of relationships that can be created also is useful: ideas can loop back on themselves, etc.

Updating that App would highlight these advanced capabilities that might give users ideas beyond the current selection of Diagram apps.

Hi Henry,

Thanks for your valuable feedback.
Yes, using our diagram control, the user can achieve more diagram types and functionalities. Here, in this app, we have focused on how to create a simple diagram builder app.
We have future plan to publish more diagramming apps with features specific to a particular diagram type. Kindly follow us to get more diagramming related updates.

Regards,
Sarath

Comments are closed.

Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top