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

Getting Started

This tutorial will walk you through the creation of a sample application that contains a RadCardView control.

Assembly References

To use RadCardView, add references to the following assemblies:

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

You can find the required assemblies for each control from the suite in the Controls Dependencies help article.

Defining the RadCardView

To display data in the control, provide a collection of business objects and assign it to the ItemsSource property of RadCardView.

The following example shows how to setup a basic card model and populate the ItemsSource of the control.

Example 1: Creating card model

public class CardInfo 
{ 
    public string Header { get; set; } 
    public string Name { get; set; } 
    public int Number { get; set; } 
} 

Example 2: Defining the control in XAML

<telerik:RadCardView x:Name="cardView"   
                     CardHeaderBinding="{Binding Header}" 
                     MinorLength="140"/> 

Example 3: Populating the control with data

public MainWindow() 
{ 
        InitializeComponent();           
        var source = new ObservableCollection<CardInfo>(); 
        for (int i = 0; i < 6; i++) 
        { 
            source.Add(new CardInfo() { Header = "Card " + i, Name = "Name " + i, Number = i }); 
        } 
        this.cardView.ItemsSource = source; 
    } 
} 

Figure 1: RadCardView example

The example shows also how to tell what is the property displaying the card headers (via the CardHeaderBinding property) and the height of the cards (via the MinorLength property). The MinorLength will apply to the height or the width of the cards based on the CardLayout property value.

Manual Data Field Generation

By default the RadCardView cards will auto-generate data fields for each public property of the card's model class. To interfere with this process, you can use the AutoGeneratingDataFieldDescriptor event of the control, where the data field generation can be canceled or customized. Additionally, you can set the AutoGenerateDataFieldDescriptor property to False and define the data fields manually via the RadCardView's DataFieldDescriptors collection. Read more in the Data Field Descriptor article.

Data Manipulation

There are several mechanisms to customize the displayed data. You can filter, sort or group it. Additionally, when a card is selected, you can edit its data fields using the built-in UI. Read more about those features in the Features section of the documentation.

See Also

In this article
Not finding the help you need? Improve this article