The UWP Diagram control allows users to quickly create and edit flowcharts, organizational charts, UML diagrams, swim lane charts, mind maps, floor plans, and more within their applications.
The UWP Diagram control provides all the standard flowchart shapes as ready-made objects to build flowcharts, making it is easy to add them to a diagram surface in a single call.
Built-in automatic layout algorithm specifically made for organizational charts to arrange the parent and child node positions automatically.
Quickly load large diagrams using UI-virtualization techniques, which selectively loads only the objects that lie within the viewport area. Smooth scrolling performance is achieved using a built-in spatial search algorithm that builds an index based on the element position.
Visualize any graphical object using nodes, which can also be arranged and manipulated on a diagram page.
Use 40+ standard built-in shapes or your own custom shapes.
You can use text, image, controls, panels, or any UIElement or template to visualize a node. It can also be bound to any of your business objects.
A connector is used to represent a relationship between two nodes. Some of the key features are listed below.
There are Straight, Orthogonal, Curved types of connectors. You can choose any of these based on the type of diagram or relationship between the connected notes.
Use arrowheads (decorator) to indicate the flow direction in a flowchart or state diagram. You can also build your own custom arrowheads, based on the type of diagram.
Orthogonal connectors take shortest and smart path that avoids overlapping with any neighboring nodes.
Bridging (line jumps) clearly indicates connector’s route and makes it easier to read where connectors overlap with each other in a dense diagram.
Customize the look and feel of a connector the way you want. They have a rich set of properties through which you can customize their color, thickness, dash dots, rounded corners, and decorators.
Connect to desired places of a node through different types of ports or connecting points available.
Build logic gates or a circuit diagram with dedicated pins and restrict in or out connections using node ports.
Use connector ports to indicate message flows between objects or lifelines in a sequence diagram.
Make parallel connections to a block diagram by connecting anywhere on the side of a block. They are automatically created or destroyed.
Control dynamic connections to specific sides or in a specific direction using dock ports.
Show additional information by adding text or labels on nodes and connectors.
You can add and edit text at runtime. You can also mark it read-only if it should not be edited.
Add any number of annotations and align them individually.
The UWP Diagram has sophisticated alignment options where annotations can be placed:
Use interactive features to improve the editing experience of a diagram at runtime. Furthermore, you can easily edit a diagram with mouse, touchscreen, or keyboard interfaces.
Select one or more nodes, connectors, or annotations and edit them using thumbs or handlers.
You can resize a node in in eight different directions. If you want a square to be always be square after resizing, you can lock the aspect ratio. You can resize multiple objects at the same time.
You can rotate a selected node 360 degrees.
Precisely align nodes, connectors, and annotations while dragging, just by snapping to the nearest gridlines or objects.
Don’t worry when your edit ends up being a mistake. Undo and redo commands help you easily correct recent changes.
Cut, copy, paste, or duplicate selected objects within and across diagrams.
When multiple objects overlap, Z-order controls which object needs to be on top or at the bottom.
You can combine multiple nodes together and interact with them as a single object called a group. Groups can also contain another group.
Frequently used commands like delete, connect, and duplicate can be shown as buttons near selectors. That way, you can quickly do those operations, instead of finding buttons in a toolbox.
Our UWP Diagram control has predefined alignment commands that enable you to align the selected objects nodes and connectors with respect to the selection boundary.
Spacing commands enable you to place selected objects on the diagram at equal intervals from each other.
Use sizing commands to equally size selected nodes with respect to the first selected object.
All the nodes or connectors in the selection list can be aligned at the left, right, or center horizontally, or aligned at the top, bottom, or middle vertically with respect to the selection boundary.
UWP Diagram control provides an automatic layout algorithm, which is used to arrange nodes automatically based on a predefined layout logic. There is built-in support for an organization chart layout, hierarchical tree layout, and radial tree layout.
Draw nodes and link them interactively, just by click and drag on diagram surface.
The stencil control is a gallery of reusable symbols and nodes. Drag and drop these symbols onto the surface of the diagram any number of times.
When a diagram is large, see it closer or wider by zooming in and out of the diagram. Also, you can navigate from one region to another by panning through the diagram.
Improve the navigation experience when exploring large diagrams using the overview control. It displays a small preview of the full diagram page. It also allows users to perform operations such as zooming and panning within it.
Measure the distance of nodes and connectors from the origin of the page using rulers. In addition, specify the size and position of objects in different units like pixels, inches, and centimeters.
UWP Diagram control allows you to populate diagrams with nodes and connectors based on data from data sources. Data in any format can be easily converted, mapped, and consumed in the diagram by setting a few properties, without having to write any code. It also supports loading data from an ObservableCollection, List, or IEnumerable collections.
There are several other features available to enhance the diagramming experience.
UWP Diagram control supports printing with a print preview option. You can also customize the page size, orientation, page margins, and fit to a single page.
Share your diagrams with others by easily exporting as .png, .jpeg and .bmp file formats.
UWP Diagram control is MVVM-friendly and seamlessly works with popular MVVM frameworks like Prism, MVVM light.
You can save your diagram state as an XML file and load it back for editing again.
Localize every static text in the control to any supported language.
UWP Diagram control provides a page-like appearance to a drawing surface using page size, orientation, and margins.
Documentation
Greatness—it’s one thing to say you have it, but it means more when others recognize it. Syncfusion® is proud to hold the following industry awards.
