Telerik UI for WPF First Steps with Visual Studio Extensions

This article explains how to get the Telerik UI for WPF controls in your project and start using them quickly.

Once you have your first simple control up and running, take a look at the next steps section to start exploring the control functionality in more details.

For additional resources you can also review the Related Articles section on the right.

Download the Controls

The easiest way to get the controls to your development machine is to use the Progress Control Panel or to download the automated MSI installer from your telerik.com account.

Figure 1: Download automated (.msi) installer

If you are not a customer, you can download a free, fully functional trial and the same options will apply to you as well.

The following article can help you choose the installation type that is most suitable for your needs and preferences: Installation Approaches.

Creating Application with Telerik Visual Studio Extensions

The easiest way to create a Telerik UI for WPF project is to use Visual Studio Extensions which are distributed with the Telerik UI for WPF installer.

The Visual Studio Extensions can be accessed through the Extensions | Telerik | Telerik UI for WPF menu which has different menu items depending on the selected project in Visual Studio. The extensions can be accessed through the context menu of a WPF Application as well.

1. Open Microsoft Visual Studio.

2. Create new Telerik WPF application.

   Figure 2: Go to Telerik > Telerik UI for WPF > Create New Telerik Project

   

   Figure 3: Creating new Telerik application

   

3. Choose the project template and the corresponding settings. For an empty project without any Telerik controls added to the view, choose the Blank option.

   Figure 4: Choosing an application template

   

   At this point the project references only the common Telerik.Windows.Controls.dll and you can start adding controls in the UI.

   You can further configure the project using the Project Configuration Wizard. You can do that by going to the Extensions > Telerik > Telerik UI for WPF > Configure Project menu in Visual Studio. When you open the wizard you can select the controls you are going to use from the list (or search them in the search box). Once you have selected them, click Finish. This will add the required dlls and references to your project.

   Figure 5: Adding references to the charting controls

   

   This step is optional and you will only need it if you use controls that are not defined in Telerik.Windows.Controls.dll.

Add a Telerik Control to the Project

For this example we will use RadGridView.

Assembly References

In order to use the RadGridView control in your projects, you have to add references to the following assemblies:

• Telerik.Windows.Controls
• Telerik.Windows.Controls.GridView
• Telerik.Windows.Controls.Input
• Telerik.Windows.Data

Adding a Telerik Control to the Project

You can add RadGridView manually by writing the XAML code in Example 1 or you can also add the control by dragging it from the Visual Studio Toolbox and dropping it over the XAML view.

Example 1: Adding RadGridView in XAML

<telerik:RadGridView /> 

If you run the application, you will see an empty grid with no columns and rows as demonstrated in Figure 6.

Figure 6: The empty grid generated by the code in Example 1

Populating with Data

In order to populate the RadGridView control with data, you should create a collection of business objects. Create a new class named Profile and add several different type properties to it, as shown in Example 2.

Example 2: Simple business class

    public class Profile 
{ 
    public int ID { get; set; } 
    public string Name { get; set; } 
    public DateTime Date { get; set; } 
    public bool IsChecked { get; set; } 
} 

Public Class Profile 
Public Property ID As Integer 
Public Property Name As String 
Public Property Date As DateTime 
Public Property IsChecked As Boolean 

End Class

Next, create a collection of Profile objects in the MainWindow and set the RadGridView ItemSource.

Example 3: Simple business class

    public MainWindow() 
{ 
    this.InitializeComponent(); 
    var source = new ObservableCollection<Profile>(); 
    DateTime date = DateTime.Now; 
    for (int i = 0; i < 10; i++) 
    { 
    source.Add(new Profile() { ID = i, Name = "Item" + i, Date = date, IsChecked = i % 2 == 0 }); 
    date = date.AddDays(7); 
    } 
    gridView.ItemsSource = source; 
} 

Public Sub New() 
Me.InitializeComponent() 
Dim source = New ObservableCollection(Of Profile)() 
Dim date As DateTime = DateTime.Now 
 
For i As Integer = 0 To 10 - 1 
    source.Add(New Profile() With { 
        .ID = i, 
        .Name = "Item" & i, 
        .Date = date, 
        .IsChecked = i Mod 2 = 0 
    }) 
    date = date.AddDays(7) 
Next 
 
gridView.ItemsSource = source 
End Sub 
End Class 

Now that you have prepared the needed sample data, you need to bind it to each column in XAML as shown in the Example 4 below.

Example 4: Define RadGridView in XAML

<Grid> 
    <telerik:RadGridView x:Name="gridView" 
                         AutoGenerateColumns="False"> 
        <telerik:RadGridView.Columns> 
            <telerik:GridViewDataColumn DataMemberBinding="{Binding ID}"/> 
            <telerik:GridViewDataColumn DataMemberBinding="{Binding Name}" /> 
            <telerik:GridViewDataColumn DataMemberBinding="{Binding Date}" /> 
            <telerik:GridViewDataColumn DataMemberBinding="{Binding IsChecked}" /> 
        </telerik:RadGridView.Columns> 
    </telerik:RadGridView> 
</Grid> 

Run the project and you should see something like this:

Figure 7: The final result

Next Steps

Now that you have the Telerik UI for WPF controls running in your project, you may want to explore their features, customize their behavior or change their appearance. Below you can find guidance on getting started with such tasks:

• Explore control features
• Change control appearance
• Further information

See Also

• System Requirements
• Download Product Files
• Add Telerik Namespace
• Progress Virtual Classroom