Today I would like to highlight one of the newest controls added to the WPF / Silverlight control suites in November – the RadGauge control.
RadGauge combines its rich assortment of radial, linear and numeric gauge types with very flexible layout composition abilities thus allowing you to attain a new level of data visualization quickly and easily.
Let us discuss the basics of the layout composition and how it is implemented in the gauge control.
There are three levels of controls that participate in the layout:
RadGauge is the top level class but as far as the control is concerned this is simply a container that holds the rest of the building blocks together. RadGauge can contain any mixture of layout controls (grids, panels), LinearGauge (RadialGauge) containers, and even LinearScale / RadialScale / NumericScale instances.
LinearGauge (RadialGauge) is a container that normally stores the set of linear (respectively radial) and numeric scales. One of the major goals of this container control is the ability to create common appearance for your linear (radial) gauges. The default template looks like this:
In this way you can define the background and the foreground content for all scales shown in one gauge and achieve artistic look for your gauges with different effects (e.g. place the radial image as background and add some “glassy” gradient as foreground). Note that it is not compulsory to use the LinearGauge / RadialGauge container e.g. if you prefer plain range display, you can place LinearScale / RadialScale / NumericScale instances directly in the RadGauge control content.
LinearScale / RadialScale / NumericScale instances provide all of the essential gauge logic. These controls host other elements (tick marks, labels and indicators) and provide functionality to manage appearance and positioning of these elements.
OK, let us see some examples that visualize the concepts described so far:
The most common approach to display radial gauge would be to use the RadGauge –> RadialGauge –> RadialScale hierarchy like this:
Moreover, you can mix various gauge visuals and layout controls like this:
Hope this overview helps.