Bryan Wood - DevExpress Charts Blog

Previously I announced the DXGauge Suite and if you’ve seen some of the recent charting webinars you’ve seen a little bit of what is possible with the new suite. One of the things that is really interesting is the flexibility of the WPF and Silverlight and how easily that flexibility translates to our gauge controls.

In the example above gauges have been styled so that they look like knobs and using the interactivity options they behave as knobs as well allowing you to manipulate them to change the various parameters of the radio.

Enabling Interactivity

In the case of the radio we are using the IsInteractive property of the ArcScaleNeedle and Marker (the linear gauge representing the station frequency) on the individual gauges. The IsInteractive property is quite powerful, just by setting it to true you get the ability to drag and move the needle or optionally you can click on the scale and the needle will move to the point that was clicked. Now obviously, the radio is a bit more advanced. It takes advantage of the ValueChanged event on the ArcScaleNeedle object as well. Just like it sounds the ValueChange event fires any time the value of the needle is changed. When you combine the IsInteractive property and the ValueChanged event you unlock a lot of possiblities, one of them allowing you to manipulate and adjust a gauge as if it were a dial. Additionally you’ll notice that as the “TUNE” dial is adjusted the station marker moves to the left and right this is accomplished by using the built in two-way binding available in WPF and Silverlight.

Code

<dxe:CheckEdit x:Name="chkEnableAnimation" Grid.Row="0" Content="Enable Animation" />
<dxga:CircularGaugeControl Grid.Row="1">
    <dxga:CircularGaugeControl.Model>
        <dxga:CircularEcoModel />
    </dxga:CircularGaugeControl.Model>
    <dxga:CircularGaugeControl.Scales>
        <dxga:ArcScale>
            <dxga:ArcScale.RangeBars>
                <dxga:ArcScaleRangeBar IsInteractive="True">
                    <dxga:ArcScaleRangeBar.Animation>
                        <dxga:IndicatorAnimation Enable="{Binding ElementName=chkEnableAnimation, Path=IsChecked}" />
                    </dxga:ArcScaleRangeBar.Animation>
                </dxga:ArcScaleRangeBar>
            </dxga:ArcScale.RangeBars>
            <dxga:ArcScale.Markers>
                <dxga:ArcScaleMarker IsInteractive="True">
                    <dxga:ArcScaleMarker.Animation>
                        <dxga:IndicatorAnimation Enable="{Binding ElementName=chkEnableAnimation, Path=IsChecked}" />
                    </dxga:ArcScaleMarker.Animation>
                </dxga:ArcScaleMarker>
            </dxga:ArcScale.Markers>
            <dxga:ArcScale.Needles>
                <dxga:ArcScaleNeedle IsInteractive="True">
                    <dxga:ArcScaleNeedle.Animation>
                        <dxga:IndicatorAnimation Enable="{Binding ElementName=chkEnableAnimation, Path=IsChecked}" />
                    </dxga:ArcScaleNeedle.Animation>
                </dxga:ArcScaleNeedle>
            </dxga:ArcScale.Needles>
        </dxga:ArcScale>
    </dxga:CircularGaugeControl.Scales>
</dxga:CircularGaugeControl>

As you can see the code for creating a gauge with a needle, marker and a range bar along with enabling animation and interactivity is quite simple.

This is just one aspect of the upcoming DXGauge Suite and it is definitely a powerful one. I’ll be discussing more of the possibilities with the new DXGauge Suite soon, so keep posted and let me know what interests you.

Conclusion

Interactivity is an easy to use yet very powerful component in the Gauge Suite and will be available for both WPF and Silverlight. This and many other new features are coming to DXperience 2011 volume 1 so look for them on our blogs and in the upcoming release.

And as always if you have any questions or comments please leave them below!