MindFusion.Diagramming for WinForms is a .NET control that can help you create workflow and process diagrams; database entity relationship diagrams; organization diagrams; object hierarchy and relationship diagrams; diagrams and trees. It is based on the types of objects-chart boxes, tables and arrows, which are classified and assigned to others and combined into a complex structure. This control provides more than 50 pre-defined chart boxes, such as custom design styles and color chart boxes.
Download the latest trial version of MindFusion.Diagramming for WinForms
In this tutorial, we demonstrate how to create a sample graph and arrange it using LayeredLayout. The diagram was generated using the Xamarin Process Gallery. This is a screenshot of the final application on an Android phone:
I. Project settings
We start Visual Studio and type "Xamarin.Forms" in the search box of the project template. In the search results, we select "Mobile Application (Xamarin.Forms)", and then click "Next".
Then, choose a name for the application and press "Create". Choose the platform you want to target: iOS, Android and UWP. Our sample application supports all of these.
After creating the new application, we will create a new folder called References and copy all the assembly references needed for the project in it. These are:
mind meld
thinking fusion diagram
thinking fusion permission
for major common project shared by all project platforms.
Then, in Android, you need to add references to the following:
Mind Fusion
MindFusion.Common.Android
Mind Fusion Diagram
MindFusion.Diagramming.Android
For iOS projects, you need to refer to:
Mind Fusion
MindFusion.Common.iOS
Mind Fusion Diagram
iOS version MindFusion.Diagramming
For UWP projects, you need to add a reference to the following content :
mind meld
thinking fusion of common
thinking fusion diagram
thinking integration, mapping, general
and then, in public projects xaml page, you need to add a reference to the assembly of graphics:
<ContentPage xmlns = " http://xamarin.com/schemas/ 2014/forms "
xmlns:x=" http://schemas.microsoft.com/winfx/2009/xaml "
xmlns:d=" http://xamarin.com/schemas/2014/forms/design "
xmlns:mc= " http://schemas.openxmlformats.org/markup-compatibility/2006 "
xmlns:diag="clr-namespace:MindFusion.Diagramming;assembly=MindFusion.Diagramming"
mc:Ignorable="d"
x:Class="LayeredLayout.MainPage"></ContentPage>
We will add the mapping xmlns:diag to MindFusion. MindFusion.Diagramming namespace in the Diagramming assembly. Then, we need to declare an instance of the DiagramView class, and then operate in XAML:
diag: DiagramView x: Name = "diagramView"
HorizontalOptions = "FillAndExpand"
VerticalOptions =" FillAndExpand">
2. Diagram initialization
In the code-behind file of MainPage in the public project, we declare a class variable Diagram. We assign it to the diagram related to DiagramView
Diagram diagram ; Diagram diagram;
public MainPage()
{
InitializeComponent();
diagram = diagramView.Diagram;
...........................
.. .........................
......................... ..
}
We will create a chart when the button is clicked, so add the button control to the XAML code:
<StackLayout
Orientation="Horizontal"
HorizontalOptions="Center"
Spacing="5" Padding="5">
<Button
Text ="Random"
BorderColor="Black"
BackgroundColor="Silver"
Clicked="OnRandomClick"
/>
We will handle the Click event of the button to generate graphics. We do this through a method called RandomGraph. First, clear all items in the diagram (if any):
private void RandomGraph()
{
diagram.
}
We use the CreateShapeNode method of the Factory class to generate nodes, which can be accessed through the properties of the chart.
ShapeNode node = diagram.Factory.CreateShapeNode(0, 0, 40, 40);
node.AnchorPattern = AnchorPattern.TopInBottomOut; The
node constructor takes the position and size of the node and its four values as parameters: top, left, width and height. We don't care about the position, because we will automatically arrange the nodes using a layout algorithm.
The AnchorPattern attribute is important and determines the point where the link can dock to the node. We use one of the values of the AnchorPattern enumeration. The member TopInBottomOut indicates that incoming links will enter through the top of the node, and outgoing links will start at the bottom.
Finally, we create random links between nodes. We use the Factory class again, this time with the CreateDiagramLink method. We select a random node and provide it as a parameter of the method:
private void RandomGraph()
{
diagram.ClearAll();
for (int i = 0; i < 30; ++i)
{
int c = diagram.Nodes.Count;
int g = 2 + random.Next(15);
for (int j = 0; j < g; ++j)
{
ShapeNode node = diagram.Factory.CreateShapeNode(0, 0, 40, 40);
node.AnchorPattern = AnchorPattern.TopInBottomOut;
if (j > 0)
diagram.Factory.CreateDiagramLink(diagram.Nodes[diagram.Nodes.Count - 2], node);
}
if (i > 0)
{
for (int j = 0; j < 1 + random.Next(3); ++j)
diagram.Factory.CreateDiagramLink(
diagram.Nodes[random.Next(c)],
diagram.Nodes[c + random.Next(g)]);
}
}}
Three. Arrangement
We choose LayeredLayout of automatic layout. Like all other algorithms, it is a member of the Layout namespace and is applied by one method: the ranging method is a member of the Diagram class. Call it with the layout instance you want to apply:
layout.Arrange(diagram);
Different algorithms have different options, you can fine-tune the arrangement of the graphics. We apply the "Reassign Anchor" type to the graph, which means that the link will be reassigned to where the algorithm thinks is the most appropriate. The NodeDistance and LayerDistance features allow us to control the distance between the node and the layer of the graph. Many algorithms use them.
We will apply two other layout-specific attributes: EnforceLinkFlow and StraightenLongLinks. As the name suggests, they try to make the links follow one direction and straighten those cross-layer links.
At this point, our tutorial is over.
Xamarin Charts: The chart component provides a complete set of functions for all Xamarin applications to create, edit and customize flowcharts, charts, graphs, hierarchies, schemes, etc. The control’s API is intuitive and easy to use, with many properties that allow you to control all aspects of the chart’s appearance and behavior. You have a rich set of predefined nodes and links to choose from, as well as table nodes, compound nodes, different pen and pen types, and various layout algorithms. Learn more about Xamarin diagrams at https://mindfusion.eu/xamarin-diagram.html.
If you want to buy the genuine license of this product, please click [Buy in the mall], and if you want to know more product information, please click [Consult online customer service]