# Getting Started with WinUI TimeBar
This tutorial will walk you through the creation of a sample application that contains `RadTimeBar`.
## Prerequisites
Before adding the Badge, you need to:
1. [Set up your WinUI project](https://www.telerik.com/winui/documentation/installation-and-deployment/systemrequirements).
2. Create your Telerik UI for WinUI application and install the Telerik UI for WinUI components depending on the required installation approach:
* [Getting Started with NuGet](https://www.telerik.com/winui/documentation/getting-started/first-steps-nuget#step-2-create-the-winui-application)
* [Getting Started with the MSI file](https://www.telerik.com/winui/documentation/getting-started/first-steps-msi#step-2-create-the-winui-application)
* [Getting Started with the ZIP file](https://www.telerik.com/winui/documentation/getting-started/first-steps-zip#step-2-create-the-winui-application)
* [Getting Started with the Telerik UI Visual Studio Extension](https://www.telerik.com/winui/documentation/getting-started/first-steps-vsextension#step-2-create-the-winui-application)
## Add the Assembly References
To use the RadTimeBar component, add references to `Telerik.WinUI.Controls.dll` and `Telerik.Licensing.Runtime.dll`.
## Define the Component
Defining the control requires setting several vital properties. Those are `PeriodStart`, `PeriodEnd` and `Intervals`.
#### **Defining RadTimeBar**
```XAML
```
#### **Settig the PeriodStart and PeriodEnd properties**
```C#
this.timeBar.PeriodStart = new System.DateTime(2023, 1, 1);
this.timeBar.PeriodEnd = new System.DateTime(2023, 12, 31);
```
**RadTimeBar**
## Setting the Visible Period
The visible period defines what portion of the period to be brought into the viewport. This can be also looked as zooming. The visible period is defined via the `VisiblePeriodStart` and `VisiblePeriodEnd` properties.
#### **Settig the VisiblePeriodStart and VisiblePeriodEnd properties**
```C#
this.timeBar.VisiblePeriodStart = new System.DateTime(2023, 1, 1);
this.timeBar.VisiblePeriodEnd = new System.DateTime(2023, 2, 1);
```
**RadTimeBar with visible period**
## Selecting an Interval
To select an interval you can set the RadTimeBar's `SelectionStart` and `SelectionEnd` properties.
#### **Settig the SelectionStart and SelectionEnd properties**
```C#
this.timeBar.SelectionStart = new System.DateTime(2023, 2, 1);
this.timeBar.SelectionEnd = new System.DateTime(2023, 4, 1);
```
**RadTimeBar with selected interval**
## Hosting Another Control
The RadTimeBar component allows you to host another control in it, thus enchancing the visualization. The most common scenario is hosting a `RadSparkline` control.
The following example demonstrates how to populate a simple RadLinearSparkline with data and host it in RadTimeBar. Read more about the RadSparkline controls in its [help documentation](https://www.telerik.com/winui/documentation/controls/radsparkline/overview).
> important To use the RadSparkline control, add the following namespace: xmlns:telerikDataVisualization="using:Telerik.UI.Xaml.Controls.DataVisualization"
#### **Hosting a RadSparkline instance in the RadTimeBar control**
```XAML
```
#### **Setting up the ItemsSource property of the RadLinearSparkline element**
```C#
private static Random r = new Random();
// You can decide where to use this method.
// For example, you can call it after the InitializeComponent() call of the view where the control is used (ex: MainWindow.xaml.cs).
private void SetupSparkLineSource()
{
List data = new List();
DateTime startDate = new DateTime(2023, 1, 1);
DateTime endDate = new DateTime(2023, 12, 31);
for (DateTime currentDate = startDate; currentDate <= endDate; currentDate = currentDate.AddDays(15))
{
data.Add(r.Next(0, 60));
}
this.sparkline.ItemsSource = data;
}
```
**RadTimeBar and RadSparkline**
#### DataBinding the RadSparkLine
In order to learn how you can bind the `ItemsSource` of a RadSparkLine component in general, you can read the [Data Binding](https://www.telerik.com/winui/documentation/controls/radsparkline/data-binding) article in the RadSparkLine section.
> In case the ItemsSource of the sparkline is a collection of business objects, where the property bound to the `XValue` of the sparkline is of type **DateTime**, you need to make sure that the collection is ordered (ascending) by that property. This is needed for the virtualization of the RadSparkLine, which is enabled by the **EnableSparklineVirtualization** property of the RadTimeBar(**True** by default).
## Telerik UI for WinUI Learning Resources
* [Telerik UI for WinUI TimeBar Component](https://www.telerik.com/winui/timebar)
* [Getting Started with Telerik UI for WinUI Components](https://www.telerik.com/winui/documentation/getting-started/first-steps-nuget)
* [Telerik UI for WinUI Installation](https://www.telerik.com/winui/documentation/installation-and-deployment/installing-which-file-do-i-need)
* [Telerik UI for WinUI Examples](https://www.telerik.com/winui/documentation/examples/demos-app)
* [Telerik UI for WinUI Accessibility](https://www.telerik.com/winui/documentation/common/accessibility)
* [Telerik UI for WinUI License Agreement](https://www.telerik.com/purchase/license-agreement/winui)
## See Also
* [Properties](https://www.telerik.com/winui/documentation/controls/radtimebar/properties)
* [MVVM Support](https://www.telerik.com/winui/documentation/controls/radtimebar/mvvm-support)