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.

Today I'd like to take some time to take a glimpse at an excellent product that is being constructed by Patterson Consulting, one of our long-time customers.  This application really shows off what kind of top-notch user interfaces you can create with Actipro's WPF controls and themes.

Actipro Product and Feature Usage

Test Design Studio is currently written in WinForms and utilizes Actipro's WinForms controls.  The screenshot above shows their next major version, which is a WPF rewrite of the application with an updated appearance and new features. 

Our Docking/MDI product implements the docking tool window and tabbed MDI interface, and our Ribbon product is used as the primary toolbar interface.  SyntaxEditor is used to provide a Visual Studio-like code editing experience.  Patterson even wrote custom syntax languages that have fully-automated IntelliPrompt, code outlining, and more.

And the theme is spectacular.  They took our new Metro theme (recently shipped in the 2012.2 version of our WPF Controls), tinted it a bit, and voila… the result is a modern-looking app that blends perfectly with Windows 8, and other tools like VS 2012 and Office 2013.

About Test Design Studio

From Boyd Patterson, owner of Patterson Consulting:

Test Design Studio is an IDE for QuickTest® Professional scripts, VBScript files, Quality Center workflow scripts, WinRunner® scripts, and GUI Map files.

Our product focusing on bringing a rich development environment to our customers.  The challenges of achieving this product are great enough on their own, that we do not need to be burdened with core UI development.  Fortunately, Actipro Software provides many of the controls we need, so we can focus on building our product and not designing UI controls.

We have been working on a complete rewrite of the UI to use WPF technology, and Actipro Software controls have helped ease that burden.  Their Ribbon control provides a great replication of the infamous controls, and SyntaxEditor provides the editing horsepower we need to match the experience our customers demand.  Thanks to their application wide theme support, even the use of native controls look consistent with the rest of the UI.  Our new application is not yet complete, but we already have a great foundation and are excited to release this to our customers.

Details about the product (including the current WinForms version also powered by Actipro controls) are available at:  http://www.patterson-consulting.net/tds

Showcase Your Own Apps

Do you have an application powered by Actipro UI controls that you'd like to showcase on our blog?  Please contact us with a couple screens and a brief description so that we can discuss it.  We always love to see our customers' creations!

WPF Controls 2012.2 has been released and is now available for download!  This version adds a number of new controls, some great new SyntaxEditor functionality, a new Metro light theme, and other theme updates.

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

Bullet Graph

A bullet graph is a special kind of bar chart used to display a single value and make comparisons to one or more related values, such as last year's mark, a goal or target, or a projected future value. 

Examples could include annual income or expenses data, sales data, and performance ratings data.

Box Plot

A box plot is a chart used to visualize major statistical values, such as the mean, median, and quartile values, of a data set. The mean and median can be shown as bars perpendicular to the chart. The upper and lower quartile values form the edges of a box that contains the middle half of the data.

The spacing between the different parts of the box plot help indicate the degree of spread in the data. Box Plots are particularly useful for displaying distributions of a group in a compact way. This is good for creating charts that compare a group of data such as the performance of salespeople, heights of a group of people, temperatures along a latitude, and more.

Candlestick Chart

Candlestick charts are used to visualize price movements over time, such as changing stock or currency values.  The edges of the box define the opening and closing values, with the wicks extending to the highest and lowest values reached. 

The box is shaded differently depending on if the close was higher than the open.

IntelliPrompt Code Snippet Selection Session

In the 2011.2 version, we added code snippet template session functionality where snippets of code can be inserted into the editor.  The snippets may contain editable fields that the end user can tab between and modify.

In 2012.2, we've added a new code snippet selection session that allows an end user to display a popup containing all the available code snippets. 

They can type in what they are looking for or can use the completion list as appropriate to locate a snippet.  Once a snippet is selected, a template session begins for it.

Structure Matchers

Structure matchers are a new language service added that allows a language to locate matching delimiter sets.  This is a feature that is harnessed by other SyntaxEditor editing functionality such as move/select to matching bracket and delimiter highlighting.  A built-in implementation is included that makes it easy to match common bracket pairs for a language.

Move/Select to Matching Bracket

When the caret is next to a delimiter that is part of a delimiter set (as identified by a structure matcher), the end user can choose to move or select the caret to the matching bracket via built-in edit actions.

Delimiter Highlighting

Delimiter highlighting checks the text next to the caret to see if it is part of a delimiter set (as identified by a structure matcher).  In cases where a delimiter is found, it and its related delimiters can be highlighted so that the end user can easily identify the code block.

This highlighting commonly includes brackets (parentheses, curly braces, etc.) but can also include more advanced highlights such as #if…#else…#endif blocks.

.NET Languages Add-on Support for C# 5.0 / VB 11.0 Syntax

The latest official C# 5.0 and Visual Basic 11.0 language specifications have added some new keywords and functionality to the languages.  Both languages add asynchronous procedure support (via async/await) and VB adds iterators. 

The latest .NET Languages Add-on parser is set up to properly parse the new syntax, and the resolver is able to work with async results for supporting automated IntelliPrompt.

.NET Languages Add-on Resolver Improvements for Anonymous Function Results

The .NET Languages Add-on's resolver can now examine anonymous functions to try and derive the Type of their result.

This helps further improve the resolver's ability to provide accurate automated IntelliPrompt when working with LINQ and other scenarios.

New Metro Light Theme

A complete new theme for the Metro style appearance, inspired by the latest Visual Studio and Office versions, is included in 2012.2.  It is optional and is shipped in its own assembly, similar to our Office themes.

As with our other themes, you can activate native control theming so that all the controls in your app, whether they are the built-in Microsoft controls or Actipro controls, will render consistently and with a great new Metro-like appearance.

WindowChrome Class

We have a new chrome class that can be used to alter the appearance of any normal WPF window.  At the moment it's designed for use only when the new Metro Light theme is active, and has these features:

• Ability to convert any Window to use a custom chrome like above when the Metro theme is active.
• Window border color (when active) that matches the StatusBar color.
• Semi-transparent outer glow effect for window border.
• Window resizing via the outer glow effect area.
• StatusBar background, window border, and glow effect colors can all be changed based on app state.
• Full Aero snap support.
• Ability to render interop (WinForms, etc.) controls properly, even though transparency is used.

We plan on expanding the chrome class with more features in the future too.

Assets Added for Making Rounded Editors

We've added several new resource assets and updated all our themes so that it's possible to achieve rounded corners on any edit-related control, such as TextBox, SyntaxEditor, DateTimeEditBox, etc.

Now that we've released our first set of UI controls for Windows 8 apps, our next development priority is to finish off the new controls and features coming to our WPF controls in their 2012.2 version.

In today's post, we're going to take a first look at some major theme updates that are ready for 2012.2.  In the screenshot below you can see the new Metro Light theme combined with a new class that can convert any Window to render with this custom chrome:

There are a lot of new specialized features attached to what you see above such as:

• A complete new theme for the Metro style appearance, inspired by the latest Visual Studio and Office versions.
• Ability to convert any Window to use a custom chrome like above when the Metro theme is active.
• Window border color (when active) that matches the StatusBar color.
• Semi-transparent outer glow effect for window border.
• Window resizing via the outer glow effect area.
• StatusBar background, window border, and glow effect colors can all be changed based on app state.
• Full Aero snap support.
• Ability to render interop (WinForms, etc.) controls properly, even though transparency is used.

We'll get into more details on how all this works in future posts.  But trust me, if you want your apps to take on the latest Metro-like appearance, you'll definitely want what's coming.  We're very excited for these updates.  They will be part of the 2012.2 versions, which should be available in the next several weeks.

UPDATE:  Version 2012.2 is live and available for download now.