About Us

Actipro Software
is a leading provider of .NET user interface controls for the WPF, UWP, Silverlight, and WinForms frameworks,
and is most well-known for their SyntaxEditor syntax-highlighting code editor control.

We've had a lot of customers throughout the years ask us for a sample that could show how to harness our SyntaxEditor .NET Languages Add-on and its automated IntelliPrompt within an ASP-style server tag context. This is especially useful for any sort of template generating scenario.

We had an internal sample that we would send customers upon request, but several months back, we cleaned it up, enhanced it, and added it as a new QuickStart sample. In this post, let's have a look at the QuickStart sample that was added to the SyntaxEditor for (WPF, Silverlight, and WinRT/XAML platforms) in the 2014.2 version showing how to achieve automated IntelliPrompt within ASP-style server tags.

Usage Example

In the animated presentation below, you can see how there is a basic parent language whose lexer only knows to tokenize and color the word "date" as a keyword. In real-world usage, the lexer could be made to fully colorize the text like normal. The lexer has hooks that cause a transition to the C# language found in our .NET Languages Add-on when ASP-style delimiters are encountered.

Both <% %> and <%= %> style tags are shown in this example. What happens behind the scenes is that the parent language's parser will code generate C# code. It will make a C# class named "__Generated" and a method named "__WriteOutput". All the text of the parent language is output within "Response.Write" method calls. C# code in the server tags is injected directly. The resulting full C# code is placed in a separate in-memory document and parsed. Finally the resulting parse data is returned, along with mapping data to know how offsets between the server tag range in the source document and those in the parsed C# document align.

Then there are several customized C# IntelliPrompt providers that know how to use that mapping data and translate offsets so that automated IntelliPrompt is fully functional within the server tag regions of the main source document, yet based on the generated C# code.

Tricky stuff, but it works great!

Summary

The full source sample described above was added in the first v2014.2 release of our WPF, Silverlight, and WinRT/XAML controls and is available for you to check out.

The WinRT XAML port of our popular SyntaxEditor syntax-highlighting code editor control is nearly development complete!

While the SyntaxEditor control itself has been used as the foundation of our free Code Writer app for a while now, we haven't had the SyntaxEditor control available to our customers yet to use in their own apps. That's about to change. The 2013.2 release of our WinRT XAML controls will include all the recent updates to our Charts and Micro Charts, as well as the new SyntaxEditor port and ports of its .NET Languages Add-on and Web Languages Add-ons.

First Look at a Demo

Let's see a screen of the WinRT version of our SDI Code Editor demo:

Here we have a SyntaxEditor contro showing off the advanced C# language that is part of the .NET Languages Add-on. With SyntaxEditor you can easily add text and code editing functionality to your Windows 8.1 apps. It supports custom language creation, and as seen above, has some pre-built languages available with features like automated IntelliPrompt popups.

Beta Testers Wanted

We're really excited to get this finished up and into your hands. If you are interested in helping us beta test SyntaxEditor for WinRT XAML, please contact our sales team (if you haven't already). We expect the beta to be ready in the next week or two.

Major new features are described below. See the announcement post for the detailed list of enhancements and updates.

Our new full-size Charts product has been added, allowing you to create stunning charts for your apps. See this announcement post and this first look post for a couple other chart screenshots.

Line Charts

A line chart renders quantitative data as a series of points connected by line segments. Lines can be straight, curved, or stepped. Markers can optionally be displayed based on type (such as first/last, high/low, negative, etc.).

Scatter Charts

Scatter charts render data points where each point is represented by a marker. Markers can use numerous built-in shapes or can be set to use custom shapes.

Area Charts

An area chart is a derivative of a line chart, where the area between the line and axis is filled in. As with line charts, areas can also be rendered using straight, curved, or stepped lines

Bar Charts

A bar chart displays rectangular bars with lengths proportional to the values they represent. Bar spacing can be set and the bars can be changed to render horizontally instead.

Indicators

A rich object model for supporting indicators has been added. Indicators are special "tagged" regions of text that optionally display a glyph in the indicator margin and optionally highlight the text range with special styles. Built-in indicators include bookmarks, breakpoints, and current statement indicators. Custom indicators can easily be created as well.

Line Terminator Backgrounds

When a style that has a background encompasses a line terminator, it now will render the background of the line terminator's virtual character.

A new property BackgroundSpansVirtualSpace property has been added to highlighting styles that when set to true, will extend the background over a line terminator to cover all the way to the right edge of the view.

Trim All Trailing Whitespace

A new edit action has been added to trim all trailing whitespace in the entire document, regardless of the current selection.

CollectionTagger<T> Enhancements

The CollectionTagger<T> class has received a large number of new methods that make it easier than ever to manage a collection of tagged regions.

.NET Languages Add-on - Text Formatting

Text formatters have been added to the C# and VB languages in the .NET Languages Add-on, which beautify code by adjusting whitespace and making it more readable.

Our new full-size Charts product has been added, allowing you to create stunning charts for your apps. See this announcement post and this first look post for a couple other chart screenshots.

Line Charts

A line chart renders quantitative data as a series of points connected by line segments. Lines can be straight, curved, or stepped. Markers can optionally be displayed based on type (such as first/last, high/low, negative, etc.).

Scatter Charts

Scatter charts render data points where each point is represented by a marker. Markers can use numerous built-in shapes or can be set to use custom shapes.

Area Charts

An area chart is a derivative of a line chart, where the area between the line and axis is filled in. As with line charts, areas can also be rendered using straight, curved, or stepped lines

Bar Charts

A bar chart displays rectangular bars with lengths proportional to the values they represent. Bar spacing can be set and the bars can be changed to render horizontally instead.

Indicators

A rich object model for supporting indicators has been added. Indicators are special "tagged" regions of text that optionally display a glyph in the indicator margin and optionally highlight the text range with special styles. Built-in indicators include bookmarks, breakpoints, and current statement indicators. Custom indicators can easily be created as well.

TextFormattingMode Support

SyntaxEditor's text rendering has been updated to support Silverlight 5's TextOptions.TextFormattingMode property setting. This feature allows for improved text clarity.

Line Terminator Backgrounds

When a style that has a background encompasses a line terminator, it now will render the background of the line terminator's virtual character.

A new property BackgroundSpansVirtualSpace property has been added to highlighting styles that when set to true, will extend the background over a line terminator to cover all the way to the right edge of the view.

Trim All Trailing Whitespace

A new edit action has been added to trim all trailing whitespace in the entire document, regardless of the current selection.

CollectionTagger<T> Enhancements

The CollectionTagger<T> class has received a large number of new methods that make it easier than ever to manage a collection of tagged regions.

.NET Languages Add-on - Text Formatting

Text formatters have been added to the C# and VB languages in the .NET Languages Add-on, which beautify code by adjusting whitespace and making it more readable.

In our previous post, we talked about the new NavigableSymbolSelector control being added to the next 2012.1 builds of SyntaxEditor for WPF and Silverlight.

To sum up, the control implements drop-down lists that can be wired up to a SyntaxEditor and will list available symbols within the document. As the caret moves, the drop-down selection is updated. The end user can select a symbol from a drop-down and the editor caret will navigate to that symbol. All of this functionality is very similar to the type/member drop-downs found in Visual Studio.

Best of all, this functionality can easily be implemented for any custom language. The last post showed an example of using the control for a custom language. In this post, we'll take a look at the built-in implementation for the C# and VB languages found in the .NET Languages Add-on.

Screenshots

Here's how the NavigableSymbolSelector control looks when bound to a SyntaxEditor that has the .NET Languages Add-on's C# language loaded:

There are two drop-downs present. The one on the left shows the types and the one on the right shows the members within the currently-selected type. More...

Our next 2012.1 builds of SyntaxEditor for WPF and Silverlight will be adding a new ancillary control to the SyntaxEditor product: NavigableSymbolSelector.

Navigable Symbols

Navigable symbols are symbols declared within a document to which the end user may wish to move their caret. For instance in a language such as C#, navigable symbols would be things like type and member declarations.

A new language service has been added that can optionally be implemented. Its only task is to return navigable symbols for a document that uses the language. It's implemented in such a way that a multi-level hierarchy of navigable symbols can be created.

This sort of feature can be used to help drive the UI of external controls such as a type/member drop-down or even a document outline treeview. These sort of external controls can help the end user visualize a document's structure, and the content for each item in the controls can fully utilize rich markup (images, colors, etc.).

NavigableSymbolSelector Control

The new NavigableSymbolSelector control is our implementation of a control similar to Visual Studio's type/member drop-downs. It attaches to a SyntaxEditor instance and checks to see if the language supports the new INavigableSymbolProvider service. If so, it uses that service to populate its drop-down(s).

A "Simple" Language Sample

Let's see how this looks in our "Simple" language sample. We've updated one of our Getting Started series samples to implement this new service and show drop-down UI (via NavigableSymbolSelector) within a toolbar:

For our "Simple" language, we've told the NavigableSymbolSelector to show a single drop-down, which will render the list of functions declared in the editor.

Run-Time Functionality

Basically if we do these simple tasks:

Add a NavigableSymbolSelector control to the UI.

Bind it to a SyntaxEditor instance.

Implement the INavigableSymbolProvider language service on the current language.

We get all this functionality for free from the NavigableSymbolSelector control:

Automatic display of all symbols defined in the current document, that updates as document changes occur.

Symbols are sorted alphabetically within the drop-down.

As the editor caret moves, the selected symbol in the drop-down is automatically updated to be the closest enclosing or nearby symbol.

When the end user clicks on a different symbol in the drop-down, the caret navigates to that symbol declaration.

When the caret is not directly within a symbol's declaration but is near one, it will appear grayed out. This helps the end user visualize whether they are actually in a valid symbol declaration or not. (WPF only)

We've designed this control to work directly with the new INavigableSymbolProvider language service. This allows any custom language to fully support the control.

Summary

These new features will be in the next 2012.1 builds of our WPF and Silverlight controls.

By default the control displays two drop-downs, and we'll show this in our next blog post, where we demonstrate the implementation of the INavigableSymbolProvider language service and usage of the new NavigableSymbolSelector control with our .NET Languages Add-on's languages.

We're very excited to announce a new feature for our SyntaxEditor .NET Languages Add-on (WPF and Silverlight versions) that has been in development for quite a while: LINQ queryexpression automatedIntelliPrompt!

This feature has been heavily requested by customers and we're close to delivering it, for both C# and VB. Let's see it in action.

Code Setup

Here is the test code wrapper we'll use for these samples:

using System.Collections.Generic;

using System.Linq;

publicclass Customer {

publicint CustomerID;

publicstring Name;

public IEnumerable<Order> Orders;

}

publicclass Order {

publicint OrderID;

publicstring Description;

publicdecimal Total;

}

publicclass Linq {

publicvoid Test(IEnumerable<Customer> customers) {

// LINQ samples here

}

}

All the code in the screenshots below will be inserted into the comment location in the snippet above.

Examples of Automated IntelliPrompt

First, let's start typing a new LINQ query expression:

The customers parameter shows up as an IEnumerable<Customer>. Now we'll start a where clause:

The cu range variable shows up properly in the completion list as a Customer.

After typing a dot to see the cu variable's members, we see fields like Name and Orders. More...