Data Binding

The RadGauge control allows you to bind it to a set of values, which to be displayed consecutive one after another. This feature is implemented via the indicator of the scale and its ValueSource property. It is of type IEnumerable and accepts the set of values you want to display.

Additionally the indicators expose an API which allows you to control the display of the values in the ValueSource collection. Via this API you can do the following:

Here is the RadGauge instance and the sample value collection, which will be used throughout the examples in this topic:

<telerik:RadRadialGauge telerik:StyleManager.Theme="Windows8"> 
    <telerik:RadialScale Min="0" 
                         Max="100" 
                         IsInteractive="True"> 
        <telerik:RadialScale.Indicators> 
            <telerik:BarIndicator x:Name="radialBar" 
                                  Value="6" /> 
        </telerik:RadialScale.Indicators> 
    </telerik:RadialScale> 
</telerik:RadRadialGauge> 

public DataBindingSample() 
{ 
    InitializeComponent(); 
    ObservableCollection<double> values = new ObservableCollection<double>() 
    {  
        10,15,25,17,40,50,60,70,25,15,5,10,12,18,29,37,92 
    }; 
    this.radialBar.ValueSource = values; 
} 
Public Sub New() 
 InitializeComponent() 
 Dim values As New ObservableCollection(Of Double)() From {10, 15, 25, 17, 40, 50, 60, 70, 25, 15, 5, 10, 12, 18, 29, 37, 92} 
 Me.radialBar.ValueSource = values 
End Sub 

Start Playback

If you want to automatically display the values one after another with some predefined interval between them, you can use the StartPlayback() method of the indicator.

Whenever called, this method will start displaying the values form the beginning of the collection. In that case it will resume.

Here is an example:

private void StartPlayback() 
{ 
    this.radialBar.StartPlayback(); 
} 
Private Sub StartPlayback() 
 Me.radialBar.StartPlayback() 
End Sub 

Stop Playback

To stop the automatic playback of the values you have simply to call the StopPlayback() method.

Starting and stopping and than starting again the playback won't make it to contiunue from tha value it has stopped on. Instead, it will start from the beginning again.

Here is an example:

private void StopPlayback() 
{ 
    this.radialBar.StopPlayback(); 
} 
Private Sub StopPlayback() 
 Me.radialBar.StopPlayback() 
End Sub 

Move Next

The indicator's API also allows you to manually navigate through the values collection. On of the methods exposed is the MoveNext() one. It changes the displayed value to the next value in the collection, if present. Here is an example.

private void MoveNext() 
{ 
    this.radialBar.MoveNext(); 
} 
Private Sub MoveNext() 
 Me.radialBar.MoveNext() 
End Sub 

Move Previous

The MovePrevious() method is the other one used for manual navigation through the values collection. It displays the value previous to the current one. Here is an example.

private void MovePrevious() 
{ 
    this.radialBar.MovePrevious(); 
} 
Private Sub MovePrevious() 
 Me.radialBar.MovePrevious() 
End Sub 

Specifying the duration for each value

If you want every one of the values to be displayed a specific period of time you can use a colleciton PlaybackData objects as the ValueSource for the indicator. Every PlaybackData can specify own interval between values using Duration property.

Here is an example (a slight modification of the previous one):

public DataBindingSample() 
{ 
    InitializeComponent(); 
    List<PlaybackData> values = new List<PlaybackData> 
    { 
        new PlaybackData() {Value= 10, Duration=TimeSpan.FromMilliseconds(500.0)}, 
        new PlaybackData() {Value= 15, Duration=TimeSpan.FromMilliseconds(1000.0)}, 
        new PlaybackData() {Value= 25, Duration=TimeSpan.FromMilliseconds(250.0)}, 
        new PlaybackData() {Value= 17, Duration=TimeSpan.FromMilliseconds(250.0)}, 
        new PlaybackData() {Value= 40, Duration=TimeSpan.FromMilliseconds(250.0)}, 
        new PlaybackData() {Value= 50, Duration=TimeSpan.FromMilliseconds(250.0)}, 
        new PlaybackData() {Value= 60, Duration=TimeSpan.FromMilliseconds(500.0)}, 
        new PlaybackData() {Value= 70, Duration=TimeSpan.FromMilliseconds(125.0)}, 
        new PlaybackData() {Value= 25, Duration=TimeSpan.FromMilliseconds(125.0)}, 
        new PlaybackData() {Value= 15, Duration=TimeSpan.FromMilliseconds(500.0)}, 
        new PlaybackData() {Value= 5, Duration=TimeSpan.FromMilliseconds(1000.0)}, 
        new PlaybackData() {Value= 10, Duration=TimeSpan.FromMilliseconds(500.0)}, 
        new PlaybackData() {Value= 12, Duration=TimeSpan.FromMilliseconds(500.0)}, 
        new PlaybackData() {Value= 18, Duration=TimeSpan.FromMilliseconds(250.0)}, 
        new PlaybackData() {Value= 93, Duration=TimeSpan.FromMilliseconds(250.0)}, 
        new PlaybackData() {Value= 66, Duration=TimeSpan.FromMilliseconds(500.0)}, 
        new PlaybackData() {Value= 30, Duration=TimeSpan.FromMilliseconds(500.0)}, 
    }; 
    this.radialBar.ValueSource = values; 
} 
Public Sub New() 
    InitializeComponent() 
    Dim values As New List(Of PlaybackData)() From { _ 
        New PlaybackData() With { _ 
            Key .Value = 10, _ 
            Key .Duration = TimeSpan.FromMilliseconds(500.0) _ 
        }, _ 
        New PlaybackData() With { _ 
            Key .Value = 15, _ 
            Key .Duration = TimeSpan.FromMilliseconds(1000.0) _ 
        }, _ 
        New PlaybackData() With { _ 
            Key .Value = 25, _ 
            Key .Duration = TimeSpan.FromMilliseconds(250.0) _ 
        }, _ 
        New PlaybackData() With { _ 
            Key .Value = 17, _ 
            Key .Duration = TimeSpan.FromMilliseconds(250.0) _ 
        }, _ 
        New PlaybackData() With { _ 
            Key .Value = 40, _ 
            Key .Duration = TimeSpan.FromMilliseconds(250.0) _ 
        }, _ 
        New PlaybackData() With { _ 
            Key .Value = 50, _ 
            Key .Duration = TimeSpan.FromMilliseconds(250.0) _ 
        }, _ 
        New PlaybackData() With { _ 
            Key .Value = 60, _ 
            Key .Duration = TimeSpan.FromMilliseconds(500.0) _ 
        }, _ 
        New PlaybackData() With { _ 
            Key .Value = 70, _ 
            Key .Duration = TimeSpan.FromMilliseconds(125.0) _ 
        }, _ 
        New PlaybackData() With { _ 
            Key .Value = 25, _ 
            Key .Duration = TimeSpan.FromMilliseconds(125.0) _ 
        }, _ 
        New PlaybackData() With { _ 
            Key .Value = 15, _ 
            Key .Duration = TimeSpan.FromMilliseconds(500.0) _ 
        }, _ 
        New PlaybackData() With { _ 
            Key .Value = 5, _ 
            Key .Duration = TimeSpan.FromMilliseconds(1000.0) _ 
        }, _ 
        New PlaybackData() With { _ 
            Key .Value = 10, _ 
            Key .Duration = TimeSpan.FromMilliseconds(500.0) _ 
        }, _ 
        New PlaybackData() With { _ 
            Key .Value = 12, _ 
            Key .Duration = TimeSpan.FromMilliseconds(500.0) _ 
        }, _ 
        New PlaybackData() With { _ 
            Key .Value = 18, _ 
            Key .Duration = TimeSpan.FromMilliseconds(250.0) _ 
        }, _ 
        New PlaybackData() With { _ 
            Key .Value = 93, _ 
            Key .Duration = TimeSpan.FromMilliseconds(250.0) _ 
        }, _ 
        New PlaybackData() With { _ 
            Key .Value = 66, _ 
            Key .Duration = TimeSpan.FromMilliseconds(500.0) _ 
        }, _ 
        New PlaybackData() With { _ 
            Key .Value = 30, _ 
            Key .Duration = TimeSpan.FromMilliseconds(500.0) _ 
        } _ 
    } 
    Me.radialBar.ValueSource = values 
End Sub 
In this article