The XamSyntaxEditor is one of the recent additions to the Infragistics toolset. It made an odd voyage from being announced as a CTP not  with a release, but with a service release a bit over two months ago. And now it is on route to a XAML project near you, which was announced Brian Lagunas in What’s New in NetAdvantage for WPF & Silverlight 12.2: Part 1 – XAML Line of Business Controls.

A little bit on the side note – check out all the cool LoB stuff coming soon and make sure you don’t miss the What’s New in NetAdvantage for WPF & Silverlight 12.2: Part 2 – XAML Data Visualization Controls!

Now that you’ve got your basics lets jump into more details and examples.

 

Quick setup

First things first – you will need the references to the required assemblies and either the latest service release of either NetAdvantage for Silverlight or WPF. If you are lazy like me just take advantage of the new search bar in Visual Studio 2012 (search field in every place imaginable, yes! yes! Thank you Microsoft!):

Now in case you don’t feel like using a toolbox – the list includes the base platform assembly, “*.Undo.v12.2”, “*.Documents.TextDocument.v12.2” and “*.Controls.Editors.XamSyntaxEditor.v12.2”.

At this point you can setup the Syntax editor in both XAML and in code. (Note: Since the editor won’t do much without a document I consider them a unity and therefore setting up the editor also includes adding in the document). In the absolute most basic case your editor would look like so in XAML:

And in C#:

Important thing to keep in mind – the Text Document is responsible for the desired language interaction(highlighting and error validation) and it’s default setting is ‘Plain Text’. That as you can imagine does not support either of the previously mentioned two very important features, so to get them you might want to set a language using the language property:

Out of the box the editor also supports VB.NET. Of course you can set the very same property identically in XAML and run the app and you’ll get:

*Random C# code pasted form the code behind not included.

The last line is where I deleted a semicolon and a closing parenthesis so now you the familiar squiggly underlines in red are there to indicate something is indeed wrong. And language key words are colorized in nice blue as expected.

What’s in the box?

Grammar

Back in the "What’s new” post – did you notice Syntax Parsing Engine? If you did then +1 for you! Yup, the lexer is actually an autonomous engine that is part of the core experience the Editor control provides. It is responsible for the parsing, creating of syntax tree and error reporting. As mentioned it does come with support for  plain text, C# and VB.NET, but most importantly EBNF(Extended Backus–Naur Form) so you can add additional language descriptions, but on that some other time.

Clipboard support and Undo/redo manager

Also by default the Syntax editor comes with clipboard support for all common actions and also support for unlimited undo/redo operations. Does that sound familiar? Remember the not so long ago introduced Undo / Redo Framework for XAML applications? Yup – it is right here with all it’s features – the unlimited operations stack of Undo Units, flexibility, etc. You can set up properties of the manager from the property of the Text Document:

Text Documents , Snapshots and Scanners

You might actually see this as the TextDocument framework, where the document represents a single text file and supports languages and operations like Load and Save, Append, Delete, Find and Replace and Insert and quite a lot more! It that you have (among other ways) a snapshot and the TextDocumentSnaphot represents the entire state (i.e. version) of a document. Every time a change is made to the document a new snapshot is created. Each snapshot is thread-safe and immutable. The snapshot provides access to lines, length, search method and a one to create a scanner. TextDocumentSnapshotScanner class targets a specific instance of a TextDocumentSnaphot and is created via the snapshot’s CreateScanner method. It provides neat methods to navigate between lines, words and tokens.

 

As you can tell the XamSyntaxEditor is quite the composite control but is it also very flexible and extensible. It strives to provide Editing experience much like the one you have in Visual Studio and just like it implements APIs that are familiar to Visual Studio extension writers.

Splitting and visual cues

If you have noticed above in the screenshot this is the Editor in Metro/Modern/Win8 style (seriously, got all confused lately!). Even though it doesn’t really have that much UI, there are still scroll bars and.. two odd rectangles. What I can’t show you on a screenshot is the mouse cue you get when on top of it as it prompts for resizing. That is because those are handles to drag and actually split the view!

*Sorry for the slightly large gif and slightly buggy recording :)

Both views are scrollable and maintain their own selection. The editor also has property to allow some or none of the splitting options to the end-user.

Commanding

The XamSyntaxEditor comes with a substantial set of commands! I mean there’s a list and it’s kind of long. From default things like Cut/Copy and Paste to split or moving the view in various directions to Undo manager commands and even to upper or lower case and selection. It’s a rich choice and I’ll just show you a small example of a two ButtonTools (consider them to be normal buttons if you will) on a XamRibbon:

The syntax commanding source above contains all the command types I mentioned and probably some more.

Loading and Saving

The Syntax Editor’s Document is the one with the methods to load and save and both methods provide overloads to use either a string with the file name or a stream (the save method actually offers a few variations that can instead save using information from a previous call to the load method. I’ll throw a two fast examples of how to save locally but load from a remote file:

More!

There’s really so much more you can do as I mentioned the control is designed to be extensible, so once you gain substantial knowledge of the control you can customize it quite a bit. For now I’ll tease you with my pretty app where I have the above file loaded, the save, the commands in a ribbon , along with a search fields and a status bar with info bound to the Caret position for example:

And it looks and functions wonderfully:

Stay tuned

This has obviously barely scratched the surface but it’s enough to get you started, provide basic info for the XAML Syntax Editor and show you some of the interesting commands, load and save methods and other properties.

As always, you can follow us on Twitter @DamyanPetev and @Infragistics and stay in touch on Facebook, Google+ and LinkedIn! Stay tuned some pretty exciting stuff are happening for the next release!