Syncfusion Feedback

Trusted by the world’s leading companies

Syncfusion Trusted Companies

Descripción general

El control de WPF Diagram permite a los usuarios crear y editar rápidamente Diagrams de flujo, organigramas, Diagrams UML, Diagrams de carriles, mapas mentales, planos de planta y más dentro de sus aplicaciones.


Diagram de flujo

El control de WPF Diagram proporciona todas las formas estándar de Diagram de flujo como objetos listos para usar para construir Diagrams de flujo, lo que facilita su adición a una superficie de Diagram con una sola llamada. Se ha creado un algoritmo de diseño automático incorporado específicamente para Diagrams de flujo para organizar cada forma de Diagram de flujo automáticamente sin especificar las coordenadas.

Diagram de flujo de WPF


Organigrama

Algoritmo de diseño automático incorporado específicamente diseñado para organigramas para organizar automáticamente las posiciones de los nodos padre e hijo.

Organigrama de WPF


Mapa mental

Cree Diagrams de mapas mentales con un algoritmo de diseño automático incorporado para definir un nodo central que represente una idea o un concepto y otros nodos que se colocarán a su alrededor.

Árbol de mapas mentales de WPF


Cinta de opciones del Diagram

  • El control de cinta de opciones del Diagram contiene elementos de interfaz de usuario que permiten a los usuarios finales cargar y guardar Diagrams, agregar elementos de Diagram al lienzo, formatear texto dentro de los elementos del Diagram, reorganizar y cambiar el color de las formas, cambiar el tamaño y la orientación del lienzo y realizar operaciones de portapapeles.
  • La cinta de opciones se puede personalizar fácilmente para agregar nuevos elementos/pestañas de cinta y eliminar los elementos/pestañas de cinta existentes.

Cinta de opciones del WPF Diagram


Alto rendimiento

Cargue rápidamente Diagrams grandes utilizando técnicas de virtualización de la interfaz de usuario, que carga selectivamente los objetos que se encuentran dentro del área de la ventana gráfica. El rendimiento de desplazamiento suave se logra utilizando un algoritmo de búsqueda espacial incorporado que crea un índice basado en la posición del elemento.

Control de Diagram de alto rendimiento de WPF


Nodos

Visualice cualquier objeto gráfico utilizando nodos que también pueden organizarse y manipularse en una página de Diagram.

Formas incorporadas del WPF Diagram para nodos

Formas

Utilice más de 445 formas estándar incorporadas o sus propias formas personalizadas.

Plantilla de nodo del WPF Diagram

Plantilla

Puede utilizar texto, imágenes, controles, paneles o cualquier UIElement o plantilla para visualizar un nodo. También se puede vincular a cualquiera de sus objetos de negocio.


Conector

Un conector se utiliza para representar una relación entre dos nodos. Algunas de las características clave se enumeran a continuación.

WPF Diagram con diferentes tipos de conectores

Tipos

Los tipos de conectores son rectos, ortogonales y curvos. Elija cualquiera de ellos según el tipo de Diagram o la relación entre las notas conectadas.

Flechas del WPF Diagram

Flechas

Utilice flechas (decorador) para indicar la dirección del flujo en un Diagram de flujo o Diagram de estado. También construya flechas personalizadas según el tipo de Diagram.

El WPF Diagram restringe la superposición de segmentos mediante enrutamiento

Enrutamiento

Los conectores ortogonales toman el camino más corto e inteligente para evitar superponer los nodos vecinos.

Puenteo del WPF Diagram

Puenteo (saltos de línea)

El puenteo (saltos de línea) indica claramente la ruta del conector y facilita la lectura donde los conectores se superponen en un Diagram denso.

Apariencia personalizada del WPF Diagram

Apariencia

Personalice el aspecto de un conector. Hay disponible un amplio conjunto de propiedades para personalizar el color, el grosor, los puntos discontinuos, las esquinas redondeadas y los adornos.


Puerto (punto de conexión)

Conéctese a la ubicación deseada de un nodo utilizando diferentes tipos de puertos o puntos de conexión disponibles.

Puertos de nodo del WPF Diagram

Puerto de nodo

Construya puertas lógicas o un Diagram de circuito con pines dedicados y restrinja las conexiones de entrada o salida utilizando puertos de nodo.

Puertos de conector del WPF Diagram.

Puerto de conector

Utilice los puertos del conector para indicar el flujo de mensajes entre objetos o líneas de vida en un Diagram de secuencia.

Puerto dinámico del WPF Diagram

Puerto dinámico

Realice conexiones paralelas a un Diagram de bloques conectándose en cualquier parte del lado de un bloque. Se crean o destruyen automáticamente.

Puerto de acoplamiento del WPF Diagram

Puerto de acoplamiento

Controle las conexiones dinámicas a lados específicos o en una dirección específica utilizando puertos de acoplamiento.


Anotación

Muestre información adicional agregando texto o etiquetas en nodos y conectores.

Edición de Diagrams de WPF

Editar

Agregue y edite texto en tiempo de ejecución. Además, márquelo como de solo lectura si no debe editarse.

Múltiples anotaciones del WPF Diagram

Anotación múltiple

Agregue cualquier número de anotaciones y alinéelas individualmente.

Alineación de anotaciones del WPF Diagram

Alineación

El WPF Diagram tiene opciones de alineación sofisticadas donde se pueden colocar las anotaciones:

  • Dentro o fuera de un nodo.
  • En el extremo de origen o de destino de un conector.
  • Automáticamente cuando el nodo o conector se mueve.

Funciones interactivas

Utilice las funciones interactivas para mejorar la experiencia de edición de un Diagram en tiempo de ejecución. Además, edite fácilmente un Diagram con interfaces de mouse, pantalla táctil o teclado.

Seleccionar y arrastrar los nodos del WPF Diagram

Seleccionar y arrastrar

Seleccione uno o más nodos, conectores o anotaciones y edítelos utilizando los pulgares o controladores.

Redimensionamiento de Diagrams de WPF

Redimensionar

Redimensione un nodo en ocho direcciones diferentes. Bloquee la relación de aspecto para mantener la forma después de redimensionar. Redimensione varios objetos al mismo tiempo.

Rotación de nodos del WPF Diagram

Rotar

Gire un nodo seleccionado 360 grados.

Función de ajuste del WPF Diagram.

Ajuste

Alinee nodos, conectores y anotaciones al arrastrar con precisión, simplemente ajustándose a las líneas de cuadrícula u objetos más cercanos.

Función Deshacer y Rehacer del WPF Diagram

Deshacer Rehacer

Los comandos de deshacer y rehacer ayudan a revertir acciones.

Portapapeles del WPF Diagram

Portapapeles

Corte, copie, pegue o duplique objetos seleccionados dentro y entre Diagrams.

Comandos de orden Z del WPF Diagram

Orden Z

Cuando varios objetos se superponen, el orden Z controla qué objeto debe estar en la parte superior o inferior.

Agrupación de Diagrams de WPF

Agrupación

Combine varios nodos y interactúe con ellos como un solo objeto llamado grupo. Los nodos pueden pertenecer a más de un grupo.

Comandos rápidos del WPF Diagram

Comando rápido

Los comandos de uso frecuente como eliminar, conectar y duplicar se pueden mostrar como botones cerca de los selectores. Esto ayuda a realizar operaciones rápidas, en lugar de buscar botones en un cuadro de herramientas.


Alineación

El control de WPF Diagram tiene comandos de alineación predefinidos para alinear los nodos y conectores de los objetos seleccionados con el límite de selección.

Comandos de espaciado del WPF Diagram

Comandos de espaciado

Coloque los objetos seleccionados en un Diagram a intervalos iguales.

Comandos de tamaño del WPF Diagram

Comandos de tamaño

Utilice los comandos de tamaño para ajustar el tamaño de los nodos de la aplicación para satisfacer sus requisitos de rendimiento.

Comandos de alineación del WPF Diagram

Comandos de alineación

Alinee los nodos o conectores de la lista de selección a la izquierda, derecha o centro horizontalmente, o en la parte superior, inferior o medio verticalmente con el límite de selección.


Algoritmo de diseño automático

El control de WPF Diagram proporciona un algoritmo de diseño automático, que se utiliza para organizar nodos automáticamente según una lógica de diseño predefinida. Hay soporte integrado para el diseño de organigramas, el diseño de árboles jerárquicos, el diseño de Diagrams de flujo, el diseño de mapas mentales y el diseño de árboles radiales.


Herramienta de dibujo

Dibuje nodos y conéctelos interactivamente, simplemente haciendo clic y arrastrando sobre la superficie de un Diagram.

Herramienta de dibujo de Diagrams de WPF


Plantilla

El control de plantilla es una galería de símbolos y nodos reutilizables. Arrastre y suelte estos símbolos en la superficie de un Diagram tantas veces como desee.

Plantilla de WPF Diagram


Zoom, panorámica, ajustado a la página

Cuando un Diagram es grande, véalo más cerca o más lejos haciendo zoom y alejando el Diagram. Además, navegue de una región a otra desplazándose por el Diagram.

Zoom, panorámica y ajuste a la página del WPF Diagram


Control de resumen

Mejore la experiencia de navegación al explorar Diagrams grandes utilizando el control de resumen. Muestra una pequeña vista previa de la página completa del Diagram. También permite a los usuarios realizar operaciones como zoom y panorámica dentro de él.

Control de descripción general del WPF Diagram


Reglas y unidades de medida

Mida la distancia de nodos y conectores desde el origen de la página utilizando reglas. Además, especifique el tamaño y la posición de los objetos en diferentes unidades como píxeles, pulgadas y centímetros.

Reglas y unidades de medida del WPF Diagram


Fuente de datos

Rellene Diagrams con nodos y conectores basados en datos de fuentes de datos. Los datos en cualquier formato se pueden convertir, mapear y consumir fácilmente en el Diagram estableciendo unas pocas propiedades, sin tener que escribir ningún código.

Fuente de datos del WPF Diagram


Misceláneo

Hay varias otras características disponibles para mejorar la experiencia de Diagramción.

Impresión de Diagrams de WPF

Impresión

El control de WPF Diagram admite la impresión con una opción de vista previa de impresión. Personalice el tamaño de la página, la orientación, los márgenes de la página y ajústelo a una sola página.

Exportación de Diagrams de WPF

Exportación

Comparta sus Diagrams con otros exportándolos fácilmente en formatos de archivo .xps, .png, .jpeg y .bmp.

Control de Diagram compatible con MVVM de WPF

Compatible con MVVM

El control de WPF Diagram es compatible con MVVM y funciona perfectamente con frameworks MVVM populares como Prism y MVVM light.

Serialización de Diagrams de WPF

Serialización

Puede guardar el estado de su Diagram como un archivo XML y volver a cargarlo para editarlo.

Localización del WPF Diagram

Localización

Localice cada texto estático en el control a cualquier idioma compatible.

Menú contextual del WPF Diagram

Menú contextual

Asigne comandos de uso frecuente al menú contextual.

Líneas de cuadrícula del WPF Diagram

Líneas de cuadrícula

Las líneas de cuadrícula proporcionan orientación al intentar alinear objetos.

Diseño de página del WPF Diagram

Diseño de página

El control de WPF Diagram proporciona una apariencia similar a la de una página a una superficie de dibujo utilizando el tamaño de la página, la orientación y los márgenes.


Ejemplo de código de WPF Diagram

Comience fácilmente con el WPF Diagram utilizando unas pocas líneas de código XAML o C# como se demuestra a continuación. Explore también nuestro Ejemplo de WPF Diagram que le muestra cómo renderizar y configurar el Diagram en WPF.

<Window.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="/Syncfusion.SfDiagram.Wpf;component/Resources/BasicShapes.xaml"/>
        </ResourceDictionary.MergedDictionaries>
        <DataTemplate x:Key="NodeContentTemplate">
            <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding}"/>
        </DataTemplate>
    </ResourceDictionary>
</Window.Resources>
<Grid>
    <!--Initializing the SfDiagram control-->
    <syncfusion:SfDiagram x:Name="diagram">
        <syncfusion:SfDiagram.Theme>
            <syncfusion:OfficeTheme/>
        </syncfusion:SfDiagram.Theme>
        <!--Initializing the Nodes collection-->
        <syncfusion:SfDiagram.Nodes>
            <syncfusion:NodeCollection>
                <syncfusion:NodeViewModel ID="Start" OffsetX="300" OffsetY="100" UnitWidth="100" UnitHeight="40"
                                          Shape="{StaticResource Terminator}"
                                          Content="Start" ContentTemplate="{StaticResource NodeContentTemplate}"/>
                <syncfusion:NodeViewModel ID="Input" OffsetX="300" OffsetY="180" UnitWidth="100" UnitHeight="40"
                                          Shape="{StaticResource Process}"
                                          Content="Get Input" ContentTemplate="{StaticResource NodeContentTemplate}"/>
                <syncfusion:NodeViewModel ID="Decision" OffsetX="300" OffsetY="280" UnitWidth="100" UnitHeight="80"
                                          Shape="{StaticResource Decision}"
                                          Content="Make Decision" ContentTemplate="{StaticResource NodeContentTemplate}">
                    <syncfusion:NodeViewModel.Ports>
                        <syncfusion:PortCollection>
                            <syncfusion:NodePortViewModel ID="Decision_YesPort" NodeOffsetX="0" NodeOffsetY="0.5" />
                            <syncfusion:NodePortViewModel ID="Decision_NoPort" NodeOffsetX="1" NodeOffsetY="0.5" />
                        </syncfusion:PortCollection>
                    </syncfusion:NodeViewModel.Ports>
                </syncfusion:NodeViewModel>
                <syncfusion:NodeViewModel ID="Output1" OffsetX="210" OffsetY="360" UnitWidth="100" UnitHeight="40"
                                          Shape="{StaticResource Process}"
                                          Content="Output 1" ContentTemplate="{StaticResource NodeContentTemplate}"/>
                <syncfusion:NodeViewModel ID="Output2" OffsetX="390" OffsetY="360" UnitWidth="100" UnitHeight="40"
                                          Shape="{StaticResource Process}"
                                          Content="Output 2" ContentTemplate="{StaticResource NodeContentTemplate}"/>
                <syncfusion:NodeViewModel ID="End" OffsetX="300" OffsetY="440" UnitWidth="100" UnitHeight="40"
                                          Shape="{StaticResource Terminator}"
                                          Content="End" ContentTemplate="{StaticResource NodeContentTemplate}"/>
            </syncfusion:NodeCollection>
        </syncfusion:SfDiagram.Nodes>
        <!--Initializing the Connectors collection-->
        <syncfusion:SfDiagram.Connectors>
            <syncfusion:ConnectorCollection>
                <syncfusion:ConnectorViewModel SourceNodeID="Start" TargetNodeID="Input"/>
                <syncfusion:ConnectorViewModel SourceNodeID="Input" TargetNodeID="Decision"/>
                <syncfusion:ConnectorViewModel SourceNodeID="Decision" TargetNodeID="Output1" SourcePortID="Decision_YesPort">
                    <syncfusion:ConnectorViewModel.Annotations>
                        <syncfusion:AnnotationCollection>
                            <syncfusion:AnnotationEditorViewModel Content="Yes" RotationReference="Page"/>
                        </syncfusion:AnnotationCollection>
                    </syncfusion:ConnectorViewModel.Annotations>
                </syncfusion:ConnectorViewModel>
                <syncfusion:ConnectorViewModel SourceNodeID="Decision" TargetNodeID="Output2" SourcePortID="Decision_NoPort">
                    <syncfusion:ConnectorViewModel.Annotations>
                        <syncfusion:AnnotationCollection>
                            <syncfusion:AnnotationEditorViewModel Content="No" RotationReference="Page"/>
                        </syncfusion:AnnotationCollection>
                    </syncfusion:ConnectorViewModel.Annotations>
                </syncfusion:ConnectorViewModel>
                <syncfusion:ConnectorViewModel SourceNodeID="Output1" TargetNodeID="End"/>
                <syncfusion:ConnectorViewModel SourceNodeID="Output2" TargetNodeID="End"/>
            </syncfusion:ConnectorCollection>
        </syncfusion:SfDiagram.Connectors>
    </syncfusion:SfDiagram>
</Grid>
using Syncfusion.UI.Xaml.Diagram;
using Syncfusion.UI.Xaml.Diagram.Theming;
using System.Windows;
namespace SyncfusionWpfApp1
{
    public partial class MainWindow : Window
    {
        SfDiagram diagram;
        public MainWindow()
        {
            InitializeComponent();
            // Create a diagram instance
            diagram = new SfDiagram();
            // Initializing the Nodes collection
            diagram.Nodes = new NodeCollection();
            CreateNode("Start", 300, 100, 40, "Terminator", "Start");
            CreateNode("Input", 300, 180, 40, "Process", "Get Input");
            CreateNode("Decision", 300, 280, 80, "Decision", "Make Decision");
            CreateNode("Output1", 210, 360, 40, "Process", "Output 1");
            CreateNode("Output2", 390, 360, 40, "Process", "Output 2");
            CreateNode("End", 300, 440, 40, "Terminator", "End");

            // Initializing the Connectors collection
            diagram.Connectors = new ConnectorCollection();
            CreateConnector("Start", "Input");
            CreateConnector("Input", "Decision");
            CreateConnector("Decision", "Output1", "Decision_YesPort", "Yes");
            CreateConnector("Decision", "Output2", "Decision_NoPort", "No");
            CreateConnector("Output1", "End");
            CreateConnector("Output2", "End");

            diagram.Theme = new OfficeTheme();

            // Add the Diagram control to the Window
            this.Content = diagram;
        }

        private void CreateNode(string id, double offsetX, double offsetY, double height, string shape, string content)
        {
            NodeViewModel node = new NodeViewModel()
            {
                ID = id,
                OffsetX = offsetX,
                OffsetY = offsetY,
                UnitWidth = 100,
                UnitHeight = height,
                Shape = App.Current.MainWindow.Resources[shape] as string,
            };
            node.Annotations = new AnnotationCollection()
            {
                new AnnotationEditorViewModel() { Content = content }
            };

            if (shape == "Decision")
            {
                node.Ports = new PortCollection()
                {
                    new NodePortViewModel() { ID="Decision_YesPort", NodeOffsetX=0, NodeOffsetY=0.5 },
                    new NodePortViewModel() { ID="Decision_NoPort", NodeOffsetX=1, NodeOffsetY=0.5 },
                };
            }

            (diagram.Nodes as NodeCollection).Add(node);
        }

        private void CreateConnector(string sourceId, string targetId, string sourcePortID = default(string), string content = default(string))
        {
            ConnectorViewModel connector = new ConnectorViewModel()
            {
                SourceNodeID = sourceId,
                TargetNodeID = targetId,
            };

            if (!string.IsNullOrEmpty(sourcePortID))
            {
                connector.SourcePortID = sourcePortID;
            }

            if (!string.IsNullOrEmpty(content))
            {
                connector.Annotations = new AnnotationCollection()
                {
                    new AnnotationEditorViewModel() { Content = content, RotationReference = RotationReference.Page }
                };
            }

            (diagram.Connectors as ConnectorCollection).Add(connector);
        }
    }
}



Más de 145+ controles WPF

Preguntas frecuentes

No vendemos el control de WPF Diagram por separado. Solo está disponible para su compra como parte de la suite Syncfusion WPF, que contiene más de 145 controles de WPF, incluido Diagram. Una licencia de desarrollador único para la suite Syncfusion Essential Studio for WPF cuesta $995.00 USD, incluyendo un año de soporte y actualizaciones. Además, podríamos ofrecer descuentos adicionales basados en promociones actualmente activas. Póngase en contacto con nuestro equipo de ventas para ver si califica para algún descuento adicional.

Puede encontrar nuestra demostración del WPF Diagram en

ubicación de GitHub.

ubicación del centro de aplicaciones.

ubicación de Microsoft.

No, nuestros 145 controles de WPF, incluido Diagram, no se venden individualmente, solo como un paquete único. Sin embargo, hemos fijado un precio competitivo para el producto, por lo que solo cuesta un poco más de lo que algunos otros proveedores cobran solo por su Diagram. También hemos descubierto que, en nuestra experiencia, nuestros clientes suelen empezar utilizando uno de nuestros productos y luego se expanden a varios productos rápidamente, por lo que consideramos que era mejor ofrecer todos los 145 controles de WPF por una tarifa fija de $995/desarrollador. Además, podríamos ofrecer descuentos adicionales basados en promociones actualmente activas. Póngase en contacto con nuestro equipo de ventas hoy mismo para ver si califica para algún descuento adicional.

No, este es un producto comercial y requiere una licencia de pago. Sin embargo, una licencia comunitaria gratuita es también disponible para empresas y particulares cuyas organizaciones tengan menos de 1 millón de dólares estadounidenses en ingresos brutos anuales y cinco o menos desarrolladores.

Un buen lugar para empezar sería nuestra completa documentación de introducción.

Nuestros clientes nos aman

Con un excelente conjunto de herramientas y un gran equipo de soporte, Syncfusion® reduce el tiempo de desarrollo de los clientes.
Estas son algunas de sus experiencias.

Ver historias de éxito reales

Desarrolladores de todo el mundo confían en Essential Studio de Syncfusion para simplificar proyectos complejos y acelerar la entrega. Con una amplia biblioteca de controles de interfaz de usuario, potentes SDK y soporte confiable, Essential Studio ayuda a los equipos a crear aplicaciones de nivel empresarial con confianza.

Explorar estudios de caso


Calificado por usuarios de todo el mundo

Transforme sus aplicaciones hoy descargando la versión gratuita ya y
Descargar prueba gratuita No se requiere tarjeta de crédito.

Syncfusion WPF 50+ Diagram Recursos

Premios

Grandeza: Decir que la tienes es una cosa, pero significa más cuando otros la reconocen. Syncfusion® se enorgullece de haber recibido los siguientes premios de la industria.

Up arrow icon