Fermer

octobre 28, 2019

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! (? ?)

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:

 Interface utilisateur Telerik pour WPF Thème courant, "title =" Interface utilisateur Telerik pour WPF, thème Courant "data-openoriginalimageonclick =" true "/> [19659012] Regardons maintenant à l'intérieur du réfrigérateur. </p data-recalc-dims=

Wh

Mise en évidence de la syntaxe

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.

 Interface utilisateur Telerik pour la syntaxe WPF Mise en surbrillance "title =" Interface utilisateur Telerik pour la syntaxe WPF "data-openoriginalimageonclick =" true "/> </a data-recalc-dims=

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.

 Interface utilisateur Telerik pour la boîte de dialogue Rechercher-Remplacer WPF "title =" Interface utilisateur Telerik pour la boîte de dialogue Rechercher-Remplacer WPF "data-openoriginalimageonclick =" true "/> </a data-recalc-dims=

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.

Thèmes, Palettes, Couleurs personnalisées, Mise en forme

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.

 Interface utilisateur Telerik pour WPF Custom Theme "title =" Interface utilisateur Telerik pour WPF Custom Theme "data-openoriginalimageonclick =" true "/> [19659026] API riche - Méthodes, commandes et événements [19659027] Nous nous sommes assurés que la plupart des opérations de l'interface utilisateur étaient exécutées à l'aide de <a scxw170184585= 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.

Taggers and Layers

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:

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

/// Initialise une nouvelle instance de la classe .
/// [19659040] /// L'éditeur.
public ColorStringTooltipTagger (éditeur ITextDocumentEditor)
: base (éditeur)
{
}
///
/// Obtient les balises.
///

public override IEnumerable <TagSpan > GetTags (NormalizedSnapshotSpanCollection spans)
{
Instantané TextSnapshot = this.Document.CurrentSnapshot;
pour chaque séquence (TextSnapshotSpan snapshotSpan dans l'envergure)
{
string lineString = snapshotSpan.GetText (); (colorRegex, RegexOptions.IgnoreCase | RegexOptions.ExplicitCapture);
MatchCollection matches = regularExpression.Matches (lineString);
poureach (match dans les allumettes)
{
si (match.Success)
{
int. = lineString.IndexOf (match.ToString ());
TextSnapshotSpan tempSnapshotSpan = new TextSnapshotSpan (instantané, nouvelle Envergure (snapshotSpan.Start + index, match.Length));
string colorString =
Debug.WriteLine (colorString);
Rectangle rect = new Rectangle ()
{
Width = 30,
Height = 30,
Fill = new SolidColorBrush (this.G etColor (colorString)),
Margin = new System.Windows.Thickness (5),
};
donne le rendement retourné nouveau TagSpan (tempSnapshotSpan, nouveau ToolTipTag (rect));
}
}
}
rupture de rendement;
}
couleur privée GetColor (chaîne de caractères colorée)
{
chaîne colorPart = colortext.Substring (colortext.IndexOf ("#") , [7];
Couleur couleur = (Couleur) ColorConverter.ConvertFromString (colorPart);
couleur de retour;
}
}

Le reste du travail consiste à enregistrer ce tagueur:

 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 ();
}
}




Source link