MindFusion.Diagramming para WinForms es un control .NET que puede ayudarlo a crear flujos de trabajo y diagramas de proceso; diagramas de relación de entidades de base de datos; diagramas de organización; jerarquía de objetos y diagramas de relaciones; diagramas y árboles. Se basa en los tipos de objetos: cuadros de gráficos, tablas y flechas, que se clasifican y asignan a otros y se combinan en una estructura compleja. Este control proporciona más de 50 cuadros de gráficos predefinidos, como estilos de diseño personalizados y cuadros de gráficos de colores.
Haga clic para descargar la última versión de prueba de MindFusion.
En este tutorial, demostramos cómo crear un gráfico de muestra y organizarlo usando LayeredLayout. El diagrama se generó utilizando la Galería de procesos de Xamarin. Esta es una captura de pantalla de la aplicación final en un teléfono Android:
I. Configuración del proyecto
Iniciamos Visual Studio y escribimos "Xamarin.Forms" en el cuadro de búsqueda de la plantilla del proyecto. En los resultados de búsqueda, seleccionamos "Aplicación móvil (Xamarin.Forms)", y luego hacemos clic en "Siguiente".
Luego, elija un nombre para la aplicación y presione "Crear". Elija la plataforma a la que desea dirigirse: iOS, Android y UWP. Nuestra aplicación de muestra es compatible con todos estos.
Después de crear la nueva aplicación, crearemos una nueva carpeta llamada Referencias y copiaremos todas las referencias de ensamblaje necesarias para el proyecto en ella. Estos son:
fusión de mentes,
diagrama de fusión de mentes,
licencia de fusión de mentes.
Para los principales proyectos comunes, es compartido por todos los proyectos de la plataforma.
Luego, en Android, debe agregar referencias a lo siguiente:
Mind Fusion
MindFusion.Common.Android
Mind Fusion Diagram
MindFusion.Diagramming.Android
Para proyectos de iOS, debe consultar:
Mind Fusion
MindFusion.Common.iOS
Diagrama de Mind Fusion
Versión de iOS MindFusion.Diagramming
Para proyectos de UWP, debe agregar una referencia al siguiente contenido:
Fusión mental,
fusión
mental, diagrama de fusión mental general ,
fusión mental, dibujo, general
Luego, en la página xaml del proyecto público, debe agregar una referencia al ensamblaje gráfico:
<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>
Agregaremos el mapeo xmlns: diag al espacio de nombres MindFusion.Diagramming en el ensamblado MindFusion.Diagramming. Luego, necesitamos declarar una instancia de la clase DiagramView y luego operar en XAML:
> diag：DiagramView x：Name =“ diagramView”
HorizontalOptions =“ FillAndExpand”
VerticalOptions =“ FillAndExpand”>
2. Inicialización del diagrama
En el archivo de código subyacente de MainPage en el proyecto público, declaramos una variable de clase Diagram. Lo asignamos al diagrama relacionado con DiagramView
Diagrama gráfico;
Diagram diagram;
public MainPage()
{
InitializeComponent();
diagram = diagramView.Diagram;
...........................
...........................
...........................
}
Crearemos un gráfico cuando se haga clic en el botón, así que agregue el control del botón al código XAML:
<StackLayout
Orientation="Horizontal"
HorizontalOptions="Center"
Spacing="5" Padding="5">
<Button
Text="Random"
BorderColor="Black"
BackgroundColor="Silver"
Clicked="OnRandomClick"
/>
Manejaremos el evento Click del botón para generar gráficos. Hacemos esto a través de un método llamado RandomGraph. Primero, borre todos los elementos del diagrama (si corresponde):
private void RandomGraph()
{
diagram.ClearAll();
....................
}
Usamos el método CreateShapeNode de la clase Factory para generar nodos, a los que se puede acceder a través de las propiedades del gráfico.
ShapeNode node = diagram.Factory.CreateShapeNode (0, 0, 40, 40);
node.AnchorPattern = AnchorPattern.TopInBottomOut; El
constructor del nodo toma la posición y el tamaño del nodo y sus cuatro valores como parámetros: arriba, izquierda, ancho y alto. No nos importa la posición, porque organizaremos automáticamente los nodos utilizando un algoritmo de diseño.
El atributo AnchorPattern es importante y determina el punto donde el enlace puede acoplarse al nodo. Usamos uno de los valores de la enumeración AnchorPattern. El miembro TopInBottomOut indica que los enlaces entrantes entrarán por la parte superior del nodo y los enlaces salientes comenzarán en la parte inferior.
Finalmente, creamos enlaces aleatorios entre nodos. Usamos la clase Factory nuevamente, esta vez con el método CreateDiagramLink. Seleccionamos un nodo aleatorio y lo proporcionamos como parámetro del método:
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)]);
}
}
}
Tres. Arreglo
Elegimos LayeredLayout de diseño automático. Como todos los demás algoritmos, es un miembro del espacio de nombres Layout y se aplica mediante un método: el método de rango es un miembro de la clase Diagram. Llámelo con la instancia de diseño que desea aplicar:
layout.Arrange（diagram）;
Los diferentes algoritmos tienen diferentes opciones y pueden ajustar los gráficos organizados. Aplicamos el tipo "Reassign Anchor" al gráfico, lo que significa que el enlace se reasignará a donde el algoritmo crea que es más apropiado. Las características NodeDistance y LayerDistance nos permiten controlar la distancia entre el nodo y la capa del gráfico. Muchos algoritmos los usan.
Aplicaremos otros dos atributos específicos del diseño: EnforceLinkFlow y StraightenLongLinks. Como sugiere el nombre, intentan hacer que los enlaces sigan una dirección y enderezar esos enlaces entre capas.
En este punto, nuestro tutorial ha terminado.
Gráficos de Xamarin: el componente de gráfico proporciona un conjunto completo de funciones para todas las aplicaciones de Xamarin para crear, editar y personalizar diagramas de flujo, cuadros, gráficos, jerarquías, esquemas, etc. La API del control es intuitiva y fácil de usar, con muchas propiedades que le permiten controlar todos los aspectos de la apariencia y el comportamiento del gráfico. Tiene un amplio conjunto de nodos y enlaces predefinidos para elegir, así como nodos de tabla, nodos compuestos, diferentes tipos de lápices y lápices, y varios algoritmos de diseño. Obtenga más información sobre los diagramas de Xamarin en https://mindfusion.eu/xamarin-diagram.html.