Customizing Cards

RadCardView cards can be customized in order to match the expected design or functionality.

Card Size

The card's size is determined by the MajorLength and MinorLength properties of RadCardView. Each property relates to a different dimension (width or height) based on the applied layout (rows or columns).

When the CardLayout property is set to Rows the MajorLength is applied to the card's width and the MinorLength to the card's height. When the CardLayout is Columns the MajorLength is applied to the card's height and the MinorLength to the card's width.

Figure 1: MajorLength and MinorLength examples

Additionally, you can set the CollapsedLength property in order to change the size of the cards while in collapsed state.

Example 1: Setting cards sizes

<telerik:RadCardView MinorLength="200" 
                     MajorLength="210" 
                     CollapsedLength="150"/> 

Card Header

The header content of a card is determined by the CardHeaderBinding property. Read the Data Binding article to see how to use this. Additionally, the header UI can be customized using the CardHeaderTemplate property of RadCardView.

Example 2: Setting card header template

<telerik:RadCardView CardHeaderBinding="{Binding MyHeaderProperty}"> 
    <telerik:RadCardView.CardHeaderTemplate> 
        <DataTemplate> 
            <TextBlock Text="{Binding}" Foreground="#CA5100" FontWeight="Bold"/> 
        </DataTemplate> 
    </telerik:RadCardView.CardHeaderTemplate>            
</telerik:RadCardView> 

Figure 2: Custom card header

The data context in the CardHeaderTemplate comes from the property bound to the CardHeaderBinding.

Card Data Field

To toggle the visibility of a data field, set the IsVisible property of the associated CardDataFieldDescriptor.

Example 3: Setting CardDataFieldDescriptor IsVisible property

<telerik:RadCardView.DataFieldDescriptors> 
    <telerik:CardDataFieldDescriptor DataMemberBinding="{Binding Name}" IsVisible="False"/> 
</telerik:RadCardView.DataFieldDescriptors> 

To customize the field that shows the value, set the EditorTemplate and ReadOnlyTemplate of the CardDataFieldDescriptor. The EditorTemplate property changes the editor element that is displayed when the data field enters edit mode. The ReadOnlyTemplate changes the element that is displayed in the normal state of the data field.

Example 4: Setting EditorTemplate and ReadOnlyTemplate

<telerik:RadCardView.DataFieldDescriptors> 
    <telerik:CardDataFieldDescriptor DataMemberBinding="{Binding Number}"> 
        <telerik:CardDataFieldDescriptor.ReadOnlyTemplate> 
            <DataTemplate> 
                <Border Padding="5" Background="#149F5B"> 
                    <TextBlock Text="{Binding Number}" Foreground="White"/> 
                </Border>                             
            </DataTemplate> 
        </telerik:CardDataFieldDescriptor.ReadOnlyTemplate> 
        <telerik:CardDataFieldDescriptor.EditorTemplate> 
            <DataTemplate> 
                <telerik:RadNumericUpDown Value="{Binding Number, Mode=TwoWay}" /> 
            </DataTemplate> 
        </telerik:CardDataFieldDescriptor.EditorTemplate> 
    </telerik:CardDataFieldDescriptor> 
</telerik:RadCardView.DataFieldDescriptors> 

Figure 3: Custom read only and editor templates for one of the data fields

See Also

• Data Binding
• Customizing Groups
• Customizing Filtering Control