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.
Descargue la última versión de prueba de MindFusion. Diagramación para WinForms
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 en ella todas las referencias de ensamblaje necesarias para el proyecto. Estos son: pensamiento fusión
mental
diagrama de fusión
pensamiento fusión permiso
para un proyecto común importante compartido por todas las plataformas del proyecto.
Luego, en Android, debe agregar referencias a lo siguiente:
Fusión mental
MindFusion.Common.Android
pensamiento fusión figura
MindFusion.Diagramming.Android
para el proyecto de IOS, es necesario hacer referencia a:
fusión mental
MindFusion.Common.iOS
pensando diagrama de fusión
para iOS MindFusion.Diagramming
para el proyecto UWP, es necesario agregar referencias a la siguiente :
fusión mental fusión de
pensamiento fusión de
pensamiento común diagrama de fusión
pensamiento integración, mapeo, general
y luego, en proyectos públicos página xaml, es necesario agregar una referencia al ensamblaje de gráficos:
<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 a MindFusion. MindFusion.Diagramming espacio de nombres en el ensamblado 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 de diagrama ; Diagrama de diagrama;
MainPage público ()
{
InitializeComponent ();
diagrama = 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 los hay):
private void RandomGraph ()
{
diagrama. Limpiar todo();
....................
}
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: superior, izquierda, ancho y altura. 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 (diagrama);
Diferentes algoritmos tienen diferentes opciones, puede ajustar la disposición de los gráficos. Aplicamos el tipo "Reassign Anchor" al gráfico, lo que significa que el enlace se reasignará a donde el algoritmo crea que es el 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, estructuras jerárquicas, 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ápiz y lápiz, y varios algoritmos de diseño. Obtenga más información sobre los diagramas de Xamarin en https://mindfusion.eu/xamarin-diagram.html.
Si desea comprar la licencia genuina de este producto, haga clic en [Comprar en el centro comercial], y si desea obtener más información sobre el producto, haga clic en [Consultar servicio al cliente en línea].