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:
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.
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.
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:
Pour cela, héritez de TaggerBase
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:
. ] 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;
}
///
/// Crée le soulignement.
///
/// 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 .
Source link