Syncfusion Feedback

Trusted by the world’s leading companies

Syncfusion Trusted Companies

Aperçu

Le contrôle de Diagram WPF permet aux utilisateurs de créer et de modifier rapidement des organigrammes, des organigrammes hiérarchiques, des Diagrams UML, des Diagrams de couloirs, des cartes mentales, des plans d’étage et plus encore au sein de leurs applications.


Organigramme

Le contrôle de Diagram WPF fournit toutes les formes d’organigramme standard sous forme d’objets prêts à l’emploi pour créer des organigrammes, ce qui facilite leur ajout à une surface de Diagram en un seul appel. Un algorithme de disposition automatique intégré a été spécialement conçu pour l’organigramme afin d’organiser chaque forme d’organigramme automatiquement sans spécifier les coordonnées.

WPF Diagram Flowchart


Organigramme hiérarchique

Algorithme de disposition automatique intégré spécifiquement conçu pour les organigrammes hiérarchiques afin d’organiser automatiquement les positions des nœuds parents et enfants.

WPF Diagram Organizational Chart


Carte mentale

Créez des Diagrams de cartes mentales avec un algorithme de disposition automatique intégré pour définir un nœud central qui représente une idée ou un concept et d’autres nœuds à placer autour de celui-ci.

WPF Diagram Mindmap Tree


Ruban de Diagram

  • Le contrôle de ruban de Diagram contient des éléments d’interface utilisateur qui permettent aux utilisateurs finaux de loader et d’enregistrer des Diagrams, d’ajouter des éléments de Diagram sur le canevas, de formater le texte dans les éléments de Diagram, de réorganiser et de recolorer les formes, de modifier la taille et l’orientation du canevas, et d’effectuer des opérations de presse-papiers.
  • Le ruban peut être facilement personnalisé pour ajouter de nouveaux éléments/onglets de ruban et supprimer les éléments/onglets de ruban existants.

WPF Diagram Ribbon


Haute performance

Chargez rapidement de gros Diagrams en utilisant les techniques de virtualisation de l’interface utilisateur, qui chargent sélectivement les objets qui se trouvent dans la zone d’affichage. Un défilement fluide est obtenu grâce à un algorithme de recherche spatiale intégré qui construit un index basé sur la position de l’élément.

WPF High Performance Diagram Control


Nœuds

Visualisez n’importe quel objet graphique en utilisant des nœuds qui peuvent également être arrangés et manipulés sur une page de Diagram.

WPF Diagram Built-in Shapes for Nodes

Formes

Utilisez plus de 445 formes intégrées standard ou vos propres formes personnalisées.

WPF Diagram Node Template

Modèle

Vous pouvez utiliser du texte, des images, des contrôles, des panneaux ou n’importe quel UIElement ou modèle pour visualiser un nœud. Il peut également être lié à n’importe lequel de vos objets métier.


Connecteur

Un connecteur est utilisé pour représenter une relation entre deux nœuds. Certaines des principales caractéristiques sont énumérées ci-dessous.

WPF Diagram with Different Types of Connectors

Types

Les types de connecteurs sont rectilignes, orthogonaux et courbes. Choisissez l’un d’entre eux en fonction du type de Diagram ou de la relation entre les nœuds connectés.

WPF Diagram Arrowheads

Flèches

Utilisez des pointes de flèches (décorateur) pour indiquer la direction du flux dans un organigramme ou un Diagram d’état. Créez également des pointes de flèches personnalisées en fonction du type de Diagram.

WPF Diagram Restrict Segment Overlapping using Routing

Routage

Les connecteurs orthogonaux empruntent le chemin le plus court et le plus intelligent pour éviter de chevaucher les nœuds voisins.

WPF Diagram Bridging

Pontage (sauts de ligne)

Le pontage (sauts de ligne) indique clairement le chemin du connecteur et facilite la lecture là où les connecteurs se chevauchent dans un Diagram dense.

WPF Diagram Custom Appearance

Apparence

Personnalisez l’apparence d’un connecteur. Un riche ensemble de propriétés est disponible pour personnaliser la couleur, l’épaisseur, les pointillés, les coins arrondis et les décorateurs.


Port (point de connexion)

Connectez-vous à l’emplacement souhaité d’un nœud en utilisant différents types de ports ou de points de connexion disponibles.

WPF Diagram Node Ports

Port de nœud

Créez des portes logiques ou un Diagram de circuit avec des broches dédiées et restreignez les connexions entrantes ou sortantes à l’aide de ports de nœuds.

WPF Diagram Connector Ports.

Port de connexion

Utilisez les ports de connexion pour indiquer les flux de messages entre les objets ou les lignes de vie dans un Diagram de séquence.

WPF Diagram Dynamic Port

Port dynamique

Établissez des connexions parallèles à un Diagram de blocs en vous connectant n’importe où sur le côté d’un bloc. Ils sont automatiquement créés ou détruits.

WPF Diagram Dock Port

Port d’ancrage

Contrôlez les connexions dynamiques vers des côtés spécifiques ou dans une direction spécifique à l’aide des ports d’ancrage.


Annotation

Affichez des informations supplémentaires en ajoutant du texte ou des étiquettes sur les nœuds et les connecteurs.

WPF Diagram Editing

Modifier

Ajoutez et modifiez du texte à l’exécution. Vous pouvez également le marquer en lecture seule s’il ne doit pas être modifié.

WPF Diagram Multiple Annotations

Annotations multiples

Ajoutez autant d’annotations que nécessaire et alignez-les individuellement.

WPF Diagram Annotation Alignment

Alignement

Le Diagram WPF offre des options d’alignement sophistiquées où les annotations peuvent être placées :

  • À l’intérieur ou à l’extérieur d’un nœud.
  • À l’extrémité source ou cible d’un connecteur.
  • Automatiquement lorsque le nœud ou le connecteur est déplacé.

Fonctionnalités interactives

Utilisez les fonctionnalités interactives pour améliorer l’expérience d’édition d’un Diagram à l’exécution. De plus, éditez facilement un Diagram avec une souris, un écran tactile ou des interfaces clavier.

WPF Diagram Select and Drag the Nodes

Sélectionner et faire glisser

Sélectionnez un ou plusieurs nœuds, connecteurs ou annotations et modifiez-les à l’aide de poignées ou de manipulateurs.

WPF Diagram Resizing

Redimensionner

Redimensionner un nœud dans huit directions différentes. Verrouillez les proportions pour conserver la forme après le redimensionnement. Redimensionnez plusieurs objets simultanément.

WPF Diagram Node Rotation

Rotation

Faites pivoter un nœud sélectionné à 360 degrés.

WPF Diagram Snapping Feature.

Magnétisme

Alignez précisément les nœuds, les connecteurs et les annotations en les faisant glisser, en les accrochant simplement aux lignes de grille ou aux objets les plus proches.

WPF Diagram Undo and Redo Feature

Annuler Rétablir

Les commandes Annuler et Rétablir permettent d’inverser les actions.

WPF Diagram Clipboard

Presse-papiers

Coupez, copiez, collez ou dupliquez les objets sélectionnés au sein et entre les Diagrams.

WPF Diagram Z-Order Commands

Ordre Z

Lorsque plusieurs objets se chevauchent, l’ordre Z contrôle quel objet doit être au-dessus ou en dessous.

WPF Diagram Grouping

Regroupement

Combinez plusieurs nœuds et interagissez avec eux comme un seul objet appelé groupe. Les nœuds peuvent appartenir à plusieurs groupes.

WPF Diagram Quick Commands

Commande rapide

Les commandes fréquemment utilisées comme supprimer, connecter et dupliquer peuvent être affichées sous forme de boutons près des sélecteurs. Cela facilite les opérations rapides, au lieu de trouver les boutons dans une boîte à outils.


Alignement

Le contrôle de Diagram WPF dispose de commandes d’alignement prédéfinies pour aligner les nœuds et les connecteurs des objets sélectionnés sur la limite de sélection.

WPF Diagram Spacing Commands

Commandes d’espacement

Placez les objets sélectionnés sur un Diagram à intervalles égaux.

WPF Diagram Sizing Commands

Commandes de dimensionnement

Utilisez les commandes de dimensionnement pour dimensionner les nœuds de l’application afin de répondre à vos exigences de performances.

WPF Diagram Alignment Commands

Commandes d’alignement

Alignez les nœuds ou les connecteurs de la liste de sélection à gauche, à droite ou au centre horizontalement, ou en haut, en bas ou au milieu verticalement par rapport à la limite de sélection.


Algorithme de disposition automatique

Le contrôle de Diagram WPF fournit un algorithme de disposition automatique, qui est utilisé pour organiser les nœuds automatiquement en fonction d’une logique de disposition prédéfinie. Il existe un support intégré pour la disposition d’organigramme, la disposition d’arborescence hiérarchique, la disposition d’organigramme, la disposition de carte mentale et la disposition d’arborescence radiale.


Outil de dessin

Dessinez des nœuds et reliez-les interactivement, en cliquant et en faisant glisser sur la surface d’un Diagram.

WPF Diagram Drawing Tool


Pochoir

Le contrôle de pochoir est une galerie de symboles et de nœuds réutilisables. Faites glisser et déposez ces symboles sur la surface d’un Diagram autant de fois que vous le souhaitez.

WPF Diagram Stencil


Zoom, panoramique, ajuster à la page

Lorsqu’un Diagram est grand, visualisez-le de plus près ou de plus loin en zoomant et dézoomant le Diagram. Naviguez également d’une région à l’autre en vous déplaçant sur le Diagram.

WPF Diagram Zoom Pan Fit to page


Contrôle de la vue d’ensemble

Améliorez l’expérience de navigation lors de l’exploration de grands Diagrams à l’aide de la vue d’ensemble. Elle affiche un petit aperçu de la page de Diagram complète. Elle permet également aux utilisateurs d’effectuer des opérations telles que le zoom et le panoramique.

WPF Diagram Overview control


Règles et unité de mesure

Mesurez la distance des nœuds et des connecteurs par rapport à l’origine de la page à l’aide des règles. De plus, spécifiez la taille et la position des objets dans différentes unités comme les pixels, les pouces et les centimètres.

WPF Diagram Rulers and Measurement Units


Source de données

Remplir les Diagrams avec des nœuds et des connecteurs basés sur les données de sources de données. Les données de tout format peuvent être facilement converties, mappées et consommées dans le Diagram en définissant quelques propriétés, sans avoir à écrire de code.

WPF Diagram Data Source


Divers

Plusieurs autres fonctionnalités sont disponibles pour améliorer l’expérience de création de Diagrams.

WPF Diagram Printing

Impression

Le contrôle de Diagram WPF prend en charge l’impression avec une option d’aperçu avant impression. Personnalisez la taille de la page, l’orientation, les marges de la page et l’ajustement à une seule page.

WPF Diagram Exporting

Exportation

Partagez vos Diagrams avec d’autres en les exportant facilement aux formats de fichiers .xps, .png, .jpeg et .bmp.

WPF MVVM-friendly Diagram Control

Compatible MVVM

Le contrôle de Diagram WPF est compatible MVVM et fonctionne parfaitement avec les frameworks MVVM populaires comme Prism et MVVM light.

WPF Diagram Serialization

Sérialisation

Vous pouvez enregistrer l’état de votre Diagram en tant que fichier XML et le recharger pour le modifier à nouveau.

WPF Diagram Localization

Localisation

Localisez chaque texte statique du contrôle dans n’importe quelle langue prise en charge.

WPF Diagram Context Menu

Mappez les commandes fréquemment utilisées au menu contextuel.

WPF Diagram Gridlines

Grilles

Les lignes de grille fournissent des indications lors de l’alignement d’objets.

WPF Diagram Page Layout

Disposition de la page

Le contrôle de Diagram WPF donne un aspect de page à une surface de dessin en utilisant la taille de la page, l’orientation et les marges.


Exemple de code de Diagram WPF

Lancez-vous facilement avec le Diagram WPF en utilisant quelques lignes de code XAML ou C# comme démontré ci-dessous. Explorez également notre exemple de Diagram WPF qui vous montre comment afficher et configurer le Diagram en WPF.

// filepath: c:\featuretour-wpf\wpf\diagram.md
<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>
// filepath: c:\featuretour-wpf\wpf\diagram.md
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);
        }
    }
}



Plus de 145+ contrôles WPF

Foire aux questions

  • Visualisez, créez et modifiez des Diagrams interactifs.
  • Temps de chargement ultra-rapide, interactions riches de l’interface utilisateur et navigation au clavier.
  • Chargez une large gamme de nœuds avec des performances optimales.
  • Support des Diagrams d’organigramme, de nombreuses formes intégrées et une liaison de données flexible.
  • Organisez facilement les composants de Diagram dans des mises en page telles que l’organigramme, la carte mentale, l’arborescence radiale et l’arborescence hiérarchique.
  • Capacités d’exportation et d’impression transparentes.
  • L’un des meilleurs Diagrams WPF du marché qui offre une interface utilisateur riche en fonctionnalités pour interagir avec le logiciel.
  • Configuration et API simples.
  • Vastes ressources d’apprentissage telles que des démos et de la documentation pour apprendre rapidement et démarrer avec le Diagram WPF.

Nous ne vendons pas le contrôle Diagram WPF séparément. Il est uniquement disponible à l’achat dans le cadre de la suite Syncfusion WPF, qui contient plus de 145 contrôles WPF, y compris Diagram. Une licence développeur unique pour la suite Syncfusion Essential Studio pour WPF coûte 995,00 USD, comprenant un an de support et de mises à jour. De plus, nous pourrions être en mesure d’offrir des réductions supplémentaires en fonction des promotions en cours. Veuillez contacter notre équipe commerciale pour savoir si vous êtes admissible à des réductions supplémentaires.

Vous pouvez trouver notre démo du Diagram WPF sur

l’emplacement GitHub location.

l’emplacement App Center location.

l’emplacement Microsoft location.

Non, nos 145 contrôles WPF, y compris Diagram, ne sont pas vendus individuellement, mais uniquement sous forme de package unique. Cependant, nous avons fixé un prix très compétitif pour le produit, de sorte qu’il ne coûte qu’un peu plus que ce que certains autres vendeurs facturent pour leur seul Diagram. Nous avons également constaté, selon notre expérience, que nos clients commencent généralement par utiliser l’un de nos produits, puis étendent rapidement leur utilisation à plusieurs produits. Nous avons donc estimé qu’il était préférable d’offrir tous les 145 contrôles WPF pour un forfait de 995 $/développeur. De plus, nous pourrions être en mesure d’offrir des réductions supplémentaires en fonction des promotions en cours. Veuillez contacter notre équipe commerciale dès aujourd’hui pour savoir si vous avez droit à des réductions supplémentaires.

Non, il s’agit d’un produit commercial qui nécessite une licence payante. Cependant, une licence communautaire gratuite est également disponible pour les entreprises et les particuliers dont les organisations ont un chiffre d’affaires annuel brut inférieur à 1 million de dollars USD et cinq développeurs ou moins.

Un bon point de départ serait notre guide complet documentation de démarrage.

Nos clients nous aiment

Grâce à un excellent ensemble d’outils et à une excellente équipe d’assistance, Syncfusion® réduit le temps de développement de ses clients.
Voici quelques-uns de leurs témoignages.

Voir de vraies histoires de réussite

Des développeurs du monde entier font confiance à Essential Studio de Syncfusion pour simplifier les projets complexes et accélérer leur livraison. Grâce à sa vaste bibliothèque de contrôles d’interface utilisateur, à ses SDK puissants et à son support fiable, Essential Studio aide les équipes à créer des applications prêtes pour l’entreprise en toute confiance.

Explorer des études de cas


Evalue par des utilisateurs du monde entier.

Transformez vos apps aujourd’hui avec version d’essai gratuite ici a
Télécharger l'essai gratuit Aucune carte de crédit requise.

Syncfusion WPF Diagram Ressources

Recompenses

L’excellence—c’est une chose de l’affirmer, mais cela signifie davantage lorsque les autres la reconnaissent. Syncfusion® est fier de détenir les récompenses de l'industrie suivantes.

Up arrow icon