# 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](http://msdn.microsoft.com/en-us/library/system.collections.ienumerable.aspx). 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**

```C#
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**

```C#
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**

```XAML
<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**

![WinUI RadDataBar The different data bars](https://www.telerik.com/winui/documentation/assets/08b0503cb2336b5e5469518f1e5bf4fe/raddatabar-databinding.png)

## See Also

* [Getting Started](https://www.telerik.com/winui/documentation/controls/raddatabar/getting-started)
* [Properties](https://www.telerik.com/winui/documentation/controls/raddatabar/properties-configuration)