How to create a diagram in UWP
Syncfusion Essential Diagram is a UI-control used to visualize, create, and edit the interactive diagrams. It supports creating flowcharts, organizational charts, mind maps, and floor plan using code or a visual interface.
Steps to create a diagram in UWP.
- Create a new UWP application project.
- Install the Syncfusion.SfDiagram.UWP NuGet package as a reference to your WPF application from NuGet.org.
- Include the following namespaces in the MainPage.xaml file.
xmlns:diagram="using:Syncfusion.UI.Xaml.Diagram"
- Create a diagram instance and initialize its basic properties (nodes and connectors) in XAML.
<!--Create SfDiagram Instance--> <diagram:SfDiagram> <!--Initialize Nodes - Node is an entity to visualize the data--> <diagram:SfDiagram.Nodes> <diagram:NodeCollection></diagram:NodeCollection> </diagram:SfDiagram.Nodes> <!--Initialize Connectors - Connector is an entity to visualize the relationship--> <diagram:SfDiagram.Connectors> <diagram:ConnectorCollection></diagram:ConnectorCollection> </diagram:SfDiagram.Connectors> </diagram:SfDiagram>
- Create ShapeStyle for NodeViewModel.
<Page.Resources> <!--Style to customize Shape and it is based on Path--> <Style TargetType="Path" x:Key="NodeStyle"> <Setter Property="Fill" Value="CornflowerBlue"></Setter> <Setter Property="Stroke" Value="LightGray"></Setter> <Setter Property="Stretch" Value="Fill"></Setter> </Style> </Page.Resources>
- Create the NodeViewModel with position, size, shape, and shape style in XAML.
<diagram:SfDiagram.Nodes>
<diagram:NodeCollection>
<!--OffsetX and OffsetY - helps to position the Node in Diagram-->
<!--NodeViewModel is business class and DataContext of Node(Control or View)-->
<diagram:NodeViewModel ID="node1" OffsetX="200" OffsetY="200"
UnitHeight="50" UnitWidth="75" ShapeStyle="{StaticResource NodeStyle}">
<!--Any Geomtry can be assigned for Shape-->
<diagram:NodeViewModel.Shape>
<RectangleGeometry Rect="10,10,10,10"/>
</diagram:NodeViewModel.Shape>
</diagram:NodeViewModel>
<diagram:NodeViewModel ID="node2" OffsetX="350" OffsetY="300"
UnitHeight="50" UnitWidth="75" ShapeStyle="{StaticResource NodeStyle}">
<!--Any Geomtry can be assigned for Shape-->
<diagram:NodeViewModel.Shape>
<RectangleGeometry Rect="10,10,10,10"/> </diagram:NodeViewModel.Shape>
</diagram:NodeViewModel>
</diagram:NodeCollection>
</diagram:SfDiagram.Nodes>
- Create the ConnectorViewModel with relationship of created NodeViewModels.
<diagram:ConnectorCollection> <!--ConnectorViewModel is business class and DataContext of Connector(Control or View)--> <diagram:ConnectorViewModel SourceNodeID="node1" TargetNodeID="node2"/> </diagram:ConnectorCollection>
A complete working sample can be downloaded from Create-Diagram. By executing the program, you will get the diagram as follows.
Take a moment to peruse the documentation, where you can find the basic diagram features like Built-in Shapes for the node, Annotation for node and connector, Port for making point to point connection, and Stencil for drag and drop reusable objects with code examples.
