Getting Started with WinUI DataBar
This tutorial will walk you through the required steps for using RadDataBar.
Assembly References
In order to add RadDataBar in your application, you need to add references to the following assemblies:
- Telerik.WinUI.Controls.dll
Visualization Types
The RadDataBar suite contains the following controls representing the different visualizations.
-
RadDataBar: Displays a single data bar representing a value. It is useful for comparing quantitative values of data. You can easily highlight negative values.
-
RadStackedDataBar: Displays a set of stacked bars where each bar represents a value. The size of each bar is calculated in accordance to the set Minimum and Maximum properties.
-
RadStacked100DataBar: Displays a set of stacked bars where each value represents a percentage of the value. The percent is calculated based on the bar's value and the sum of all values in the stack.
Using RadDataBar
To display a data bar visualization, you can just add a RadDataBar control in the view and set its Value property. This will create a horizontal bar measured according to the Value. The value range of the bar is defined by its Minimum and Maximum properties, which default values are 0 an 100 respectively.
You can access the RadDataBar controls through an alias pointing to the Telerik.UI.Xaml.Controls.DataVisualization namespace: xmlns:dataVisualization="using:Telerik.UI.Xaml.Controls.DataVisualization"
Example 1: Defining RadDataBar
<dataVisualization:RadDataBar Value="30" Width="300" Height="30" Background="#F7F9FE" />
Using RadStackedDataBar
To display a stacked data bar visualization, you can add a RadStackedDataBar control in the view and set its ItemsSource property. This will create a set of stacked horizontal bars measured according to the values in the ItemsSource. The value range of the bar is defined by its Minimum and Maximum properties, which default values are 0 an 100 respectively.
Example 2: Defining RadStackedDataBar
<dataVisualization:RadStackedDataBar x:Name="stackedDataBar" Height="30" Width="300" Background="#F7F9FE"/>
Example 3: Setting RadStackedDataBar ItemsSource
public MyUserControl()
{
InitializeComponent();
this.stackedDataBar.ItemsSource = new List<double>() { 16, 20, 12, 32 };
}
Using RadStacked100DataBar
The RadStacked100DataBar works very similar to the RadStackedDataBar, but instead of using absolute values and relying on the predefined minimum and maximum values, it displays the bars as a percetange of the whole stack. For example, the sum of the values from Example 3 is 16 + 20 + 12 + 32 = 80 which will be the range's maximum. Then each value in the ItemsSource is turned to a value relative to the range and based on this information its bar's width is calculated. For example, 20 will be 0.25 which is 25% of the 80's range. This means that the bar for the value 20 will take 25% of the whole data bar.
To define RadStacked100DataBar, use Example 2 and 3, but replace the RadStackedDataBar with RadStacked100DataBar.
Example 4: Defining RadStacked100DataBar
<dataVisualization:RadStacked100DataBar x:Name="stackedDataBar" Height="30" Width="300" Background="#F7F9FE"/>
Telerik UI for WinUI Learning Resources
- Telerik UI for WinUI DataBar Component
- Getting Started with Telerik UI for WinUI Components
- Telerik UI for WinUI Installation
- Telerik UI for WinUI Examples
- Telerik UI for WinUI Accessibility
- Telerik UI for WinUI License Agreement