Trusted by the world’s leading 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.

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.

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.

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.

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.

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.

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

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

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

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

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.

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.

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.

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

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.

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

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

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

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

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.

Commandes d’espacement
Placez les objets sélectionnés sur un Diagram à intervalles égaux.

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

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.

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.

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.

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.

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.

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.

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

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.

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

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

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

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

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

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

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);
}
}
}Vous ne savez pas comment créer votre premier Diagram WPF ? Notre documentation peut vous aider.
Je voudrais la lire maintenantPlus de 145+ contrôles WPF
Foire aux questions
Pourquoi choisir le contrôle de Diagram WPF de Syncfusion ?
- 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.
Quel est le prix du Diagram WPF de Syncfusion ?
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.
Puis-je acheter le contrôle de Diagram WPF de Syncfusion séparément ?
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.
Puis-je télécharger et utiliser le Diagram WPF de Syncfusion gratuitement ?
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.
Comment démarrer avec Syncfusion Diagram ?
Un bon point de départ serait notre guide complet documentation de démarrage.
Nos clients nous aiment
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.




