New to Telerik UI for WPF? Download free 30-day trial

DataBinding

Databinding for the RadDataBar control involves the correlation between the business logic/data, and the visualization of the control.

This article describes how to data bind the different RadDataBar controls.

RadDataBar

The RadDataBar control allows you to data bind its Value property, which can be used to connect the UI with the model. The Value determines that size of the bar according to the Minimum and Maximum values of the RadDataBar control.

The bar size will automatically update if the data bound property in the model changes. To ensure that this works properly, the underlying data context must implement the INotifyPropertyChanged interface.

Find a runnable sample in the Code Example section of this article.

RadStackedDataBar and RadStacked100DataBar

RadStackedDataBar and RadStacked100DataBar allow you to data bind their ItemsSource property to any IEnumerable. For each item in the ItemsSource a bar in the stack will be generated.

In case the ItemsSource is bound to a collection of numbers (like the double or int primitives), the data bars will be generated automatically. If the ItemsSource is bound to a collection of any other custom object type, you will need to provide the name of the property that should be used to access the data bar values. To do so, set the ValuePath property of the data bar control. For example, if the collection contains items of type MyItemInfo which have a property named MyValue, the ValuePath property should hold the "MyValue" string.

The stacked data bar controls also provide full support for change notifications - data sources that implement the INotifyCollectionChanged, and underlying data items that implement INotifyPropertyChanged are properly tracked and automatically reflected by the UI.

Find a runnable sample in the Code Example section of this article.

Code Example

This example shows how to data bind the RadDataBar controls to a view model.

Example 1: Creating a sample model containing information about the data bars

public class Product 
{ 
    public int Value1 { get; set; } 
    public int Value2 { get; set; } 
 
    public IEnumerable<int> Ints { get; set; } 
    public IEnumerable<Item> Items { get; set; } 
} 
 
public class Item 
{ 
    public double Val { get; set; } 
    public string Name { get; set; } 
} 
Public Class Product 
        Public Property Value1() As Integer 
        Public Property Value2() As Integer 
 
        Public Property Ints() As IEnumerable(Of Integer) 
        Public Property Items() As IEnumerable(Of Item) 
    End Class 
 
    Public Class Item 
        Public Property Val() As Double 
        Public Property Name() As String 
    End Class 

Example 2: Setting up the model

var items = new List<Item>()  
{ 
    new Item{ Val = 9, Name = "nine", }, 
    new Item{ Val = 10, Name = "ten", }, 
    new Item{ Val = 11, Name = "eleven", }, 
    new Item{ Val = 20, Name = "twenty", },  
    new Item{ Val = 22, Name = "twenty two", },  
    new Item{ Val = 90, Name = "ninety", },  
 
    new Item{ Val = -9, Name = "-nine", }, 
    new Item{ Val = -10, Name = "-ten", }, 
    new Item{ Val = -11, Name = "-eleven", }, 
    new Item{ Val = -20, Name = "-twenty", },  
    new Item{ Val = -100, Name = "-hundred", },  
}; 
 
this.DataContext = new Product() { Value1 = 20, Value2 = 30, Ints = new List<int>() {5, 6, 7, 8, 9, }, Items = items }; 
Dim items = New List(Of Item)() From { 
     New Item With {.Val = 9, .Name = "nine"}, 
     New Item With {.Val = 10, .Name = "ten"}, 
     New Item With {.Val = 11, .Name = "eleven"}, 
     New Item With {.Val = 20, .Name = "twenty"}, 
     New Item With {.Val = 22, .Name = "twenty two"}, 
     New Item With {.Val = 90, .Name = "ninety"}, 
     New Item With {.Val = -9, .Name = "-nine"}, 
     New Item With {.Val = -10, .Name = "-ten"}, 
     New Item With {.Val = -11, .Name = "-eleven"}, 
     New Item With {.Val = -20, .Name = "-twenty"}, 
     New Item With {.Val = -100, .Name = "-hundred"}} 
 
Dim TempProduct As Product = New Product() With {.Value1 = 20, .Value2 = 30, .Ints = New List(Of Integer)() From {5, 6, 7, 8, 9}, .Items = items} 
Me.DataContext = New Product() With {.Value1 = 20, .Value2 = 30, .Ints = New List(Of Integer)() From {5, 6, 7, 8, 9}, .Items             

Example 3: Define the RadDataBars components

<telerik:RadDataBar Height="20" Value="{Binding Value1}" BorderBrush="Gray" BorderThickness="1" Margin="2" /> 
<telerik:RadDataBar Height="20" Value="{Binding Value2}" BorderBrush="Gray" BorderThickness="1" Margin="2" /> 
 
<telerik:RadStackedDataBar Height="20" BorderBrush="Gray" BorderThickness="1" Margin="2" ItemsSource="{Binding Ints}" ShowToolTips="True" /> 
<telerik:RadStackedDataBar Height="20" BorderBrush="Gray" BorderThickness="1" Margin="2" AxisVisibility="Visible" 
                            ItemsSource="{Binding Items}" ValuePath="Val" ToolTipPath="Name" ShowToolTips="True" Minimum="-100" Maximum="100"/> 

Figure 1: The different data bars

The different data bars

See Also

In this article