Enrichissez vos applications WPF avec le nouveau contrôle SyntaxEditor

Afficher un bloc de code en surbrillance, afficher une langue personnalisée ou ajouter un éditeur de code complet dans votre application – notre éditeur de syntaxe vous offre de nombreuses possibilités pour vos applications.

Vous connaissez notre application brillante Telerik UI pour WPF Demos n'est-ce pas? Si vous ne le faites pas, il s'agit d'une application WPF robuste, présentant tous les 140 contrôles d'interface utilisateur de la suite de composants Telerik UI pour WPF . Chacun des composants est présenté par une poignée de démos, tous accompagnés de leur code source. Il est donc très facile de voir comment utiliser les différentes fonctions de contrôle.

Comment visualisons-nous les fichiers de code source? C’est via le contrôle RadSyntaxEditor . Vous vouliez l'inclure dans notre suite WPF et nous l'avons livré. Vous pouvez désormais implémenter des éditeurs et des visualiseurs de code source dans vos applications de bureau, dans n'importe quelle langue! (? ?)

Avant d'entrer dans les fonctionnalités, signalons clairement que RadSyntaxEditor est la version bêta de la version R3 2019 et nous souhaitons connaître les scénarios que vous souhaitez que vos applications couvrent à l'avenir. Ainsi, nous proposerons certainement une version officielle exceptionnelle en janvier 2020.

Démarrage rapide

Pour commencer à utiliser l'éditeur de syntaxe, ajoutez-le dans XAML, puis définissez dans le code sa propriété Document pour référencer un fichier.

 

 public MainWindow () 
 {
 StyleManager.ApplicationTheme = new FluentTheme (); 
 InitializeComponent (); 
 Uri filePathUri = new Uri ("/ SyntaxEditor_Design; composant / CSharp.cs ", UriKind.RelativeOrAbsolute); 
 en utilisant (Stream stream = Application.GetResourceStream (filePathUri) .Stream) 
 {
 Lecteur de StreamReader = new StreamReader (flux, Encoding.UT8); 
; this.syntaxEditor.Document = new TextDocument (lecteur); 
} 
 CSharpTagger cSharpTagger = new CSharpTagger (this.syntaxEditor); 
 this.syntaxEditor.TaggersRegister lignes de code, vous obtenez un éditeur de code de votre fichier C # dans un thème moderne et courant: 

 L'éditeur de syntaxe sait comment détecter et colorier les mots-clés, les commentaires et les régions dans les langages suivants du monde .NET: C #, VB, JS, SQL. En outre, il reconnaît les différentes parties dans un texte de code source basé sur XML. Il est donc parfaitement conçu pour mettre en évidence les fichiers de langage basés sur XML - XML, XAML, HTML.

Ces deux types de base de reconnaissance de la syntaxe vous permettent de définir votre propre langage et processus personnalisés. sa syntaxe, ses mots ou ses structures.

Expérience de montage comme dans les IDE populaires

RadSyntaxEditor stocke le texte entier du document dans une structure de données « rope » qui permet l’insertion et la suppression de texte à une vitesse logarithmique. Certaines fonctions sont inspirées des IDE populaires - numérotation des lignes, pliage (sections développées / réduites dans le code), sélection par rectangle, édition simultanée sur des lignes consécutives, Annuler-Répéter, zoomant (plus niveaux de zoom prédéfinis dans le combo). ).

La boîte de dialogue Rechercher-remplacer vous permet de rechercher (rechercher) une partie spécifique de votre code ou de remplacer certaines occurrences de chaînes correspondantes. Elle est entièrement localisée ce qui signifie vous pouvez facilement basculer entre les langues prises en charge (EN, DE, FR, IT, TR, DU, ES) dans votre application et celle-ci sera traduite. Vous pouvez également ajouter des traductions pour les clés de localisation fournies.

Les fonctions Intelliprompt telles que l'achèvement de code et la liste de surcharge vous permettent d'ajouter Menus contextuels pour l'insertion de code / texte ou la navigation entre les surcharges de méthodes possibles.

Vous avez de nombreuses façons de colorer / formater votre code / texte dans RadSyntaxEditor. Dans les palettes vous pouvez alterner les variations claires, sombres, neutres et sombres des mots liés à la syntaxe dans votre document de code, bien sûr, que vous pouvez facilement combiner avec nos thèmes intégrés qui sont appliqué aux barres de défilement, zoom, liste de dialogue de remplacement de remplacement, commandes intelliprompt, arrière-plan de l'éditeur.

commandes afin que vous puissiez les relier facilement aux boutons / menus de votre application. Bien entendu, vous pouvez vous attendre à des méthodes publiques pour la plupart des fonctionnalités telles que Rechercher-Remplacer / Couper-Copier-Coller / Insérer-Supprimer / Navigation / Sélection / Recherche de lignes / Indentation / Zoom / etc. Vous pouvez suivre tout changement dans le document, abonnez-vous simplement à un événement utile et implémentez votre logique d'application.

Plongeons maintenant dans les eaux profondes du traitement de texte, puis développons quelques augmentations. Tagger dans le monde de l'éditeur de syntaxe signifie une classe qui collecte certaines occurrences de parties de texte et les enveloppe dans des balises. Les étiquettes gardent une référence au texte trouvé, stockent des informations sur la façon dont ce texte doit être formaté et sur le calque qui doit le gérer.

Par exemple, CSharpTagger collecte des mots-clés, des commentaires et des régions dans un fichier C # et prépare la collection de ClassificationTags. Lorsque l'éditeur de syntaxe met à jour son interface utilisateur, un calque dédié colore le texte de ClassificationTags - TextUILayer. Un autre exemple - TextSearchUnderlineTagger collecte les correspondances d'un mot et TextUnderlineUILayer affiche des rectangles colorés en dessous des occurrences du mot donné dans le document.

Utilisation de tagueurs dans l'éditeur de code

La théorie est difficile sans pratique, n'est-ce pas? Alors, codons quelques trucs utiles avec les Taggers.

ToolTip Tagger

ToolTip Tagger affiche la couleur d'une propriété "Color" dans un fichier XAML dans une info-bulle:

Pour cela, héritez de TaggerBase . Dans la méthode GetTags, vous recevez tous Avec le regex matching, nous collectons toutes les occurrences de mots se terminant par * Color = "# hexcolor", puis préparons le contenu d’une info-bulle et renvoyons TagSpan - objet faisant référence à la span contenant le text et l'objet tooltiptag qui seront traités par TextToolTipLayer.

 classe publique ColorStringTooltipTagger: TaggerBase 
 {
 private const string colorRegex = @ " w * Color =" "(# {0,1}) ([0-9A-Fa-f] {8} | [0-9A-Fa-f] {6}) "" $ "; 
 /// 

Le reste du travail consiste à enregistrer ce tagueur:

. ] ColorStringTooltipTagger tooltipTagger = nouveau ColorStringTooltipTagger (this.syntaxEditor); 
 this.syntaxEditor.TaggersRegistry.RegisterTagger (tooltipTagger); 

Underline Tagger

Le sous-titre ger sert à dessiner des rectangles colorés sous des chaînes de couleur hexadécimales dans un fichier XAML.

Étape 1. Créez un objet IUnderlineDecoration personnalisé qui dessine un soulignement coloré sous un trait Rect donné étant un rectangle englobant autour d'une portion de texte:

 public class CustomLineDecoration: IUnderlineDecoration 
 {
 private double épaisseur; 
 interne CustomLineDecoration (double épaisseur) 
 {
 this.thickness = épaisseur; 
} 
 /// 
 ///  Le rectangle. 
 ///  The brush. 
 ///  FrameworkElement. 
 public FrameworkElement CreateUnderline (Rect rect, Brush brush) 
 {
 Ligne line = nouvelle Line (); 
 line.Stroke = brush ; 
 line.Stro keThickness = this.thickness; 
 double ligneY = rect.Haut + rect.Hauteur + 2; 
 ligne.X1 = rect.Left; 
 ligne.Y1 = ligneY; 
 ligne.X2 = rect .Droit; 
 ligne.Y2 = ligneY; 
 ligne.IsHitTestVisible = false; 
 ligne retour; 
} 
} 

Étape 2. Créez des instances de la décoration, TextFormatDefinitionKey et le libellé sous-jacent:

 classe partielle publique MainWindow: Window 
 {
 privé en lecture seule et en lecture seule = new CustomLineDecoration (4); 

Étape 3. Enregistrez le tagueur et gérez l'événement SelectionChanged:

 public MainWindow () 
 {
 I nitializeComponent (); 
 this.LoadFile ("Test / UserControl.xaml"); 
 this.underlineTagger = new TextSearchUnderlineTagger (this.syntaxEditor, colorUdnerlineDefinition); 
 underlineTagger); 
 this.syntaxEditor.Selection.SelectionChanged + = Selection_SelectionChanged; 

Étape 4. Lors de la sélection, vérifiez si le mot sélectionné est une chaîne de couleur hexagonale et, si oui, définissez la mise en forme personnalisée correspondante. mot hexadécimal et forcez le marqueur de soulignement à mettre à jour l'interface utilisateur:

 private void Selection_SelectionChanged (expéditeur d'objet, EventArgs e) 
 {
 chaîne selectedWord = this.syntaxEditor.Selection.GetSelectedText (); 
 poureach ( char ch dans selectedWord) 
 {
 if (! char.IsDigit (ch) &&! char.IsLetter (ch)) 
 {
 return; 
} 
} 
 si (syntaxeE ditor.Selection.StartPosition.Index == 0) 
 return; 
 Span previousCharSpan = nouvelle Span (syntaxEditor.Selection.Selection.StartPosition.Index - 1, 1); 
 if (this.syntaxEditor.Document.CurrentSnapshot .GetText (previousCharSpan) == "#") 
 {
 string colorSection = string.Format ("# {0}", selectedWord); 
 Couleur color = this.GetColor (colorSection); 
. ] This.syntaxEditor.TextFormatDefinitions.AddLast (colorUdnerlineDefinition, 
 new TextFormatDefinition (new UnderlineInfo (new SolidColorBrush (couleur), lineDecoration))); 
 this.underlineInfo (nouveau Selection.Clear (); 
} 
} 

Voilà! Vous disposez maintenant d'une fonctionnalité utile, implémentée en quelques minutes, qui est généralement une extension de Visual Studio ?.

Restez attentifs

Cet article de blog a pour sujet Pour terminer, mais ce n’est que le début du cycle de vie sans fin de ce composant puissant. Nous apprécierons tous vos commentaires et prendrons en compte toutes les suggestions de fonctionnalités que vous ferez. De cette manière, nous fournirons une syntaxe officielle impressionnante, riche en fonctionnalités, Rédacteur en R1 2020. Envoyez-nous vos suggestions sur notre portail de commentaires .