We just published WPF Studio 2009.2 build 514 and some of its new features are the culmination of over a month of work on the SyntaxEditor product.  We’ve mentioned some of the new feature areas in our previous blog posts, but here is the list again:

• Collapsed text
• Intra-text spacers and intra-text adornment managers
• Code outlining

Build 514 includes 7 new samples specifically related to the features mentioned above.  That brings our grand total to over 60 samples just for the SyntaxEditor product!

Our last blog post focused on a QuickStart included with build 514 that showed how to implement code reviewing right within the editor, via the use of intra-text adornments.  Today I’d like to discuss code outlining.

What is code outlining?

Code outlining, also known as code folding, is the ability for an outlining node hierarchy to be constructed based on the contents of the document.  The outlining node hierarchy is rendered visually within the new outlining margin as seen in the screenshot below:

A “+” or “-“ box in the margin shows where nodes start.  Clicking those boxes toggles the collapsed state of the node.  When a node is collapsed, its text is hidden and boxed-in collapsed text adornment is rendered in place of the hidden text.  In the screenshot above, the boxed-in “/**/” is a collapsed multi-line comment node.  More...

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?  More...

We’ve just made the WPF Studio 2009.2 build 512 maintenance release available.  This maintenance release focuses on various bug fixes, but we’ve also made some significant updates to SyntaxEditor for WPF, mostly under the hood.

SyntaxEditor for WPF work-in-progress features

SyntaxEditor should now perform much better when using custom classification taggers. 

We also have started laying the framework pieces needed to support code outlining (folding).  The three main components of this are collapsed text, intra-text spacing/adornments, and an outlining manager.  Note that these components are work-in-progress, may still change, and currently are undocumented.

Collapsed text refers to the ability to “hide” a region of text so that the caret skips right over it.

Intra-text spacing means being able to insert custom-sized spacers in between certain text characters.  Then you can render custom adornments in those spaces.  This feature allows you to insert images or other content (even controls) right in the document.

Let’s take a look at a sample we’re developing to be released once these features are all complete:

Here we use one tag to collapse a region of text, another tag to reserve some space in its place, and an adornment manager to render the “…” box in that space.

The third component to code outlining is an outlining manager, which is what we’re working on right now.  The outlining manager will help drive the other features to provide a result like above.

The neat thing about our design is that you can use collapsed regions and intra-text spacing/adornment features independent of outlining.  This opens up some interesting possibilities.

Look for blog posts in the future discussing these features in more detail once we make some more progress on the outlining manager.  And again, please note that they are currently undocumented.  We’ll document them and provide samples once they have been finalized.

We’ve just published a WPF Studio 2009.2 maintenance release that contains some updates and fixes for all known issues since the first WPF Studio 2009.2 release.  Existing customers can download the update from their Organization Purchases page.

Details on the update are available in the announcement forum post.

What we accomplished

In Quarter 4 of 2009 we mostly focused on getting the WPF Studio 2009.2 release out. 

SyntaxEditor for WPF saw major updates to the Language Designer application, along with a ton of new features including tagging, adornments, squiggle lines, and much more.

Some screens and video showing the future SyntaxEditor for Silverlight control were made available.  This control shares most of the same framework as the WPF version of SyntaxEditor.

Docking/MDI for WPF added floating document support similar to the functionality found in Visual Studio 2010.  All floating windows can now be maximized and custom chromes can be used for rendering the window border/titlebars.

Editors for WPF added a new AnalogClock controls, and used this new clock on the DateTimeEditBox dropdown when appropriate.  A new editbox and a list control were added to support easy end user editing of enumeration values.

Navigation for WPF added a new ZoomContentControl that provides an intuitive interface for scrolling/zooming any large content, such as maps, pictures, reports, etc.

Ribbon for WPF added support for multi-row in-ribbon galleries.

All WPF controls received VS 2010 and Blend 3 designer support.

The SyntaxEditor .NET Languages Add-on for WinForms added C# 4.0 and VB 10.0 parsing support.

What’s coming next

In the coming months, we plan on expanding our product line, getting more into the Silverlight realm, and updating Ribbon to use newer Office 2010 features.

Newsletters

The December 2009 newsletter gave an overview of the WPF Studio 2009.2 release along with other recent updates and future plans.

Blog post list

Here is a quick categorized list of blog postings made in this quarter.  More...

We found a couple issues with the WPF Studio 2009.2 release from last night and just deployed updated ZIPs with the fixes.  If you downloaded WPF Studio before 1pm EST on 12/17/2009, please re-download the build, uninstall what you have, and install the new one.  Note that the build numbers are the same for the redeployed build.

We apologize for the inconvenience.

WPF Studio 2009.2 and just been released and is available for download now.  This new major version has some enormous updates in it, the larger of which we’ll describe below.

See our related forum announcement for exact details on what updates were made in each product.

	Docking/MDI for WPF Floating document functionality like in Visual Studio 2010 Document windows in 2009.2 support the ability to be dragged out of the MDI area and floated.  This allows end users to move documents to secondary monitors.  This has been a very highly-requested feature by our end users.  The functionality matches what is found in Visual Studio 2010. All floating windows can now be maximized, and a custom chrome is used to render floating window titlebars and borders. This previous blog post talks about the new features in more detail.
	Editors for WPF AnalogClock control added A new AnalogClock control is now included that can render a clock with hour, minute, and optional second hands.  The hands can be dragged to set new time values. EnumListBox control added EnumListBox is a new control that makes it extremely easy to pick between enumeration values using checkboxes or radio buttons.  It even can render alternate display text based on Description attributes. EnumEditBox control added The new EnumEditBox control is an editor implementation that has a dropdown with an EnumListBox.  When the dropdown is closed, the selected enumeration value is displayed. DateTimeEditBox updated to display clock in dropdown The popular DateTimeEditBox control has been updated to display a time entry section on its dropdown when a date/time or time-only value are edited in it. The DateTimeEditBox will automatically toggle whether a month calendar and/or clock are available in the dropdown based on the date/time format used for the control.
	Navigation for WPF ZoomContentControl added Need a control that provides an intuitive interface for navigating around large content?  The new ZoomContentControl has what you need.  It is extremely configurable, and allows for easy zooming/panning and other operations. This sort of control is perfect for browsing around content such as large pictures, maps, reports, designers, and more. Custom buttons (like the Open Image button above) or other controls can be easily embedded in the UI.
	Ribbon for WPF In-ribbon galleries add support for multiple display rows You asked for it and we delivered.  In-ribbon galleries now support more than one display row if the height of the items can fit more than one row. The rows even animate up and down as you scroll between them.
	SyntaxEditor for WPF Tagging mechanism added Tagging is an exciting new feature area that allows any text range in a document to be “tagged” with custom data.  This data could be anything from custom classifications to something that indicates a squiggle line should be drawn when the text is rendered. Adornments mechanism added The new adornments features allow any custom UI elements to be inserted into the text area surface.  This is one of the most exciting feature areas added to SyntaxEditor since it opens up the doors for providing amazing visualization customizations to end users.  Our favorite demo of adornments is the sample that shows how to make animated smoke puff near the caret as you type.   See this previous post that talks about a number of new samples that show off ideas for adornment usage. Squiggle line support added A built-in adornment layer supports squiggle line rendering.  Now you can “tag” document text ranges that have syntax errors and the squiggles will show up automatically in SyntaxEditor. New event sinks and improved language service design We’ve added a number of new event sinks that let your syntax language classes process when new documents or views are attached to or detached from the language.  A number of language services have been opened up so that more than one instance of a service type can be registered.  This means you could have two completion provider services in place, etc. More documentation We’ve added a lot more documentation, especially in the area of language creation.  Our language creation walk-through topic now also gives a table of common syntax language features and links to the steps/services needed to implement them.
	All controls Visual Studio 2010 and Expression Blend 3 designer support added Version 2009.2 adds designer support for Visual Studio 2010 and Expression Blend 3. New samples added We’ve added a number of new QuickStarts for the various products to demo controls and features.  SyntaxEditor alone is up to about 55 full source samples.

Upgrade Notes

Since 2009.2 is a major new version, 2009.1 customers will need new license keys to use the 2009.2 version. 

If you are an existing customer and have an active subscription, you can log into your Actipro account and there should be a link near the top of your Organization Purchases page allowing you to request a free upgrade to 2009.2.

Alternatively if your subscription has expired, you can order a renewal from our purchasing pages.

If you are using individual WPF products but would like to switch to either the WPF Essentials bundle or WPF Studio suite, e-mail our sales team and we’ll be happy to discuss discounted upgrade options.

The next release of SyntaxEditor for WPF, part of WPF Studio 2009.2, has a lot of major new functionality added.  A significant chunk of that deals with the addition of new text tagging and adornment layer frameworks.

What you can do to help

We’re looking for some existing SyntaxEditor for WPF customers who would like to get their hands on the latest code before it is publicly released, specifically to help us test out these new tagging and adornment features.  We’ll explain below more about what each framework provides.

If you are an existing customer and are interested in testing out the new features, please email our sales team.  Again, only do so if you plan on implementing code that uses tagging and/or adornments.

What are text tagging and adornment layers?

Text tagging is the ability to associate some data (a tag) with ranges of text.  Our built-in tagging mechanism makes it easy for you to provide tagged ranges both using virtualization and without.  An example of text tagging would be to mark certain ranges of text as parse errors.  Text tagging is a logical way of marking text, and can also be paired with adornment layers that can provide custom rendering over tagged text areas.

Adornment layers, first described in this post, are a way to render any UIElement within the text area of a SyntaxEditor.  Adornments can be ordered and sandwiched between any other adornment layers.  As an example, the caret and selection are both adornment layers.  The caret has a Rectangle that blinks to render the caret.  The selection is a complex Path.

The neat thing about tagging and adornments is that the sky is the limit on what custom rendering you can achieve in the editor.  Let’s take a quick look at some of the full source QuickStarts that will be included in the next version, all of which demo tagging and/or adornment layers.  More...

A couple months ago we make a post on our blog asking if anyone would be interested in a port of our SyntaxEditor for WPF control over to Silverlight.  We’ve had some tremendous feedback, both via comments on that posting and via e-mail, so we’ve moved forward with development on the product.

What is SyntaxEditor for Silverlight?

As many of you know, SyntaxEditor for WPF is the premier syntax-highlighting code editor control for the WPF platform.  It is being constructed with a new next-generation object model based on our years of experience with SyntaxEditor for WinForms, the market leader in the WinForms platform.  We’ve made a lot of posts about SyntaxEditor for WPF’s features in this blog.

The Silverlight version of SyntaxEditor is essentially a large subset of SyntaxEditor for WPF’s object model.  For those who have used SyntaxEditor for WPF, the entire text/parsing library is completely converted to Silverlight.  This means all the document, syntax language, parsing, etc. code works in Silverlight exactly the same as in WPF.  The UI layer is mostly the same as well.  Many of the UI features found in the WPF version are already implemented where possible in the Silverlight version.

What can I use it for?

The possibilities are endless.  Want to have a web-based source code browser where you can edit your code from anywhere right in the browser?  Want to build a web-based IDE?  Want to just use the editor in read-only mode to provide rich visualization of code?

SyntaxEditor for Silverlight would fit right into any of those conceptualizations.

Let’s see the video!

Without further ado, let’s take a look at the first video of SyntaxEditor for Silverlight.  In this video, I fire up the editor in an Internet Explorer page and do some typing and selection.  Note that syntax highlighting is being driven from a syntax language that was created with our WPF Language Designer application. 

I also have the smoke text effect enabled, which shows off the new adornment layers feature we’re currently working on.  The smoke text effect is not something you’d normally have enabled in a production application, but it is a neat example of what you can do with our adornment layer framework.

Summary

There still is a lot of work to do on the Silverlight version before it would be production-ready.  However we are trying to make some progress on it each day.  And as we add any new features to the WPF version going forward, we are adding them to the Silverlight version at the same time.

We don’t have any target release dates at this point, but keep your comments coming and we’ll continue posting more details on the control.

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.  More...