Fermer

avril 16, 2019

Présentation du ruban de diagramme et du routage intelligent pour le diagramme WPF


Dans cet article, nous examinons plus en profondeur une nouvelle mise à jour de l'interface de diagramme Telerik pour WPF, du ruban de diagramme et de sa nouvelle capacité améliorée à éviter les connexions qui se chevauchent.

Avec la dernière version de l'interface utilisateur Telerik pour WPF nous avons introduit la prise en charge .NET Core 3.0, deux nouvelles commandes (NavigationView et HyperlinkButton), ainsi qu'une variété de nouvelles fonctionnalités. et améliorations de la boîte à outils, y compris le ruban de diagramme.

Dans les paragraphes suivants, nous passerons en revue les dernières caractéristiques et fonctionnalités du cadre de diagramme WPF en nous concentrant sur le ruban de diagramme and Smart Routing.

Composant DiagramRibbon

Ne vous demandez jamais à quel point il serait cool d’avoir un contrôle de ruban exposant les différentes fonctionnalités du diagramme, comme par exemple: enregistrer / charger, imprimer, définir le mode de sélection, ajouter des ponts dans les connexions, etc. Ne cherchez plus!

Dans la dernière version de Telerik UI pour WPF, nous avons présenté le RadDiagramRibbon . Ce contrôle est un RibbonView prédéfini, entièrement personnalisable et prêt à l’emploi, fournissant une interface utilisateur aux fonctions et paramètres les plus courants de RadDiagram. Le contrôle peut être facilement configuré et câblé à RadDiagram à l’aide d’un assistant de conception . En un clic, vous pouvez maintenant combiner différents types de cadre RadDiagram Framework dans un seul contrôle.

 Onglet principal RadDiagramRibbon "title =" Onglet principal RadDiagramRibbon "/></p data-recalc-dims=

Le diagramme DiagramBrain contient trois Onglets contenant les fonctions les plus utilisées du diagramme.

  • Accueil: Le premier onglet contient des fonctionnalités telles que enregistrer / charger, annuler / rétablir, exporter vers une image, etc. Je dois signaler l'outil de forme de conception spéciale ( similaire à l'outil de forme de Microsoft Visio ) ajouté à la section Outils. Ce nouvel outil propose trois types de formes: Rectangle, cercle et triangle . pouvez ajouter une de ces formes à la surface du diagramme et définir leur taille en conséquence.

 DiagramRibbon_ShapeTool "title =" DiagramRibbon_ShapeTool "/></p data-recalc-dims=

  • Paramètres : le deuxième onglet propose des options permettant de définir des paramètres plus spécifiques au diagramme et ses articles. La personnalisation de la grille d'arrière-plan, la modification de la taille des formes ou le réglage du niveau de zoom sont quelques-unes des options pouvant être définies telles quelles.

 DiagramRibbon_SettingsTab "title =" DiagramRibbon_SettingsTab "/></p data-recalc-dims=

Vous pouvez en brancher trois Les autres composants du framework Diagram ( RadDiagramToolBox RadNavigationPane RadDiagramRuler ). À l'aide de la case à cocher de la section Afficher, vous pouvez définir les extensions à afficher ou à masquer.

 DiagramRibbon_SettingsTab_Extensions "title =" DiagramRibbon_SettingsTab_Extensions "/></p data-recalc-dims=

  • Conception : Le dernier onglet a pour but de donner à l'utilisateur le contrôle sur la disposition des formes, les types de connexion et l'algorithme de routage de connexion AStar. Le diagramme fournit plusieurs Layouts prêts à l'emploi qui peuvent être définis à partir du bouton de liste déroulante Ré-Layout: Sugiyama Layout, Disposition de l'arbre, Carte mentale, Radial, Basculement. Changer le type de connexion ou ajouter des ponts n'a jamais été aussi facile. Si un chevauchement de connexion apparaît, vous pouvez activer le mécanisme de routage simplement en cochant la case Activer le routage.

 DiagramRibbon_DesignTab "title =" DiagramRibbon_DesignTab "/></p data-recalc-dims=

Cool, n'est-ce pas?

  • Extensibilité : Si ces onglets intégrés n'incluent pas les fonctionnalités souhaitées ou si vous avez votre propre magie que vous souhaitez ajouter pour un accès rapide, le RadDiagramRibbon peut être étendu pour répondre à vos besoins. Les propriétés de la collection AdditionalTabs et AdditionalGroups peuvent être utilisées pour ajouter de nouvelles propriétés RadRibbonTab et RadRibbonGroup . telerik: RadDiagram x: Name = "diagramme" />

    < telerik: RadDiagramRibbon Diagram = . Binding ElementName = diagram} " >

    < telerik: RadRibbonTab Header = " Custom Tab "> ]

    < telerik: RadRibbonGroup Header = "Extension de Presse-papiers" >

    19659020] telerik: RadRibbonSplitButton Texte = "Pâte" >

    < telerik: RadRibbonSplitButton .DropDownContent >

    < telerik: RadMenu >

    < tel que: [RademenuItem:[1965] ] Header = "Coller" />

    < telerik: RadMenuItem Header = "Paste de " />

    </ telerik: RadMenu >

    </ tel / tel: RadMenu </ telerik: RadRibbonSplitButton .DropDownContent >

    </ telerik: RadRibbonSplitButton >

    [19659000] </ </ telerik >

    </ telerik: RadRibbonTab >

    </ telerik: RadDiagramRibbon >

En utilisant l'extrait de code ci-dessus, vous obtiendrez le code suivant visualisation.

 DiagramRibbon_CustomTab "title =" DiagramRibbon_CustomTab "/></p data-recalc-dims=

Pour plus d'informations, reportez-vous à l'article d'aide – Vue d'ensemble du diagramme de ruban .

Attendez, il y a plus!

Évitez le chevauchement des connexions dans RadDiagram

Dans un scénario complexe où un grand nombre de formes et de connexions sont utilisées, il est difficile de comprendre la relation entre les formes lorsque les connexions se chevauchent. Notre équipe a eu du mal à réduire ces chevauchements, mais oui, nous l'avons fait. Des améliorations ont été apportées à la mise en œuvre de l'algorithme AStarRouter afin de réduire le nombre de cas de ce type. La nouvelle propriété AvoidConnectionOverlap permettra à l'algorithme AStar d'ajouter une pénalité pour le chevauchement des segments de connexion, tentant ainsi de réduire le nombre total de ces connexions difficiles à suivre.

 AvoidConnectionOverlap "title =" AvoidConnectionOverlap "/></p data-recalc-dims=

Pour une meilleure configuration de l’algorithme, nous avons ajouté trois propriétés supplémentaires à AStarRouter : ShapeCrossPenalty SegmentOverlapPenalty et SegmentOl :

  • SegmentOverlapPenalty est une propriété de type double qui indique une pénalité affectée au coût d'un chemin donné lorsqu'elle chevauche une connexion de diagramme existante. Par défaut, la valeur est 0,75. En augmentant la valeur de cette propriété , les connexions peuvent commencer à traverser une forme donnée (éviter une connexion deviendra une priorité plus importante que d’éviter une forme) afin de réduire le chevauchement des segments de connexion.
  • ShapeCrossPenalty est un bon ty de type double qui indique une pénalité affectée au coût d’un chemin donné lorsque les connexions croisent une forme. Sa valeur par défaut est 1. Ce qui signifie que le chemin le plus court entre deux formes est multiplié par 1. L'AStarRouter essaiera de tracer la connexion de manière à ce qu'aucune forme ne soit croisée. En augmentant cette propriété à 2 par exemple, le chemin sera deux fois plus long, ce qui réduira le risque de croiser une forme. En définissant une valeur plus élevée, les connexions peuvent commencer à se chevaucher car il est plus prioritaire d'éviter les formes croisées.

 ShapeCrossPenalty_Property "title =" ShapeCrossPenalty_Property "/></p data-recalc-dims=

  • SegmentOverlapDistance est une propriété du type qui définit distance par rapport à un segment dans lequel un chevauchement est détecté.La valeur par défaut est 3px. L’algorithme crée un cadre de sélection pour chaque segment de connexion et considère un chevauchement s’il existe des cadres se croisant à partir de connexions différentes.

Pour en savoir plus sur le mécanisme de routage de le RadDiagram peut être trouvé dans l'article d'aide de Routing dans notre documentation.

Partagez vos commentaires

N'hésitez pas à nous laisser un commentaire ci-dessous pour partager votre opinion sur les nouveautés dans le framework de diagrammes. Ou visitez notre portail Feedback pour Telerik UI pour WPF et indiquez-nous si vous avez des suggestions ou si vous avez besoin de fonctions / commandes particulières que notre RadDiagram doit posséder.

Et si vous n'avez pas Si vous avez déjà eu la chance d’essayer nos kits d’interface utilisateur, téléchargez simplement une version d’essai à partir du bouton ci-dessous:

Interface utilisateur Telerik pour WPF

Au cas où vous l’auriez manquée, voici quelques-unes des [19659117] mises à jour de notre dernière version .


Les commentaires sont désactivés en mode Prévisualisation.




Source link

Revenir vers le haut