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>
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>