WinForms Gauges The Basics

The XtraGauges control ships with nearly 100 built-in presets that are extremely easy to use and customize. All you need to do is drop the control onto a form, pick a style, set its properties and thats it! In this video, Ill demonstrate how to create 3 gauges of different types, how to set their style and how to dynamically modify their value at runtime. 1. Ill start with a new WinForms Application. 2. I drop a Gauge Control onto the form, invoking the Preset Manager. 3. The gauge style presets are listed in the left pane of the window.

4. Upon selecting any of the presets, the right pane gets populated with all the available skins.

Copyright 2008 Developer Express Inc

Learn more at devexpress.com

ALL RIGHTS RESERVED

5. For our first gauge, Ill click on CircularFull and select the Shining Dark skin. 6. I click on the Load button and the gauge is added to the form. 7. Ill add two more gauges. 8. Let it be . . . a Digital Gauge. 9. Ill select the same skin as before. 10. The next one, Ill select a Linear Vertical Gauge. 11. Ill specify a different skin for this one let it be Deep Fire. 12. And thats it! 13. My gauge controls have been customized and are ready to be used. 14. Now, Im going to show you how to change the value of each gauge during runtime. 15. To do this, Ill drop a Text Edit Control onto the Form. Well use this to enter new values for our gauge controls. 16. Next Ill add a button control and change its Caption to Set Gauges.

Copyright 2008 Developer Express Inc

Learn more at devexpress.com

ALL RIGHTS RESERVED

17. I double-click on the button to create its Click Event Handler. 18. The Circular Gauge is capable of displaying one or more scales with tick marks and labels. 19. A scale in the Circular Gauge is represented by the ArcScaleComponent Class. 20. For this demo, Ill use the first, outer scale and set its Value property to the number entered in the textbox.

21. The Digital Gauge displays its value as text, therefore the value of the textbox is passed on without any conversion.

22. The Linear Gauge is similar to the Circular Gauge in which multiple scales are supported. 23. Ill use the Value Property of the LinearScaleComponent Class to set the value of the first scale to the number entered in the text edit control.

24. And Im done! 25. I run the application to see the result.

Copyright 2008 Developer Express Inc

Learn more at devexpress.com

ALL RIGHTS RESERVED

26. I can enter a number in the textbox and all three gauges are set to that value.

For more information, please refer to the XtraGauges Documentation (http://www.devexpress.com/Help/?document=XtraGauges). Thanks for watching and thank you for choosing DevExpress!

Copyright 2008 Developer Express Inc

Learn more at devexpress.com

ALL RIGHTS RESERVED