Windows Phone 7 MVVM #7 - RadGauge

Today’s RadControls for Windows Phone 7 MVVM post is brought to you by the smart tag:

Now of course you must be wondering why a smart tag is being highlighted?  Great question!  As part of the Telerik RadControls for Windows Phone 7 suite, RadGauge is an integral data visualization component that can be used to show a variety of different information with either a linear or radial gauge model.  Perhaps the best part about RadGauge is that our development team didn’t just publish a quick component with a few properties, rather this versatile control allows you to have as many or as few elements as possible showing your data, complete with the ability to template and customize everything you see.

That is great and all, but what about the smart tag?  This handy little tag pops up in your Visual Studio designer while working with RadGauge, allowing you to automatically generate over 15 different pre-defined gauge layouts, providing resources, styles, and full Xaml markup to let you quickly and easily get started with RadGauge.  Plus you can easily customize anything you see, so if our color choices, marker templates, or gauge segments don’t match your requirement, you are already 75% there with the Xaml and only need to make minor modifications.  This is also a valuable learning tool as you can quickly and easily read through any of the different generated gauges to see just how the different elements play together to form these controls.

Step 1 – Radial Gauge in 2 Clicks

Before setting up our RadialGauge, I want to also show off a linear gauge here in this post, so I’m going to create another page with a Pivot control containing two items:

Now that we’ve got a place to put our RadGauges, we’re going to take advantage of the smart tag to do the hard work for us.  I went ahead and added the following namespace:

And wrote in a quick RadGauge declaration that we can select to get the smart tag working:

I think I’ll go ahead and select the first gauge in the second row:

Awesome, right?  I am not going to bore you with stepping line-by-line through the generated Xaml, rather I’ll let you know that to make this functional and all MVVM-ish I’m going to create a business object with six inter-related points (I’ll dream up a story that makes it work) and a seventh lone-gun value that has nothing to do with the others.  Remember that for Step 3.  Once our object is created, we’ll come back, throw in a few binding statements, then add a button to create some animation by changing values.

Step 2 – Linear Gauge in 2 Clicks

If you remember our Radial Gauge example, then this will be pretty easy for you to handle.  Moving to our second Pivot item, we go ahead and write that same first line of code so that we can implement a RadGauge for the designer, then we’ll choose the third linear gauge in the first row:

After a second of Visual Studio magic we have a working gauge, again complete with styles, colors, and indicators that work as-is or can be fully customized.  Since the gauges offer so many options, customization will be another series down the road, but similar to the Radial gauge we are going to look through and see that we’ll need 3 distinct values and then a fourth that will be shared between two markers that are working together.

Step 3 – Writing Some Code

Can you believe we’ve gotten this far with only writing a handful of code?  The smart tags make this easy, but now we need to dive into our ViewModel to create some objects and code to help link our gauge implementations to data.

We’re implementing a GaugeDataClass to hold our data.  Again, all the code is going to be available in the download, but to serve our purposes for updating gauges we have the following setup:

• Double DataItem1-6 and LoneGunItem for our Radial Gauge
• Doubles LinearItem1-3 and SharedLinearItem for our Linear Gauge

And we implement INotifyPropertyChanged… so you might have a guess where this is going. ;)

Our ViewModel isn’t very complex either, as you have noticed from previous posts we are setting up a few relay commands, we have a RefreshData method to load new random values, and a public GaugeDataClass to bind to – simple, clean MVVM. 

Step 4 – Putting it all Together

Running back through everything we just worked on, we’ve added some complex gauges after only typing two stub lines of code, put together a class and viewmodel to handle our data and interactions, so what is left?  The awesome binding system that we know and love in our Xaml development can handle the rest for us.  I’m adding quick binding statements to the values of all Gauge markers as well as putting in two buttons below my Pivot control to allow for users to control data refresh.

Last but certainly not least, we’re going back to our MainPageViewModel to add RadGauge to our list to pick from.  The end result?  Gauges, MVVM-style, with very little coding on our side as far as the Xaml is concerned thanks to our sponsor the smart tag.

Check out the updated source code for this project and look forward to some more posts in this series as we continue to work through the Telerik RadControls for Windows Phone, MVVM-style!