# Getting Started with WinUI CollectionEditor

This guide provides the information you need to start using the Telerik UI for WinUI CollectionEditor by adding the component to your project.

At the end, you will be able to achieve the following result.

![WinUI ](https://www.telerik.com/winui/documentation/assets/a2e192295b1dd36de4ccc41baae491ff/collectioneditor-getting-started-0.png)

## Prerequisites

Before adding the CollectionEditor, 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 CollectionEditor component, add references to `Telerik.WinUI.Controls.dll` and `Telerik.Licensing.Runtime.dll`.

## Define the Component

To start using the CollectionEditor, you need to initialize it and assign its `Source` property.

#### **Creating the data model**

```C#
public class Employee
{
	public string FirstName { get; set; }
	public string LastName { get; set; }
	public double Salary { get; set; }
	public DateTime HireDate { get; set; }
}
```

#### **Setting up the data**

```C#
this.collectionEditor.Source = new BindableCollection<Employee>()
{ 
	new Employee() { FirstName = "John", LastName = "Doe", Salary = 10000, HireDate = DateTime.Today },
	new Employee() { FirstName = "John", LastName = "Doe Junior", Salary = 10000, HireDate = DateTime.Today },
	new Employee() { FirstName = "Jane", LastName = "Doe", Salary = 10000, HireDate = DateTime.Today },
};
```

#### **Define the CollectionEditor in XAML**

```XAML
<Grid x:Name="LayoutRoot">                      
	<telerikControls:RadCollectionEditor x:Name="collectionEditor">
		<telerikControls:RadCollectionEditor.ItemTemplate>
			<DataTemplate>
				<StackPanel Orientation="Horizontal">
					<TextBlock Text="{Binding FirstName}" />
					<TextBlock Text="{Binding LastName}" Margin="5 0 0 0"/>
				</StackPanel>
			</DataTemplate>
		</telerikControls:RadCollectionEditor.ItemTemplate>
	</telerikControls:RadCollectionEditor>
</Grid>
```

![WinUI ](https://www.telerik.com/winui/documentation/assets/a2e192295b1dd36de4ccc41baae491ff/collectioneditor-getting-started-0.png)

## Telerik UI for WinUI Learning Resources

* [Telerik UI for WinUI CollectionEditor Component](https://www.telerik.com/winui/collectioneditor)
* [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)