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.

In the previous Heat Maps post, we talked about the new MicroHeatMapPresenter control's size changing abilities. In today's post, we'll look at how the color and size changing abilities can be combined to display two sets of data in the same heat map.

Color and Size-Based Heat Maps

MicroHeatMapPresenter controls can change both color and size at the same time to display two different data values with each marker.  The sizing and color changing behaviors function independently, so they can represent two completely separate data sets.

In the example above, fifteen separate MicroHeatMapPresenter controls have been customized to render as circles and change size and color in order to display both the number of items sold, and the profit per item for three products in five cities. 

The color and size of each control is calculated based on the position of their given color and size values in the range of color and size data respectively.  Note that the tooltip displayed can be customized to display the formatted color and size values, minimums, and maximums.

Summary

Combining the color and size changing behavior of the MicroHeatMapPresenter control allows you to combine multiple instances into an engaging heat map.  A heat map using color and size changing markers displays a lot of data while still being easy to understand and feeling intuitive.  The MicroHeatMapPresenter control allows for the customization of the color gradient to choose from, the maximum size to render at, the shape to render, and the tooltip to display.  These many options allow for the creation of unique and effective heat maps that are excellent at displaying many kinds of data.

Heat maps are now available as of the latest WPF and Silverlight maintenance releases.  Download an evaluation and try them out!

WPF Studio 2012.1 build 562 has been released and is now available for download. Several very nice new controls and enhancements are part of this build.

This build has the following major new features:

• Micro Charts: Added new MicroHeatMapPresenter control that facilitates the creation of heat maps where each cell renders color and/or size differences to reflect data values.
• SyntaxEditor: Added a new NavigableSymbolSelector control, which can be used to provide type/member drop-down support for a language.
• SyntaxEditor: Added a INavigableSymbolProvider language service, related types and samples.
• SyntaxEditor .NET Languages Add-on: Implemented an INavigableSymbolProvider service on both the C# and VB languages, allowing for NavigableSymbolSelector support.
• All: Improved designer support compatibility with VS 2012.

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

In the previous Heat Maps post, we introduced the MicroHeatMapPresenter control and talked about its color changing abilities. In today's post, we'll look at the MicroHeatMapPresenter's ability to change size to display data values.

Size-Based Heat Maps

As discussed in the previous post, the MicroHeatMapPresenter control is designed to be a single cell in a larger heat map.  Heat maps, in addition to cells that change color, can also use cells that change size to represent data.  MicroHeatMapPresenter controls can be customized to have a different shape and render at varying sizes in order to display smaller and larger values in a data set.

In the example above 16 separate MicroHeatMapPresenter controls have been customized to render as circles and change size in order to display the net worth of four companies over time.  Each control has been customized to be given the same maximum size, minimum, and maximum values.  Each control also has a unique value that it uses with the minimum and maximum values to find what percentage of the maximum size it should render as.

Summary

The size changing behavior provides a very intuitive way to display data values.  Larger values displayed with larger markers creates a chart that gets the information to the audience as fast and with as little confusion as possible.  In addition, many different built-in shapes are available for customization, giving even more options to specialize the chart to make it easier to understand and/or better display the data.

UPDATE:  Heat maps are now available as of the latest WPF and Silverlight maintenance releases.

In our next blog post, we'll take a look at combining color and size changing effects to render two sets of data.

In our previous multi-part series on our new Micro Charts product, we walked through all the features included in the product for the first WPF and Silverlight releases.  In today's post, we're going to start a new series on an additional control being added to the product in the next maintenance release, one for constructing great-looking heat maps.

Color-Based Heat Maps

The new MicroHeatMapPresenter control is designed to be a single cell in a larger heat map.  A heat map is a type of chart that displays data values through varying colors. The colors of the different cells change over a gradient with some colors representing higher values than others.  In our control you can completely customize this gradient to use whatever colors best suit your needs.

In the example above, fifteen separate MicroHeatMapPresenters have been organized in a grid layout to create a heat map displaying the temperatures of three servers over the course of a day.  Each control has been customized to be given the same color gradient, minimum, and maximum values.  Each control also has a unique value that it uses with the minimum and maximum values to find which color along the gradient it should render with as its background color.

Summary

Heat maps are a great way to visualize data in a way that is easy to understand. They can be used to highlight outliers with stronger colors and direct attention toward them, or to display changing trends with a flowing color scheme. With the freedom to choose any colors in any sequence to create a gradient, you can customize the MicroHeatMapPresenters to create a heat map that displays the data exactly how you want. Just bind some properties and our control takes care of the rest.

UPDATE: Heat maps are now available as of the latest WPF and Silverlight maintenance releases.

In the next post of this series, we'll take a look at the control's size changing abilities.