Lately we’ve been working on starting to add adornment layer capabilities to SyntaxEditor for WPF. Each adornment layer can contain any sort of UIElement-based adornment. For example, in our updated design for version 2009.2, the editor view selection itself is now an adornment layer, where the selection visual is a shape. Custom adornment layers can be created and managed.
They can be inserted anywhere in the z-order of adornment layers too. This means that you can put adornments on top of the text, or you could alternatively choose to show them in between the selection and text layers, etc.
This adornment layer model is a huge extensibility point and will be used as the foundation for many visual features going forward. Once implemented, things like squiggle (wave) lines and collapsed outlining node markers will adornment layers.
Smoke text QuickStart
We wanted to do a neat sample to ensure the layers perform well at run-time. What we came up with is smoke text! :)
Basically, as you type, smoke rings rise out from where the caret is and change location, size, and opacity, thereby creating a neat smoke effect. The static picture doesn’t do the effect justice. Check out a captured video after the break.
Video capture
Here is the video of the smoke text effect in action:
How did we do that?
This sample is pretty simple. It just has a SyntaxLanguage defined that allows a smoke text adornment manager to be defined for any view that attaches to the language. The actual adornment layer in this case is positioned behind the selection layer. This way, the selection, caret, and text always appear in front of the smoke.
The adornment manager listens for text changes and if the view has focus, it makes an animated smoke effect where the caret is. The hardest part of it really was just coming up with the randomized transforms on the animated smoke rings.
Summary
You’ll also want to notice the horizontal gray highlight in the background of the line being modified. That is another adornment prototype that does current line highlighting. It essentially highlights the view line that currently contains the caret.
The adornment layer features are targeted to be part of the WPF Studio 2009.2 release in the next month or two. We still have a lot of work to do on it but this is too neat of a sample not to blog about. As you can see, with our upcoming adornment layer features, the sky is the limit on what you can do within the editor.