# First Steps with Telerik UI for WinUI by Installing with NuGet Package

NuGet is a popular .NET package manager. Progress maintains the Telerik NuGet Feed for registered users and you can include the Telerik UI for WinUI suite in your project as well as update to the latest available version from there. Installing the Telerik UI for WinUI library with NuGet works both for Windows and MacOS machines.

This tutorial describes how to get up and running with the Telerik UI for WinUI library by downloading and installing the controls with NuGet.

* First, you will set up your WinUI project and create the WinUI application.
* Next, you'll install the Telerik UI for WinUI library by using the Telerik NuGet feed, declare the namespace, and define the DataGrid control.
* Then, you will show some sample data in the DataGrid.
* Finally, you will add styles to the DataGrid and populate it with data.

## Step 1: Set Up Your WinUI Project

1. Install Windows 10, version 1809 (build 17763) or later.

2. Install [Visual Studio 2019, version 16.9 or later](https://visualstudio.microsoft.com/downloads/). Visual Studio 2022 is recommended for WinUI development.

   For WinUI application development, you should install the `.NET Desktop Development` workload.

   Telerik is developed for `Windows 10 SDK (10.0.22621.0)` and [Windows App SDK](https://learn.microsoft.com/en-us/windows/apps/windows-app-sdk/) version 2.2.0.

3. Create a [Telerik account](https://www.telerik.com/account/).

## Step 2: Create the WinUI Application

1. Open Visual Studio.

2. Select **Create a new project**.

3. Search for "winui" and select **Blank app, Packaged (WinUI in Desktop)**.

   #### NuGet Installation: Create New WinUI Application

   ![WinUI Create WinUI application](https://www.telerik.com/winui/documentation/assets/09571668a2611b6cea7070c8ee3212ff/create-win-ui-app.png)

4. Click **Next**. Configure the project and create it.

## Step 3: Add the Telerik NuGet Package Source to Visual Studio

Now, let's add the Telerik UI for WinUI package through the Telerik NuGet feed. To use the available packages, you need to have an active [Telerik account](https://www.telerik.com/account/) and to authenticate.

> With release 4.4.0, the Telerik UI for WinUI NuGet packages with version 4.4.0 and higher can be accessed on [nuget.org](https://www.nuget.org/) directly, so setting up the Telerik NuGet Package Source is not required to consume these versions.

1. In Visual Studio, select **Tools** > **NuGet Package Manager** > **Package Manager Settings**.

2. Select **Package Sources**.

3. Select **+**.

4. In the **Name** box, enter **Telerik NuGet**.

5. In the **Source** box, enter **<https://nuget.telerik.com/v3/index.json>**. Click **OK**.

#### NuGet Installation: Add the Package Source

![WinUI Add a package source](https://www.telerik.com/winui/documentation/assets/8a591b14f20b5cfcdb9fa0e73d66f1be/telerik-nuget-package-source.png)

> important The NuGet v2 server at <https://nuget.telerik.com/nuget> will be sunset in November 2024. The new v3 protocol offers faster package searches and restores, improved security, and more reliable infrastructure. To redirect your feed to the NuGet v3 protocol, all you have to do is to change your NuGet package source URL to <https://nuget.telerik.com/v3/index.json>.

## Step 4: Install the Telerik WinUI NuGet Package

Now, you need to add the Telerik package to the WinUI solution project that you created:

1. In Visual Studio, select **Tools** > **NuGet Package Manager** > **Manage NuGet Packages for Solution...**.

2. In the **Package source** drop-down, select **Telerik NuGet**.

3. Select the **Browse** tab and then enter **Telerik.WinUI.Controls** in the search box.

   If this is the first time you use the Telerik NuGet feed, Visual Studio will prompt you to enter Telerik credentials. The exact credentials are "api-key" as the username and a NuGet API Key as the password. You can generate a key via the [API Keys](https://www.telerik.com/account/downloads/api-keys) page in your telerik.com account.

4. Choose the `Telerik.WinUI.Controls` NuGet package from the list, and then select the required check boxes to install it in your project.

5. Click **Install** to add the Telerik controls to your application.

**NuGet Installation: Select Telerik UI for WinUI Controls Package**

![WinUI Select the Telerik.WinUI.Controls package](https://www.telerik.com/winui/documentation/assets/e0e92071c98dc9a201460092f6ed7e5a/nuget-package-install.png)

As a result, a reference to `Telerik.WinUI.Controls` will appear under the `References` node in the Visual Studio **Solution Explorer**. Now you are ready to add a Telerik control to your application.

## Step 5: Add Styles to the DataGrid

In order for the DataGrid to receive some styles, you need to merge the `Generic.xaml` ResourceDictionary in `App.xaml` as demonstrated in the following example.

```XAML
	<Application.Resources>
		<ResourceDictionary>
			<ResourceDictionary.MergedDictionaries>
				<XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
				<ResourceDictionary Source="ms-appx:///Telerik.WinUI.Controls/Themes/Generic.xaml"/>
				
			</ResourceDictionary.MergedDictionaries>
			
		</ResourceDictionary>
	</Application.Resources>
```

## Step 6: Declare the Namespace and Define the DataGrid

Let's add the Telerik UI for WinUI DataGrid control—declare its namespace and then define the control.

1. In `MainPage.xaml`, add the following line to declare the namespace:

```XAML
		xmlns:telerikGrid="using:Telerik.UI.Xaml.Controls.Grid"
```

1. Add the following code to define the DataGrid:

```XAML
		<telerikGrid:RadDataGrid x:Name="dataGrid" />
```

As a result, `MainPage.xaml` will look as demonstrated in the following example.

```C#
	<Page x:Class="GettingStarted.MainPage"
			xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
			xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
			xmlns:local="using:GettingStarted"
			xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
			xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
			xmlns:telerikGrid="using:Telerik.UI.Xaml.Controls.Grid"
			mc:Ignorable="d"
			Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
		<Grid>
			<telerikGrid:RadDataGrid x:Name="dataGrid" />
		</Grid>
	</Page>
```

> note If you have chosen WinUI3 Desktop project type, this will be `Window` object instead of a `Page` object.

If you run the application at this point, you will see an empty data grid with no columns and rows. Now you'll learn how to display some data.

## Step 7: Render the Sample Data

Since the DataGrid is a data-bound control, you have to create a data model and set the `ItemsSource` of the control to a collection of those models.

To define the Model and the ViewModel:

1. In `MainPage.xaml.cs`, add references to the `Telerik.Core` and `System.Collections.ObjectModel` namespaces:

```C#
		using Telerik.Core;
		using System.Collections.ObjectModel;
```

1. Add the code from the following example. It demonstrates a sample implementation of a `model` and `ViewModel`. The `ViewModelBase` class from the example is located in the `Telerik.Core` namespace and provides an implementation of the the `INotifyPropertyChanged` interface.

```C#
		public class Club : ViewModelBase
		{
			private string name;
			private DateTime established;
			private int stadiumCapacity;

			public Club(string name, DateTime established, int stadiumCapacity)
			{
				this.name = name;
				this.established = established;
				this.stadiumCapacity = stadiumCapacity;
			}

			public string Name
			{
				get { return this.name; }
				set
				{
					if (value != this.name)
					{
						this.name = value;
						this.OnPropertyChanged("Name");
					}
				}
			}

			public DateTime Established
			{
				get { return this.established; }
				set
				{
					if (value != this.established)
					{
						this.established = value;
						this.OnPropertyChanged("Established");
					}
				}
			}

			public int StadiumCapacity
			{
				get { return this.stadiumCapacity; }
				set
				{
					if (value != this.stadiumCapacity)
					{
						this.stadiumCapacity = value;
						this.OnPropertyChanged("StadiumCapacity");
					}
				}
			}
		}

		public class MyViewModel : ViewModelBase
		{
			private ObservableCollection<Club> clubs;

			public ObservableCollection<Club> Clubs
			{
				get
				{
					if (this.clubs == null)
					{
						this.clubs = this.CreateClubs();
					}

					return this.clubs;
				}
			}

			private ObservableCollection<Club> CreateClubs()
			{
				ObservableCollection<Club> clubs = new ObservableCollection<Club>();
				Club club;

				club = new Club("Liverpool", new DateTime(1892, 1, 1), 45362);
				clubs.Add(club);

				club = new Club("Manchester Utd.", new DateTime(1878, 1, 1), 76212);
				clubs.Add(club);

				club = new Club("Chelsea", new DateTime(1905, 1, 1), 42055);
				clubs.Add(club);

				return clubs;
			}
		}
```

## Step 8: Populate the DataGrid with Data

Each row in the DataGrid represents an object in the data source and each column shows the value for one property of the bound object.

The following example demonstrates how to display the sample data from Step 5 by setting the `DataContext` of the `Window` and the `ItemsSource` of the `RadDataGrid`.

```C#
	<Window x:Class="GettingStarted.MainWindow"
			xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
			xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
			xmlns:local="using:GettingStarted"
			xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
			xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
			xmlns:telerikGrid="using:Telerik.UI.Xaml.Controls.Grid"
			mc:Ignorable="d"
			Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">		
		<Grid>
			<Grid.DataContext>
				<local:MyViewModel />
			</Grid.DataContext>
			<telerikGrid:RadDataGrid x:Name="dataGrid" ItemsSource="{Binding Clubs}"/>
		</Grid>
	</Window>
```

Now, let's build and run the application.

**Telerik UI for WinUI DataGrid Displaying Data**

![WinUI RadDataGrid populated with data](https://www.telerik.com/winui/documentation/assets/bda44f4c6cf527faae33e49dbfb8c6f9/datagrid-gettingstarted.png)

That was it! Now you are ready to dive more deeply into Telerik UI for Win UI and take full advantage of its slick functionalities!

## Next Steps

* [Available Product Files for Download](https://www.telerik.com/winui/documentation/installation-and-deployment/download-product-files)
* [Installation Approaches for Telerik UI for WinUI](https://www.telerik.com/winui/documentation/installation-and-deployment/installing-which-file-do-i-need)
* [Usage Specifics for License Types](https://www.telerik.com/winui/documentation/installation-and-deployment/license-limitations)
* [Update to Latest Windows App SDK](https://learn.microsoft.com/en-us/windows/apps/windows-app-sdk/update-existing-projects-to-the-latest-release)

## See Also

* [Microsoft WinUI Samples Gallery](https://github.com/microsoft/WinUI-Gallery)