Telerik RadGauge + Data Binding

Question

So I'm trying to update my RadRadialGauge. It will display data (using an animated Needle) that is being retrieved on a real-time basis. I have a RadChartView that currently works by using TimeStamp and Value properties to draw the Chart. When I add a chart, sometimes I might want to add a few based on the variable I'm watching. For instance, if I want to watch Motor Speed and Output Frequency, I have to add multiple vertical axes. Part of my code to handle the data binding for the RadChartView is here:

var lineSeries = new LineSeries();
lineSeries.CategoryBinding =
    new PropertyNameDataPointBinding() { PropertyName = "TimeStamp" };
lineSeries.ValueBinding =
    new PropertyNameDataPointBinding() { PropertyName = "Value" };
lineSeries.ItemsSource = (chart.Chart as GuiAnalogQueue).Records;

The rest of the code is just appearance handling, and then at the end I add the LineSeries to my RadChartView.

Now, I'm trying to port this code, in a way, over to RadGauge. I'm not sure how to bind the values to the Needle so the needle moves when the Value changes.
In the XAML I've tried Value="{Binding Value}" I've tried adding binding to the ValueSource varible. Also I have done needle.Value = chart.Chart.Value;

I can't figure it out, so any help is appreciated.

UPDATE

This is what I'm trying to accomplish. My Records collection has two properties, Value and TimeStamp. I'm trying to bind my Value in the Records to the needle Value. This is my approach to do it programmatically:

public void InitializeCharts(ChartsVM charts, Theme theme)
{
    DataContext = charts;
    foreach (cVM chart in charts.Charts)
    {
        Binding value = new Binding();
        value.Source = (chart.Chart as GuiAnalogQueue).Records;
        value.Path = new PropertyPath("Value");
        needle.SetBinding(Needle.ValueProperty, value);
    } 
}

However, when I do this, it is not changing the needle.Value at all. My Records is the collection that uses NotifyPropertyChanged("Records"), so I would expect my needle to change everytime Records is changed.

As you see in my original post, those three lines take care of binding the variables to ChartView charts, however I can't get the RadGauge to work.

Answer 1

In short, I found that Needle's don't use any type of collections for their Values. So when I tried setting up a Source to be inside of a collection, and a Path, it wasn't really liking that. Instead, I added a property right before I add the Value to the records collection (in my update values function). That way I could set my binding up as:

Binding value = new Binding();         
value.Source = (chart.Chart as GuiAnalogQueue);         
value.Path = new PropertyPath("AnalogValue");
needle.SetBinding(Needle.ValueProperty, value); 

That reads as, the Needle will bind its Value property with the AnalogValue property that is in the Source--chart.Chart as GuiAnalogQueue.

Hope this helps if you've been directed to this page.

Answer 2

Here is a basic example of using the RadRadialGauge.

---

XAML:

---

<telerik:RadRadialGauge x:Name="radialGauge"
                    Width="300"
                    Height="300"
                                Grid.Column="0">
        <telerik:RadialScale Min="1"
                        Max="12">
            <telerik:RadialScale.Indicators>
                <telerik:Needle x:Name="needle" />
                <telerik:Pinpoint/>
            </telerik:RadialScale.Indicators>

        </telerik:RadialScale>
    </telerik:RadRadialGauge>

As you can see i have a radial gauge with a radial scale defined. Radial Scale has a needle as the indicator. The RadialScale is from 1 to 12. Note that i have given a name for the needle. We will use this to push values from the code behind.

In this example i am using a dispatcher timer to tick every 1 second and i am generating a random value between 1 to 12. Here is the code behind snippets.

---

code snippet:

---

Following variables are declared at the window level

TimeSpan interval = TimeSpan.FromSeconds(1);
DispatcherTimer timer;
Random rnd = new Random();

I have defined event handlers for Window Loaded & Unloaded events. On Window Load, i start the timer.

    void OnWindowLoad(object sender, RoutedEventArgs e)
    {
        timer = new DispatcherTimer();
        timer.Interval = interval;
        timer.Tick += new EventHandler(Timer_Tick);
        timer.Start();
    }

Here is the timer tick function:

    private void Timer_Tick(object sender, EventArgs e)
    {
        timer.Stop();

        SetNextValue();

        timer.Start();
    }

Here is the SetNextValue function:

    private void SetNextValue()
    {
        int minValue = 1;
        int maxValue = 12;
        int nextValue = rnd.Next(minValue, maxValue);
        needle.Value = nextValue;
    }

In the Unloaded event handler i am stopping the timer.

    void OnWindowUnload(object sender, RoutedEventArgs e)
    {
        timer.Stop();
    }

Output: when you run the app, you will see the needle changing its position because we are generating random numbers from 1 to 12 every second and we set the generated number to needle's value. The SetNextValue() method can be your gateway to monitoring the real value and set the needle value to that real data.

This is the basic example code i can think of to explain the radial gauge.

Hope this provides the answer you are looking for.

---

Update:

---

Here is an MVVM way of setting the needle value. Let the window implement INotifyPropertyChanged interface. Set the datacontext to the window itself

public partial class MainWindow : Window, INotifyPropertyChanged

public MainWindow()
    {
        InitializeComponent();

        Loaded += OnWindowLoad;
        Unloaded += OnWindowUnload;

        DataContext = this;
    }

Provide implementation for the PropertyChanged event like below:

public event PropertyChangedEventHandler PropertyChanged = delegate { };

    void NotifyPropertyChanged(string propName)
    {
        PropertyChanged(this, new PropertyChangedEventArgs(propName));
    }

Implement a property called NeedleValue.

    int needleValue = 1;
    public int NeedleValue 
    {
        get
        {
            return needleValue;
        }
        set
        {
            needleValue = value;
            NotifyPropertyChanged("NeedleValue");
        }
    }

In the SetNextValue - just set the newly created NeedleValue property. this will fire the property changed notification.

private void SetNextValue()
    {
        int minValue = 1;
        int maxValue = 12;
        int nextValue = rnd.Next(minValue, maxValue);
        NeedleValue = nextValue;
    }

In the XAML bind the Needle Value property to NeedleValue like below

<telerik:Needle x:Name="needle" Value="{Binding NeedleValue}" />

Hope this provides you with the answer you are looking for :)

Lohith (Tech Evangelist, Telerik India)