As mentioned in our previous blog post, we’ve been hard at work on some very major new features for the WPF SyntaxEditor control, the premier code editor control for Windows Presentation Foundation. The three areas we’re about code complete with are:
- Collapsed text
- Intra-text spacers and intra-text adornment managers
- Code outlining
Note that the code in the current build 513 has portions of the above already implemented but the next build 514 is where we hope to have the object model about finalized. We hope to have some samples and documentation for that build too.
Today I wanted to provide a sneak peek for a full source QuickStart that will be included in the next build 514 of WPF Studio. This is a really neat QuickStart so prepare for a bunch of screenshots!
Code Reviewing QuickStart in action
This QuickStart is intended to show one way you could do code reviews within an app. SyntaxEditor is the code editor control in use here. Assume we have some code loaded from another developer and need to review it. As we review, we’ll mark some sections of code to come back to later.
In the screenshot above, I as the reviewer determined that the namespace was incorrect. So I selected the namespace name in the code editor, typed “The namespace is incorrect” in the textbox at the very top and clicked the Add note button. Poof! A note appeared in-line with the text. Notice that the range I selected is now rendered with a yellow background. But the really cool thing is that there’s also a note icon with drop-down arrow inside the text, between characters. Is that a real control?
Yes, that’s actually a PopupButton, which is a control that ships in our Shared Library! Let’s hover over it with the mouse…
See the hover effect on the button? It’s also showing us a tooltip with details about our code review comment. The text I typed in is green, it tells us by whom and when the comment was created, and gives its status. Neat stuff… now let’s add one more comment before we go through our notes with the developer.
Here I added another comment over the public keyword saying that I think it should be internal instead. Oh but wait… I forgot that we do need this class to be public. My mistake, so let’s click the note button and choose to remove it.
Ok, now we’re ready to sit down with the developer of this code and review it. The developer agrees with me on the first note, it should be another namespace. So I’ll drop down the note button’s popup menu like this…
I’m going to select the Mark as Accepted button to say that this comment was accepted.
Our note highlight turns green to indicate it was accepted. If we had marked it as rejected instead, it would have turned red.
SyntaxEditor features involved
What this QuickStart focuses on is a brand new concept, which is intra-text spacers. Intra-text spacers are a way that you can dynamically reserve space between text characters. Once you have space reserved, you can place any sort of content in that space, generally via an intra-text adornment manager.
That’s effectively what we do here. We reserve space for the note button and then use an intra-text adornment manager (we provide a helper base class for this) to aid in adding WPF content in that space. You can add any sort of content as an adornment… images, controls, anything.
The intra-text space is reserved using a tagger, which is a new framework feature we added in the first WPF Studio 2009.2 release. There is a special IIntraTextSpacerTag interface that can be used to do this.
For this sample we have our custom tag (that implements IIntraTextSpacerTag) also implement IClassificationTag. This allows it to provide an alternate background for contained text.
Our adornment manager processes the menu item clicks and removes tags when you click Remove Note, and updates a tag’s status when you click to change status. An event is raised to let any listeners of these tag types know to update, which in our case is the UI.
Summary
Adding intra-text content is something that has been requested numerous times by customers in the past. Now this is entirely possible with the upcoming build 514 and opens up a large number of new things you can do with a code editor in your app.
Want to insert in-line icons next to class definitions that better illustrate to the end user the access (public, private, etc.)? Want to embed something like smart tag buttons directly within text content? No problem!
Again, this new QuickStart will appear in build 514 so be sure to check it out then. And as a side note, you won’t find this sort of feature in any of the competition. We are committed to making SyntaxEditor the hands-down market leader for code editor controls.