The Actipro Blog

With the 2013.1 versions of our WPF and Silverlight controls coming soon, I'd like to take this time to showcase the major redesign we just did to our Sample Browser applications in both platforms.

The Sample Browser is the main project that houses the hundreds of demos and QuickStarts for our many UI control products.  While the current Sample Browser design is functional, it was built several years back and needed a refresh.  We wanted to simplify things a bit and bring more of a modern UI feel to it.

Let's take a look at the result!

Product Selection

When first starting the Sample Browser, you are brought to a Product Selection page.  Scroll horizontally to see the various control product sets we offer.  Click on a product to dive into it.  Let's click the Micro Charts product.

Product Feature Summary

The Micro Charts' Feature Summary page appears.  It has a brief overview of the product and numerous screenshot links that take you directly into the samples.  By scrolling right, we can continue to learn more about the product with bullet lists of features.

Note how the Samples section tells us that there are 29 total samples available.  By clicking the Feature Summary drop-down heading at the top, a backstage-like pane appears that lists the titles of all the samples.  Click any of the sample title hyperlinks there to jump directly to the related sample.

Let's click the Call Center demo link.

Product Sample

We now have moved directly into the related sample.  In this case, it's the Call Center demo for Micro Charts.

It's easy to browse through samples.  The Previous Sample and Next Sample buttons at the top cycle through the samples for this product.  Or as mentioned before, you can click the large heading drop-down (that currently reads Call Center in this screenshot) to see a list of links for all the samples.

Clicking the Home icon on the upper left returns us to the Product Selection page.

Other Options

The three drop-down buttons on the upper right are important too and can be used from anywhere in the app.

The Theme drop-down lets you change the current theme.  Choose from our various system, Office, or Metro themes.  And the entire app window will update immediately.  Note how the root window here is using our WindowChrome class to provide custom chrome.

The Discover drop-down provides access to various Actipro-related web sites.

The Tools drop-down gives access to documentation, several utilities (like our String Resource Browser), the Release History documents, and more.

Summary

We've put a lot of extensive work into the redesign of our Sample Browser app.  We really hope you enjoy the new modern look when you get your hands on it, upon the release of the 2013.1 version.

One of the feature areas we're adding to WPF and Silverlight SyntaxEditor controls is the ability to create indicators, which are special "tagged" regions of text that optionally display a glyph in the indicator margin or highlight the text range with special styles.

Several built-in indicator types will come with SyntaxEditor, one of them being bookmarks.

Bookmark Indicators

Bookmarks are line-based indicators, meaning they associate themselves with a single line of text.  Even as the line gets edited, they remain associated with a single full line.  They move around with the same logic found in Visual Studio's code editor.

Let's see what they look like:

In this screenshot, we show three bookmarks rendered in the indicator margin on the left.  Our default implementation of bookmarks only renders glyphs in the margin, and doesn't highlight the marked line in the text area in any way (but you could optionally do this too if you wanted).

The toggle bookmark button checks to see if a bookmark is already on the caret's line.  If there is one, it removes it.  If there isn't one, it adds a new bookmark.  Clear all bookmarks removes them all from the document.

The previous and next bookmark buttons use our indicator search API to find another indicator based on an initial line.  In this case, we pass in the line that contains the caret and find the previous/next indicator.  If one is found, we move the caret to that line.

Summary

These features will be in the 2013.1 versions of the WPF and Silverlight SyntaxEditor controls.

We are still working on the design and implementation of indicators.  If you have any feature suggestions, now is the time to contact us!  Please comment here or e-mail us with your ideas and questions.

In the 2012.2 version of our WPF Controls, we added two Metro themes.  The Metro Light theme renders similar to VS 2012's gray window, and the Metro White theme renders similar to an Office 2013 window.

We've had several requests for a dark theme, and we've delivered one for the upcoming 2013.1 version of our WPF Controls!

Sample Screenshots

Here is the main SyntaxEditor demo with the Metro Dark theme active.  We updated the Sample Browser to show off use of dark SyntaxEditor highlighting styles for some common languages when the Metro Dark theme is activated.  More...

Today I'd like to show off another new feature coming to the WPF and Silverlight .NET Languages Add-on:  Visual Basic text formatting!

As mentioned in our previous post, a similar feature is being added for the C# language.  Text formatters beautify code, making it more readable by adjusting whitespace.

Visual Basic Text Formatting Example

Let's see an example of some messy VB code loaded up in SyntaxEditor:

After formatting the document, the result is:

That's much nicer!

Intelligent Modifications

As described in a previous post, the best part about the text formatting feature is that SyntaxEditor only adjusts ranges it needs to.  It doesn't do a mass replace of the whole document.  For instance on line 23, it tweaks the leading whitespace on the line and removes the space before the end parenthesis, but doesn't touch the rest of the line.

All of the various text change operations involved in the formatting are merged into a single atomic text change that is added as a single undo stack item.  This makes it easy for the end user to quickly undo any formatting changes that were made.

Summary

These features will be in the 2013.1 versions of the WPF and Silverlight SyntaxEditor .NET Languages Add-on.

Today I'd like to show off a new feature coming to the WPF and Silverlight .NET Languages Add-on:  C# text formatting!

Text formatters beautify code, making it more readable by adjusting whitespace.

C# Text Formatting Example

Let's see an example.  Here is some messy C# code loaded up in SyntaxEditor:

When we format the document, the result is:

That's a lot more readable!  The text formatter also has an option for whether open curly braces appear on the same or next line.

Intelligent Modifications

The best part about this feature is that SyntaxEditor only adjusts ranges it needs to.  It doesn't do a mass replace of the whole document.  For instance on line 7, it does a tweak of the leading whitespace on the line but doesn't touch the rest of the line.

All of the various text change operations involved in the formatting are merged into a single atomic text change that is added as a single undo stack item.  This makes it easy for the end user to quickly undo any formatting changes that were made.

Summary

These features will be in the 2013.1 versions of the WPF and Silverlight SyntaxEditor .NET Languages Add-on.

We're working on new features for our 2013.1 control releases and today I'd like to show off a new feature coming to the WPF and Silverlight .NET Languages Add-on in that version.

C# Var Quick Info

As seen in the screenshot below, hovering over var keywords will now show the resolved type.

In this case, the resolved type for the randomNumbers variable is List<int>, which we aliased to Int32List above in the usings.

Visual Basic Dim Quick Info

Similar features have been added for the Dim keyword in VB.

In this screenshot, the j variable is being assigned an Int32.

Summary

These features will be in the 2013.1 versions of the WPF and Silverlight SyntaxEditor .NET Languages Add-on.

One thing we always wanted to do was write a small free application that used SyntaxEditor (our syntax-highlighting code editor control) and could be used as a notepad replacement.  While we have many nice demos for the control product, we've never made an app that is real-world and usable by the masses.  That is, until now.

UPDATE:  Code Writer is now live on the Windows Store.  Download it for free!

Today I'd like to share a picture of an exciting Windows 8 app running on my Surface RT:

We've created a text and code editing application for Windows 8 that uses a port of our WPF and Silverlight SyntaxEditor as its primary interface for editing documents.  And I must say, it's beautiful.

Yes, it works on any Windows 8 platform, including ARM devices such as seen in the picture above.  And best of all, our upcoming app will be free to use! 

This gives us an opportunity to show off SyntaxEditor's capabilities and heavily test the WinRT/XAML port of SyntaxEditor.  Once SyntaxEditor for WinRT/XAML is released, you will be able to add text/code editing features into your own Windows 8 apps.

We currently are putting the finishing touches on the app for a first release and hope to have it out soon.  We've worked up a very nice way for interacting with documents, and will dive into it all with some screens once the app is submitted for certification.

If you are a customer and are interested in beta testing SyntaxEditor for WinRT/XAML, please contact our sales team.  A beta may not be ready for a while, but we'd like to start collecting info on interested customers now.

In our previous blog post we talked about how our WPF RibbonWindow has been completely rewritten from scratch using WindowChrome for the next 2012.2 maintenance release.  The post also showed off the new Metro White theme that will be included with our WPF controls, matching the visual appearance of Office 2013.

In today's post, we'll look at another new feature coming in the next maintenance release:  an updated Ribbon Backstage.  In the screenshot below, you can see the new Metro White theme in action along with the updated Backstage visuals.

There are several things of note here.  First, the Backstage has been modified so that when it is open, it will fully cover the RibbonWindow's StatusBar.  This applies to all themes.  For the Metro themes, a large back arrow button has been added to the top left of the Backstage to allow returning to the normal document view.  The ribbon, QAT, etc. also automatically disappear in Metro themes while Backstage is open.

These enhancements will be in the upcoming WPF controls 2012.2 maintenance release build 571.

WindowChrome Usage

In our previous post, we discussed all the great new feature additions coming to our WindowChrome implementation.  Another related item for the upcoming maintenance release is that we've completely reimplemented how RibbonWindow works and now have it using WindowChrome to manage all its custom chrome API calls.

This means that the same implementation of custom chromes will be used for both RibbonWindow and regular windows that use WindowChrome.  You'll get outer glow effects in Metro themes, full Aero snap/dock support, etc.  Everything described in our previous post.

New Metro White Theme

In the first 2012.2 version release, we added a new Metro Light theme that can be applied app-wide to all Actipro and native WPF Controls.  For the upcoming maintenance release, we've added a new Metro White theme that is similar to Metro Light but gives windows and toolbars more of an Office 2013 appearance.  Take a look:

If you are an Actipro customer, once you get the new features you'll be able to toggle the theme to Metro Light and instantly make your ribbon windows and other controls look like the above.  That's really slick!

Summary

These great new features will be part of the next WPF controls 2012.2 maintenance release build 571, due soon.  But that's not all… we have some more major announcements that we'll make for this version soon.

We've been hard at work the past several weeks on developing feature enhancements for the next maintenance releases of our products.  The next several blog posts will show off a number of them.  In today's post, I'd like to discuss our WindowChrome class that was added in the 2012.2 version of our WPF controls.

What is WindowChrome?

WindowChrome is a class that can be attached to any existing normal WPF Window.  Once attached, it takes over rendering of the Window.  In the first 2012.2 version, the chrome was just designed to work with the new Metro Light theme, also added in 2012.2.  Here's a screenshot of our SDI Code Editor sample with WindowChrome used to render the Window and the Metro Light theme in effect:

It looks great… there is semi-transparent outer glow border support, Aero snap support, ability to update the window border and status bar backgrounds to reflect application states, and much more.  But we still had a lot of plans to make it even better.  And that's what we've done for the next maintenance release!

New Features

All Themes Supported

As mentioned above, the first release of WindowChrome only supported the Metro Light theme.  In our code updates, WindowChrome now supports any Actipro theme (all system themes, Office blue/black/silver, etc.).

This is an example of switching the application theme to Office Blue.  See how WindowChrome has fully taken over the rendering of the window?

You'll notice that the outer glow disappeared in this particular theme.  By default the outer glow will only show on themes that flag they want outer glows, which at the current time is only the Metro Light theme.  A property on WindowChrome also allows you indicate if you want outer glow or not.

Title Bar Content

A new property has been added to allow you to inject custom title bar area content.

For instance, in this screenshot, we've inserted a Search textbox and a … button.

Aero Glass Support

This next version of WindowChrome also has full support for Aero glass.  By default, Aero Glass support is disabled but it can be enabled by toggling a simple boolean property.  There also is a property that determines how far into the window the Aero glass extends.  This becomes important for another major announcement we'll post soon.

Aero Snap and Dock Support

Any window that has a WindowChrome attached fully supports Aero snap and dock functionality.  Meaning you can drag the window up to the top of your desktop and release to maximize it.  Once maximized you can drag it back to a restored state.  You can double click borders (or the outer glow when present) to snap window edges to the desktop sides.  Everything works exactly as expected.

Interop Support

Even with the semi-transparent outer glow effects applied, WindowChrome still fully supports interop content like WinForms controls that aren't normally possible on windows that have transparency enabled.

Summary

All the new features described above will be included in the upcoming WPF controls 2012.2 build 571 maintenance release, which is due soon.