The Actipro Blog

All the latest UI control development news from Actipro

WPF Controls 2013.2 Released

BlogPostBanner

Actipro WPF Controls 2013.2 have been released and is now available for download. 

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

ProductHeadingWPFCharts

PieChart

A new pie chart control has been added to complement our other bar, line, area, and scatter chart offerings.

Pie

The pie chart supports advanced features like multiple label positioning and display options, legend display, nesting of multiple series, hierarchical data, and more.

DonutChart

Donut

Donut charts have been added as well.  All the same features found in pie charts are found in donut charts, and the hole radius is fully configurable.

Axis Tick Labels for Percentage Stacked Charts

PercentageStackingChart

When using stacking bar or area charts with the percentage axis option, the percentage value labels now display on the axis.

Improved Scatter Chart Samples

ScatterChart

A new and improved scatter sample has been added.

ProductHeadingWPFRibbon

Improved Support for Touch

Ribbon buttons have been improved to support touch-based tapping.  Popups on all ribbon controls have also been updated to be positioned properly on tablet PCs that have the "right handed" option set.

ProductHeadingWPFSyntaxEditor

Web Languages Add-on - Advanced JavaScript Language Implementation

A new advanced JavaScript language implementation has been added to the Web Languages Add-on.

JavaScript

The syntax language features syntax highlighting, parsing, AST building, syntax error reporting, code outlining, delimiter auto-complete, smart indent, text formatting, and code block selection.

See a summary of the new language in this previous blog post.

Delimiter Auto-Completion

Delimiter auto-complete is where the user types a start delimiter and a related end delimiter is auto-inserted after the caret.

DelimiterAutoComplete

In the screenshot above, the { character was typed and the } character was auto-inserted.  This feature has been added to several of the languages in our add-ons.

Delimiter Indent Provider

Curly brace auto-indent can now be easily added to any language, and it has been added to our C# and JavaScript languages in the add-ons.

When the caret is in the middle of a curly brace pair, pressing Enter normally will move the close curly brace to the next line with the caret right in front of it.  If you have an indent provider for your language, the close curly brace will be indented properly however it's still not an ideal situation because you generally want the caret to be on its own line before the close curly brace's line.

CurlyBraceIndent

This scenario is where curly brace auto-indent comes in!  This feature injects a new blank line in between the braces, indents one more level, and positions the caret on that line.

Indentation Guides

Indentation guides are subtle vertical lines that render at each tab stop on lines prior to the first non-whitespace character.  They help visually align the indentation of visible code blocks.

You can see the silver indentation guide lines in the tab stops within this screenshot:

IndentationGuides

Whitespace-only lines are intelligent and render indentation guides based on the tab stop level of surrounding text.

Improved Code Fragments Performance

Lexer and token scanning performance has been improved when using our code fragments feature, which allows you to set header and footer text to surround the document's text for purposes of parsing.

Improved Printing Support

A custom highlighting style registry can now be set explicitly for printouts.  This is ideal if your editor is in a dark theme since then you can use an alternate highlighting style registry designed for light backgrounds on printouts.

Rendering of printouts has also been improved when the syntax highlighting option is off.

.NET Languages Add-on - IntelliPrompt Parameter Info for Array Indexers

Automated parameter info support has been added when the end user edits array indexers.

.NET Languages Add-on - Customizing Completion Items Sample

A new sample is now included that shows how to add and remove items from the C# and VB automated IntelliPrompt completion list.  This ability lets you filter out certain completion list items or add your own custom ones before the list is displayed to the end user.

ProductHeadingWPFThemes

Improved WindowChrome to Not Cover Auto-Hidden Windows Taskbar

In the past versions, WindowChrome (and thus RibbonWindow) would cover up an auto-hidden Windows taskbar when the window was maximized.  This issue has now been resolved, and the auto-hidden taskbar is now visible.

ProductHeadingWPFViews

InertiaScrollViewer

The InertiaScrollViewer control is a drop-in replacement for the native WPF/Silverlight ScrollViewer control but allows you to scroll content using touch, similar to what you're used to on Windows 8 and mobile devices.

It reacts to dragging, flicking, mouse wheel, and normal mouse operation via the scrollbars. You can adjust properties like EasingFunction, VelocityTimeRatio, and VelocityDistanceRatio to fully control how inertia scrolling looks and feels.

InertiaScrollViewer

In the screenshot above, you can see how our main Sample Browser pages have been updated with InertiaScrollViewer, allowing full touch interaction and navigation within them.

TaskDownload TaskLiveDemo TaskBuyNow

Filed under: Actipro, New features, WPF

Enhancing the Windows Workflow Designer

BlogPostBanner

Last week we had a customer write us who was rehosting the Windows Workflow Designer in their own WPF application.  See these MSDN notes for documentation on how to do so.

The customer wanted to be able to use SyntaxEditor to create a custom VB Expression editor since it would allow them to have features like syntax highlighting and automated IntelliPrompt capabilities (via SyntaxEditor's .NET Languages Add-on).

In addition, the customer asked about being able to use our Docking/MDI product to add docking windows to host the designer's ToolBox and Properties windows.

We spent a few minutes and modified the Microsoft sample for rehosting the Windows Workflow Designer to integrate Actipro controls into it, and here's what we came up with:

Workflow

You can see how tool windows (fully dockable) host the ToolBox and Properties views and the designer is hosted in the tabbed MDI area.  In addition, SyntaxEditor (in single-line mode and with the .NET Languages Add-on) is used to provide automated IntelliPrompt features for editing expressions. 

This really improves the UI experience for end users.  If you are rehosting the Windows Workflow Designer in your own WPF app and would like the full source of our integration example, please write us and we'll be happy to send it to you.

UPDATE:  Check out this newer blog post showing off enhancements for automated variable IntelliPrompt features.

TaskDownload TaskLiveDemo TaskBuyNow

Filed under: Actipro, WPF

SyntaxEditor - Curly Brace Auto-Indent

PostBannerSyntaxEditorDevNotes

Several weeks ago, we announced a new Delimiter Auto-Complete feature coming to the 2013.2 version of SyntaxEditor for WPF and Silverlight.  This feature is great because it improves typing efficiency by auto-inserting end delimiters when the start delimiter is typed.

We have been wanting to improve the typing experience even more and in today's post, I'd like to announce that curly brace auto-indent is also coming.

What Is Curly Brace Auto-Indent?

When the caret is in the middle of a curly brace pair, pressing Enter normally will move the close curly brace to the next line with the caret right in front of it.  If you have an indent provider for your language, the close curly brace will be indented properly however it's still not an ideal situation because you generally want the caret to be on its own line before the close curly brace's line.

This scenario is where curly brace auto-indent comes in!  This feature injects a new blank line in between the braces, indents one more level, and positions the caret on that line.

Sample Usage

Let's start with a regular JavaScript function declaration.  Note how the caret in in between a curly brace pair.

AutoIndent1

In the past, if you pressed Enter, you'd get this:

AutoIndent2

With the new curly brace auto-indent feature, instead of the above when you press Enter, you will get now this:

AutoIndent3

The end user is immediately able to start typing content for the function.

Summary

These new features will be available in the 2013.2 version of SyntaxEditor, and are built into our advanced C# and JavaScript languages for this version.

They can easily be added to any custom language as well with a few lines of code.

TaskDownload TaskLiveDemo TaskBuyNow

SyntaxEditor - Indentation Guides

PostBannerSyntaxEditorDevNotes

In today's post I'd like to announce another new feature coming to the 2013.2 version of SyntaxEditor for WPF and Silverlight:  indentation guides.

What are Indentation Guides?

Indentation guides are subtle vertical lines that render at each tab stop on lines prior to the first non-whitespace character.  They help visually align the indentation of visible code blocks.

You can see the silver indentation guide lines in the tab stops within this screenshot:

IndentationGuides

Whitespace-only lines are intelligent and render indentation guides based on the tab stop level of surrounding text.

Summary

These new features will be available in the 2013.2 version of SyntaxEditor!

TaskDownload TaskLiveDemo TaskBuyNow

SyntaxEditor Delimiter Auto-Complete

PostBannerSyntaxEditorDevNotes

One great thing about having our free Code Writer Windows 8 text/code editing app out is that we now get a lot of feedback directly from end users of the SyntaxEditor control.  Normally we only receive feedback from our own customers, who are developers integrating SyntaxEditor and our other UI controls into their own apps.

What is Delimiter Auto-Complete?

A common request we've received is to support delimiter auto-complete.  Delimiter auto-complete is where the user types a start delimiter and a related end delimiter is auto-inserted after the caret.  This is especially helpful when working on mobile tablets like a Surface since it means less overall typing is required to output the same code.

The 2013.2 version of SyntaxEditor for WPF and Silverlight includes a built-in implementation of delimiter auto-complete via a language service that can be customized and assigned to any syntax language.

Sample Usage

In this example, we'll use our new advanced JavaScript language, also coming in the 2013.2 version and described further in this post.

First, we'll type a ( character:

Delimiter1

You can see how the related end ) is also auto-completed and the caret remains in the middle of the two delimiters. 

Now if I type a ) character, it recognizes that this end delimiter was auto-completed, and instead of making another text change, skips right over the previously auto-completed end delimiter.

Delimiter2

Now if I type another ), it will insert a new character since it recognizes we are now outside of the auto-completed delimiter range.

Delimiter3

Let's delete that extra end delimiter and type an open curly brace to see the resulting auto-completed close brace:

Delimiter4

Say I made a mistake and wish to quickly delete the pair.  If I press Backspace then it recognizes I'm backspacing over a delimiter that created an auto-complete and it removes the completed end brace as well. 

Delimiter5

That's neat stuff!

Summary

These new features will be available in the 2013.2 version of SyntaxEditor!

TaskDownload TaskLiveDemo TaskBuyNow

JavaScript Language Add-on - Feature Summary

PostBannerSyntaxEditorDevNotes

In our last post, we revealed that a new advanced implementation of the JavaScript language is being added to the Web Languages Add-on in the 2013.2 version.

JavaScript

In this post we'll look at which features will be part of the language's first release.

Syntax Highlighting

As with all our other syntax languages, a lexer tokenizes the code and allows for colorization of items such as keywords, comments, strings, etc.  This makes code much easier to read.

Parsing

A full parser that conforms to the ECMAScript 5.1 standard is included.  The parser runs in a worker thread, and even handles things such as implicit semi-colon insertion.

AST Generation

The parser outputs a complete abstract syntax tree (AST) of the document.  This AST is stored with the document and can be traversed to view the JavaScript code structure.

Syntax Error Reporting

Errors in syntax are returned by the parser and can be displayed in error lists.  In addition, squiggle lines are rendered under the errors and mouse hovers over the squiggles reveals the error description.

Code Outlining

All JavaScript functions are code outlined so that they may be collapsed (folded).  The outlining margin helps the end user by providing some visual structure to the code.

Smart Indent

Pressing Enter at the end of a line indents properly on the next line.

Text Formatting

A text formatter is included that beautifies JavaScript code.

Code Block Selection

Use Ctrl+Num+ and Ctrl+Num- to expand and collapse the text selection over the ancestor statement/block/function hierarchy.  This sort of functionality is described in detail in this post.

Delimiter Auto-Complete

A new feature (being added in 2013.2 with support for all languages) allows for delimiter auto-complete.  For example, this means that when you type a ( character, the end ) character is inserted immediately after the caret for you.

Summary

The advanced JavaScript language will be added to the Web Languages Add-on in the 2013.2 version of SyntaxEditor!

TaskDownload TaskLiveDemo TaskBuyNow

JavaScript Language Add-on is Coming to SyntaxEditor

PostBannerSyntaxEditorDevNotes

Great news… a new language add-on for JavaScript, specifically the ECMAScript 5.1 standard, is coming to SyntaxEditor.  Let's take a first look:

JavaScript

In this screenshot, you can see features like syntax error reporting and code outlining active.  This new language will allow you to instantly plug in an advanced JavaScript editing experience to your apps that use SyntaxEditor.

The advanced JavaScript language will be added to the Web Languages Add-on in the 2013.2 version of SyntaxEditor!

TaskDownload TaskLiveDemo TaskBuyNow

Silverlight Controls 2013.1 Build 151 Released

BlogPostBanner

Silverlight Studio 2013.1 build 151 has been released and is now available for download.  Several great new enhancements are part of this build.

This build has the following major new features:

  • Charts: Added the ability to provide strings and complex types as chart data using the new XYGroupedAxis.
  • Charts: Added support for multilevel XPath and YPath.
  • SyntaxEditor: Added new auto-correct features, with a pre-defined AutoCaseCorrector language service for performing character case correction.  Easily add auto-case correct features to custom languages.
  • SyntaxEditor: Updated the sample VB, VBScript, and PowerShell languages to perform auto-case correction.
  • SyntaxEditor: Added new code block selection features, which let languages that implement an ICodeBlockFinder service expand/contract the selection to logical code blocks via Ctrl+Num+ and Ctrl+Num-.
  • SyntaxEditor: Added a new free Markdown syntax language definition.
  • SyntaxEditor: Made performance improvements in numerous areas.
  • SyntaxEditor .NET Languages Add-on: Added an IAutoCorrector language service implementation for VB that case corrects keywords.
  • SyntaxEditor .NET Languages Add-on: Added ICodeBlockFinder language service implementations for C# and VB.
  • SyntaxEditor .NET Languages Add-on: Updated the resolver to handle the implicit value parameter in property setters.
  • SyntaxEditor .NET Languages Add-on: Improved the C# text formatter.
  • SyntaxEditor Web Languages Add-on: Added ICodeBlockFinder language service implementations for XML.

See the announcement post for the detailed list of enhancements and updates.

TaskDownload TaskLiveDemo TaskBuyNow

SyntaxEditor - Auto-Case Correct

PostBannerSyntaxEditorDevNotes

Last week we posted about a new Markdown syntax language and new code block selection features coming to our SyntaxEditor code editor in the next 2013.1 maintenance releases of our WPF and Silverlight control products.

In today's post, I'd like to show off another major new feature that will be available:  auto-case correct.

Auto-Case Corrector Services

In the upcoming version, a new AutoCaseCorrector language service is included that can perform case-correction on documents as editing occurs.  This feature works out of the box on any languages (including your own custom ones) that use dynamic lexers, where the case sensitivity of patterns is set to AutoCorrect.

The new language service class can also be inherited and updated to work with programmatic lexers as well, which is what we did in the Visual Basic language in the .NET Languages Add-on.

Auto-correct features will be enabled (if they are implemented for a language) as long as the new SyntaxEditor.IsAutoCorrectEnabled property is set to true.

Case Correct Example

Let's look at a Visual Basic example of this new feature in action.

AutoCaseCorrect1

In this screenshot, I typed in all lowercase on line 23.  Next I pressed the Down key to move to the next line.

AutoCaseCorrect2

The auto-case corrector noticed that I edited the line and moved the caret to a new line, so it went back to auto-correct the previous line.  Note how the For, As, Integer, and To keywords were all cased appropriately.

The auto-correct text change was performed as an undoable change too, meaning the user could undo (Ctrl+Z) it if they weren't happy with the update.

Summary

Auto-case correct is a wonderful addition for any languages that use case-insensitive keywords, such as Visual Basic.  It will greatly improve the end user's editing experience, and is enabled on our Visual Basic, VBScript, and PowerShell languages.

This and other features are ready to go for the upcoming 2013.1 maintenance release, due soon.

TaskDownload TaskLiveDemo TaskBuyNow

SyntaxEditor - Markdown Language

PostBannerSyntaxEditorDevNotes

Yesterday we talked about the new code block selection features coming to our SyntaxEditor code editor in the next 2013.1 maintenance releases of our WPF and Silverlight control products.

Today I'd like to announce that we're including a new free sample syntax language for Markdown as well.

Markdown Syntax Highlighting

Markdown

The screenshot above demonstrates some of the Markdown syntax highlighting features that are included.

Summary

If you have an app that edits Markdown source, then SyntaxEditor with its free new Markdown language will improve the editing experience for your end users.

This and some other exciting unannounced features are ready to go for the upcoming 2013.1 maintenance release, due soon.

TaskDownload TaskLiveDemo TaskBuyNow