One feature we’ve seen in some Visual Studio productivity add-ons is an adornment that shows the actual color specified by a color value in code. This is very useful for languages like CSS where color values are used throughout the code.
We wanted to show how easy it is to implement the same thing in SyntaxEditor for WPF and Silverlight, so we built a new Color Preview QuickStart for the next maintenance release. The sample just took a few minutes to create and is a great example of combining SyntaxEditor’s tagging and adornments features. Here’s the result:
The color adornments update live as you type colors in.
How Does It Work?
It’s really rather easy. First, we create a new tag class called ColorPreviewTag that inherits ITag and has a Color value associated with it.
Next we create a tagger called ColorPreviewTagger that scans text using a Regex to look for hex color values like #ff0000. When it finds one, it yields back a ColorPreviewTag for that region with the Color value. Our example can spot both the short (three hex character) and long (six hex character) versions.
Then we create an adornment manager named ColorPreviewAdornmentManager that inherits our DecorationAdornmentManagerBase base class. This base class does most of the work for you of watching for new tagged ranges and it notifies you when one is found. All you have to do in ColorPreviewAdornmentManager is create an appropriate adornment element to show. In this case, we make a rectangle whose fill brush is the tagged color.
Finally, we register tagger provider and adornment manager provider services on our CSS syntax language that point to our new classes and we’re done.
Next Steps
The full source of this sample will be included in the next maintenance releases of WPF Studio and Silverlight Studio.
To further improve on the sample code, you could also scan for known color names (Blue, Red, etc.) and could even make an IntelliPrompt quick info provider that would look for ColorPreviewTag’s under the mouse and show a popup tip with hex and decimal values of the color.