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.
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.
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; }
}
Example 2: Setting up the model
public sealed partial class TestPage : ExamplePageBase
{
public TestPage()
{
this.InitializeComponent();
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 };
}
}
Example 3: Define the RadDataBars components
<StackPanel>
<dataVisualization:RadDataBar Height="20" Value="{Binding Value1}" BorderBrush="Gray" BorderThickness="1" Margin="2" />
<dataVisualization:RadDataBar Height="20" Value="{Binding Value2}" BorderBrush="Gray" BorderThickness="1" Margin="2" />
<dataVisualization:RadStackedDataBar Height="20" BorderBrush="Gray" BorderThickness="1" Margin="2" ItemsSource="{Binding Ints}" ShowToolTips="True" />
<dataVisualization:RadStackedDataBar Height="20" BorderBrush="Gray" BorderThickness="1" Margin="2" AxisVisibility="Visible"
ItemsSource="{Binding Items}" ValuePath="Val" ToolTipPath="Name" ShowToolTips="True" Minimum="-100" Maximum="100"/>
</StackPanel>
Figure 1: The different data bars
