The Actipro Blog

All the latest UI control development news from Actipro

SyntaxEditor for WPF - Alpha testing has begun

We’re very happy to have reached the first major milestone for the SyntaxEditor for WPF product, the beginning of alpha testing!  SyntaxEditor for WPF is a syntax-highlighting code editor control similar to the Visual Studio code editor.

Yesterday we began a closed alpha test for WPF Studio customers who plan on using SyntaxEditor once it is released.

How to apply for alpha testing

If you are a WPF Studio customer and would like to apply to be an alpha tester, please e-mail us with your name, e-mail address, and the organization name under which you own WPF Studio licenses (same as your WPF Studio license’s Licensee).  Only existing WPF Studio customers may apply.  Additionally, provide a brief description of what you plan to do with SyntaxEditor, and how much time you’ll have to start working with the product. 

A requirement of being an alpha tester is that you must provide feedback on the product.  If you don’t think you’ll have the time to do so, then please don’t apply.

Again this is the first alpha test so while there is a huge amount of work already completed, there will be missing/incomplete features.  As we progress towards a beta and later an RTM, we will be adding more and more features.

SyntaxEditor for WPF current codebase size

A lot of people have asked why it’s taking so long to complete the product.  As mentioned in past blog posts, we are not just making something to get it out and selling.  We are really trying to design a next generation editor that will be the definitive standard for this type of control, mostly on par with VS 2010’s editors capabilities.

We did a quick scan this morning and our current codebase size for the SyntaxEditor and Text assemblies (the two pieces of this product) are already a total of 70,000 lines in the C#, VB, and XAML code files.  That should give you an idea of the scope of this product.

Filed under: Actipro, In development, WPF

SyntaxEditor for WPF - Loading dynamic languages

We’ve been hammering out the dynamic language object model over the past few days.  If you are familiar with SyntaxEditor 4.0, dynamic languages are languages in which the lexical parser is defined via patterns, both explicit and regular expression patterns.  It’s a fast way to get any custom language configured and can be loaded from XML definitions.

Dynamic languages become dynamic lexical parsers

In SyntaxEditor for WinForms, dynamic languages all had to inherit DynamicSyntaxLanguage.  In our next generation design, while the object model of dynamic languages and how you define lexical states/patterns is mostly the same, we’ve moved things out a level so that they are all part of a dynamic lexical parser and not specifically on the language class.  This means that for any given inherited SyntaxLanguage class, you’d be able to swap in and out a dynamic lexical parser for another lexical parser.

Say you start on a custom SyntaxLanguage to use with SyntaxEditor.  You could prototype your lexer out with the “dynamic” lexical parser, defining the patterns to use for parsing tokens in an XML file.  Then once you develop your language more, say you want to squeeze out some enhanced performance.  All you’d do is create a programmatic lexical parser for your language and swap it in place of the dynamic lexical parser.  Typically programmatic lexical parsers can perform faster than dynamic lexical parsers, since programmatic ones are geared and optimized specifically for a particular language.  Since the “dynamic” lexical parser is just a lexical parser now, it’s easy to swap in and out for others within the language class.

Loading SyntaxEditor for WinForms dynamic language XML definitions

We’ve written up a quick and dirty class to deserialize the dynamic language XML definitions created for SyntaxEditor for WinForms.  It is able to load any dynamic language XML definition, even custom ones you’ve created.  Our WPF sample now demos loading all of the dynamic languages found in SyntaxEditor 4.0, including ones that perform language transitions such as HTML.

Html

SyntaxEditor for WPF with the HTML dynamic language definition loaded… note the multiple language transitions

We will be writing a more robust XML definition deserializer once we finalize the object model a bit more, however this update at least paves the way for closed alpha testing to finally begin after we tie up several other small loose ends!

Filed under: Actipro, In development, WPF

Sneak Peek: MaskedTextBox in Editors for WPF

Another control we are working on as part of the Editors for WPF product is the MaskedTextBox control. Built from scratch, this control allows user input to be restricted based on a regular expression pattern.

The regular expression supports simple literals and character classes, in addition to quantifiers (*, +, ?, etc) and alternations (a|b). For example, the following regular expression will match a U.S. phone number with or with a preceding area code or 1:

([(]\d\d\d[)] |(1-)?\d\d\d-)?\d\d\d-\d\d\d\d

Valid entries for this regular expression include:

  • 555-1212
  • (703) 555-1212
  • 703-555-1212
  • 1-703-555-1212

By default, the non-option regex elements will be presented using a configurable prompt character or glyph. Additionally, literal characters will be displayed when appropriate and are not required to be entered by the user.

1

A MaskedTextBox with the regex defined above, with no user input

When "5" is entered three times, the control fills in the three required regex elements and moves the caret over the dash, since it's a literal character and is required.

2

A MaskedTextBox with the regex defined above, with "555" typed as input

When "(70" is entered, then the left parenthesis indicates that the first entry in the regex alternation must be taken. Therefore, the proceeding "70" are entered in the area code. Additionally, two new literal characters are added, the ")" followed by a space, since they are required for that branch of the alternation.

3

A MaskedTextBox with the regex defined above, with "(70" typed as input

Finally, when "1-70" is entered, then the "1" would initially be associated with one of the required regex elements outside the alternation. But, when the "1" is followed by a "-" then it must take the second alternation branch, thus allowing "70" to be entered as the area code.

4

A MaskedTextBox with the regex defined above, with "1-70" typed as input

Prompt character/glyph

The prompt indicator can be any printable character, a custom Geometry (as seen above), or can be excluded all together. Additionally, the brush used for the prompt indicator can be defined separately from the foreground brush for the text. This allows the prompt indicator to have a subtle appearance, so it does not distract from the entered text.

Literal completion

By default, any literal characters will automatically be inserted when required. This saves the user from having to needlessly type common characters. It is also possible to require that the literal characters be entered manually. Therefore, the user must type every character in the regular expression into the MaskedTextBox.

Use with parts editor

The MaskedTextBox will be leveraged by the parts-based editors to help restrict and validate user input. So that things like the year part of DateTime parts-editor, only allows digits. Additional hooks will be available to verify that the "digits" actually equate to a valid year. This hooks will be available for general use, so that restricting and validating input will be a snap.

Tags: ,
Filed under: Actipro, In development, WPF

WPF RadioButtonList enhancements

Build 4.5.0484 of WPF Studio added some very nice enhancements to the RadioButtonList control, which I’ll describe below.

The RadioButtonList is essentially a ListBox that has been templated so that its items appear like radio buttons.  The selected item in the RadioButtonList has its related radio button circle checked.

Bullet vertical alignment and margin

Two new properties have been added to RadioButtonList to allow for more complex layout of the bullets relative to each item’s content.

By default bullets are aligned center and just have a small right side margin to provide space between the bullet and the content.  Now you have the ability to set the vertical alignment of the bullets to top or bottom as well.  By using the related bullet margin property, you can tweak the margin around the bullet so that it aligns vertically with the content.

Bullets

A RadioButtonList that aligns bullets to the top and sets a bullet margin

In the screenshot above, the bullets are aligned to the top and a small margin is set to ensure that the bullets line up with the bold header portion of each item’s content. 

Auto-disabling of non-selected item content

Another new feature added to RadioButtonList is an option to automatically disable the content of items that are not currently selected.

SelectFolder1

A RadioButtonList that has automatically disabled the Select button because its item is not currently selected

This feature is better explained in screenshots.  In the screenshot above, there is a RadioButtonList with two items.  The second item has a Button in its content.  Note that since the first item is currently selected, the Button has been disabled per this new feature.

SelectFolder2

A RadioButtonList that has automatically enabled the Select button because its item is now selected

In the next screenshot, the end user has selected the second item in the RadioButtonList, and therefore the Select button enables.

These new properties make it really easy to create some nice looking radio button lists with complex content.  Enjoy!

Filed under: Actipro, WPF, New features

Improved Docking/MDI for WPF WinForms compatibility

In a December blog post titled Docking & MDI for WPF – Improving WinForms interop, I discussed some of the problems with WPF in general and WinForms interop, where interop content is rendered on top of any WPF content in the same root Window.

A number of our Docking & MDI for WPF customers are using WinForms controls in their MDI area and ran into the issue where auto-hide flyouts and dock guides would render below the WinForms content.  Obviously that’s not good.

There is no easy way to fix the issue since it is a low-level WPF issue, however we have come up with design changes that sufficiently work around the problems.  Back in December, a WPF Studio maintenance release resolved the issue where auto-hide flyouts would appear below interop content in the MDI area, via a new optional property setting. 

DockGuides

Docking & MDI for WPF showing how recent code changes allow dock guides and drop targets to  appear above WinForms controls in the MDI area

Today I’m happy to announce that WPF Studio build 4.5.0484 resolves the other main issue, which is dock guides appearing below interop content.  Here is a screenshot taken today showing how dock guides and drop targets now appear above interop content, in this case a SyntaxEditor for WinForms control.

Grab the latest WPF Studio maintenance release to get this update.

Tags: ,
Filed under: Actipro, WPF, New features

WPF Studio samples now fully support Visual Basic

Visual Basic sample project added

The latest maintenance release (build 4.5.0484) of WPF Studio now contains a Visual Basic variation of the Sample Browser sample project.  We’re very happy to provide this additional variation on the sample project to help WPF developers who work in VB learn how to use our products more effectively.

Visual Basic item templates added

We’ve also added Visual Studio 2008 item templates that can be used to add new items to your Visual Basic projects.  The item templates help you quickly get started with Ribbon, Wizard, etc.

Similar item templates have been available for use in C# projects for some time now.

WPF Studio Installer Update

Another part of the changes for build 484 is to default the WPF Studio samples to install to your Documents folder.  This helps work around the issue of needing to select a non-Program Files folder when in Vista to avoid potential UAC issues for compiling sample projects.

When installing, if you wish to allow multiple users on a computer to have access to the samples, simply choose an alternate folder for the samples that is accessible to all users on your computer.

Tags:

SyntaxEditor for WPF - Context-based custom classification

One highly requested feature over the years has been to allow a way to customize or alter the highlighting styles used to syntax highlight text on the fly.  Meaning the language uses its lexical parser to provide default highlighting, and you can override it before it is displayed.

With our design of SyntaxEditor for WPF, this is now possible.

The syntax highlighting model of SyntaxEditor for WPF by default uses lexical parsing from the current language to classify text.  You can have your own custom classifiers attached that layer on top of the language results.  You can examine the language’s classification results, and add your own classifications that override them.  Let me illustrate…

ClassComments

SyntaxEditor with a custom classifier highlighting the word Actipro whenever it appears in documentation comments

In the screenshot above we have a C# language loaded.  You can see keywords, comments, etc. highlighted normally.  But note we also have a custom classifier attached.  This classifier looks at the results of the language-based classification and if it sees the word Actipro within a documentation comment, it adds its own classification, which in turn makes that text red.  So in the sample, you can see Actipro used a couple of other places in the text but it’s only highlighted for documentation comments.

ClassIdentifier

Identifiers named Actipro also highlighted

 

In this next screenshot, you’ll notice the identifier named Actipro is also highlighted.  In the QuickStart we have a CheckBox that has been checked, which told the custom classifier to look at identifiers too.

The neat thing about the classification system is that it’s virtualized and is only classifying text that displayed onscreen.

Anyhow the point of this feature is that now we have a way for you to intercept, and potentially completely alter how syntax highlighted text is presented to the end user.

Filed under: Actipro, In development, WPF

SyntaxEditor for WPF - Mouse wheel zooming - Part 2

In the blog, we recently discussed a new feature added to SyntaxEditor for WPF:  mouse wheel zooming.  Following the initial post on the feature we’ve done a few more enhancements.

Animated zooming effects

We added the ability for you to specify a Duration over which a zooming animation takes place.  So as you rotate your mouse wheel (while holding Ctrl) to change the zoom level, each zoom level change will smoothly animate over this duration. 

You can optionally set this Duration to 0ms to prevent animation and instead, jump directly to zoom levels.  However the animation is a very classy effect.  We’re sure you’ll love it.

The animation also takes place, even if you zoom the control via an external control, such as a Slider that may be in a StatusBar.

Zooming affects scrollable area only

In the previous post’s screenshot, you’ll notice that the entire control was scaled up, including scrollbars.  Based on feedback we received, we altered our code to only zoom the scrollable area of the editor. 

Zooming

SyntaxEditor zoomed in at 300% using the mouse wheel… note the zoom level adornment is in the process of fading out and the scrollbars remain at 100% zoom level 

This means that the text area and any margins that scroll will be scaled when zooming.  The scrollbars, buttons next to the scrollbars, and fixed margins (more on margins in a future post) will remain a constant size and will not scale.

Imagine the difference this feature will make when using the zoom feature while doing live code-oriented presentations, etc.

Zoom level indicator templates

As you can see in the screenshot above, we added a magnifying lens icon in the default zoom level indicator template to spruce things up.

Not only that, we also made the indicator DataTemplate-based, so you can create your own custom zoom level indicators.

Zooming2

Our Zooming Quickstart, showing a custom zoom level indicator DataTemplate in action

Thanks to everyone who provided feedback, your comments made a difference!

Filed under: Actipro, In development, WPF

Actipro Blog 2008 Q4 posting summary

We’ve been very active with the Actipro Blog over the past year and plan on continuing to use our blog for communicating what is going on at Actipro as we move into 2009.

We’d like to provide a quick categorized list of blog postings made in quarter 4 of 2008.  Note that this blog posting summary and other future blog posting summaries will be tagged under the keyword blog.

SyntaxEditor for WPF

Editors for WPF

Other WPF Products

Windows Forms Products

Media Products

Tags:

A first look at a possible XAML Icons product and browser application

Happy new year everyone.  As mentioned in this previous post, we have been looking into whether customers would like to see us provide XAML icons.  Right now we offer a very high quality raster icons product (Actipro Icons).  This XAML Icons product would be similar however the icons would be DrawingImage-based so that they could easily be used anywhere in WPF that has an ImageSource property.

You’d simply do something like this to use an icon (assuming “Paste32” is a key for one of our DrawingImages that has been exported into your application):

<Image Width=”32” Height=”32” Scale=”Uniform” Source=”{StaticResource Paste32}” />

The Actipro XAML Icon Browser

Without further ado, I’d like to present the icon browser application we’ve put together to view the icons and export them for usage.

Xaml256

The Icon Browser showing a variation of the sample Paste icon that is designed to look best around 256x256 size

The browser is really easy to use.  On the left you select the Target Size.  There are 7 size options, meaning we’ve designed 7 variations of each icon, where each variation is meant to be used at or close to the selected target size.  Target sizes range from 16x16 up through 256x256.

When a target size is selected all the available icons in that size are displayed in the list on the right.  Please note that the sampler only contains the 7 Paste icon variations.  More icons will be included in the Sampler if we do decide to pursue this product.

You can use sliders to scale and rotate the icons.  This really shows off how good they continue to look, even when animation effects have been applied.

Xaml32

The Paste icon designed to look best around 32x32 size, scaled up to 400% size and rotated 17 degrees

When you are ready to export icons for usage in your application, just select the icons to export in the list.  Then click the Export Selected button.  This exports them all to a file that you designate.  The file contains a ResourceDictionary so you simply add it to your own application, merge in the ResourceDictionary with your Application.Resources and you are good to go.

From that point on you reference the icons by their key name, using StaticResource as mentioned above.

Download the Sampler and send us your comments

We’d appreciate it if you could download the free sampler and let us know what you think, both about the icon quality as well as the Icon Browser application.  Please post comments here or email them over.

Download the beta version of the Sampler now

 

Thanks for your assistance!  Whether we pursue this product or not will be based on your feedback.

Tags: ,
Filed under: Actipro, In development, WPF, XAML