New to Telerik UI for WinUI? Download free 30-day trial

Getting Started

In this step-by-step tutorial, we will build and run a sample application that uses Telerik UI for WinUI components.

Prerequisites

Before you start using the Telerik controls, verify that your system is configured for WinUI and that you can create WinUI applications. The following are the basic requirements:

  • Windows 10, version 1809 (build 17763) or later
  • Visual Studio 2019, version 16.9 or later with the following components:
    • The Universal Windows Platform development workload
    • The Windows 10 SDK (10.0.19041.0) individual component
    • The Project Reunion extension for Visual Studio

Visual Studio 2019, version 16.9 does not currently support all WinUI 3 tooling features. To access the full suite of WinUI 3 tooling features, you need to use Visual Studio 16.10 Preview.

For the complete guide on how to set up your development environment, check out the following Microsoft help articles:

To download and use the Telerik UI for WinUI controls, you need:

If you are new to the Progress Telerik products, you can create a free account.

Step 1: Create the Application

  1. Open Visual Studio 2019 version 16.9 or later.

  2. Select Create a new project.

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

    Figure 1: Create WinUI application

    Create WinUI application

  4. Click Next, configure the project and create it.

Currently, to create an WinUI in UWP project, you need to use the Preview 4 version of WinUI.

Step 2: Install the Telerik UI Controls

In this guide, we use the Telerik NuGet feed to download and install the controls. There are two major steps that are required to add the controls:

  1. Add the Telerik NuGet package source to Visual Studio.

  2. Install the Telerik.WinUI.Controls NuGet package.

Add the Telerik NuGet Package Source to Visual Studio

Telerik maintains a NuGet feed with official Telerik UI for WinUI releases and service packs. These packages are available for users with a Telerik Account and require authentication.

If you have already configured the Telerik NuGet package source in Visual Studio, jump to Install the Telerik.WinUI.Controls NuGet Package.

To add the Telerik NuGet feed as a package source:

  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/nuget and select OK.

    Figure 2: Add the Telerik NuGet package source

    Add a package source

Install the Telerik.WinUI.Controls NuGet Package

Next, add the Telerik controls to the WinUI solution that you created:

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

  2. In the Package source dropdown, 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, you must enter your Telerik Account credentials in the authentication popup.

  4. Select the desired NuGet package from the list, and then select the required check boxes to install it in your project.

    • Select the Telerik.WinUI.Controls.Trial package if you haven't purchased a commercial license for the product.
    • Select the Telerik.WinUI.Controls package if you have already purchased a commercial license for the product.
  5. Select Install to add the Telerik controls to your application.

    Figure 3: Select the Telerik.WinUI.Controls or Telerik.WinUI.Controls.Trial package

    Select the Telerik.WinUI.Controls package

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 3: Declare the Namespace and Define the Telerik Control

In this guide, we will add the RadDataGrid for WinUI control. To use RadDataGrid in our application, we need to add the control's namespace and then define the control:

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

    xmlns:telerikGrid="using:Telerik.UI.Xaml.Controls.Grid"
    
  2. Add the following code to define RadDataGrid:

    <Grid> 
         <telerikGrid:RadDataGrid x:Name="dataGrid" /> 
    </Grid>
    

As a result, MainPage.xaml will look like demonstrated in the example below.

Example 1: Adding RadDataGrid in XAML

<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> 
If you run the application at this point, you will see an empty grid with no columns and rows. Continue with the next sections to learn how to display some sample data.

Step 4: Define the Model and ViewModel

Since the RadDataGrid is a data-bound control, you must create a data model and set the ItemsSource of the control to a collection of those models. Example 2 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 INotifyPropertyChanged interface.

To define the Model and the ViewModel:

  1. In MainPage.xaml.cs, add an assembly reference to Telerik.Core:

    using Telerik.Core;
    
  2. Add an assembly reference to System.Collections.ObjectModel:

    using System.Collections.ObjectModel;
    
  3. Add the code from Example 2.

Example 2: Defining model and viewmodel

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 5: Populate with Data

Each row in RadDataGrid represents an object in the data source, and each column shows the value for one property of the bound object. Examples 3 demonstrates how to display the sample data from Example 2 by setting the DataContext of the Page and the ItemsSource of the RadDataGrid.

Example 3: Setting the ItemsSource in xaml

<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}"> 
    <Page.DataContext> 
        <local:MyViewModel /> 
    </Page.DataContext> 
    <Grid> 
        <telerikGrid:RadDataGrid x:Name="dataGrid" ItemsSource="{Binding Clubs}"/> 
    </Grid> 
</Page> 
Finally, build and run the application.

Figure 1: Result from Example 3

RadDataGrid populated with data

See Also

In this article
Not finding the help you need?