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

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

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"/> 
You can also set the CardMargin property to control the margin around each card. The property is of type Thickness.

Example 2: Setting CardMargin

<telerik:RadCardView CardMargin="5 10 0 5"/> 

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

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 4: 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 5: 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

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

Card Contents

The default visual content of the cards can be replaced using the CardReadOnlyTemplate and CardEditTemplate of RadCardView.

CardReadOnlyTemplate allows you to define the content while the card is in normal state.

CardEditTemplate allows you to define the content while the card is in edit state.

To enter edit state, execute the RadCardViewCommands.BeginEdit command. This affects the currently selected card.

To commit or cancel the edit, call execute RadCardViewCommands.CommitEdit or RadCardViewCommands.CancelEdit commands.

Read more about RadCardView's commanding support in the Commands article.

Example 5: Defining CardReadOnlyTemplate and CardEditTemplate

<telerik:RadCardView x:Name="cardView"  CardHeaderBinding="{Binding Header}" MinorLength="150"> 
    <telerik:RadCardView.CardReadOnlyTemplate> 
        <DataTemplate> 
            <Border Background="#7A7574"> 
                <Grid VerticalAlignment="Center"> 
                    <Grid.RowDefinitions> 
                        <RowDefinition Height="Auto" /> 
                        <RowDefinition Height="Auto"/> 
                    </Grid.RowDefinitions> 
                    <telerik:RadGlyph Glyph="&#xe801;" Foreground="White" FontSize="32"/> 
                    <StackPanel Orientation="Horizontal" Grid.Row="1" HorizontalAlignment="Center" > 
                        <TextBlock Text="{Binding Name}" Foreground="White" VerticalAlignment="Center"/>                                
                        <telerik:RadGlyph Glyph="&#xe10b;" Foreground="White" Cursor="Hand" 
                                          Margin="4 0 0 0" MouseLeftButtonDown="OnCardBeginEdit" 
                                          IsEnabled="{Binding RelativeSource={RelativeSource AncestorType=telerik:RadCardViewItem}, Path=IsSelected}"/> 
                    </StackPanel> 
                </Grid> 
            </Border> 
        </DataTemplate> 
    </telerik:RadCardView.CardReadOnlyTemplate> 
    <telerik:RadCardView.CardEditTemplate> 
        <DataTemplate> 
            <Border Background="#7A7574"> 
                <Grid VerticalAlignment="Center" HorizontalAlignment="Center"  TextElement.Foreground="White"> 
                    <Grid.RowDefinitions> 
                        <RowDefinition Height="Auto" /> 
                        <RowDefinition Height="Auto"/> 
                        <RowDefinition Height="Auto"/> 
                        <RowDefinition Height="Auto"/> 
                    </Grid.RowDefinitions> 
                    <Grid.ColumnDefinitions> 
                        <ColumnDefinition Width="Auto" /> 
                        <ColumnDefinition Width="Auto" /> 
                    </Grid.ColumnDefinitions> 
                    <TextBlock Text="Header: " VerticalAlignment="Center"/> 
                    <TextBox Text="{Binding Header, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Margin="5 0 0 0" Padding="5 3 5 3" Grid.Column="1"/> 
                    <TextBlock Text="Name: " VerticalAlignment="Center"  Grid.Row="1" /> 
                    <TextBox Text="{Binding Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Margin="5 2 0 0" Padding="5 3 5 3" Grid.Row="1" Grid.Column="1"/> 
                    <TextBlock Text="Number: " VerticalAlignment="Center"  Grid.Row="2" /> 
                    <TextBox Text="{Binding Number, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Margin="5 2 0 0" Padding="5 3 5 3" Grid.Row="2" Grid.Column="1"/> 
                    <telerik:RadGlyph Glyph="&#xe118;" Foreground="White" Cursor="Hand" Grid.Row="3" 
                                      Grid.ColumnSpan="2" HorizontalAlignment="Right" 
                                      Margin="4 4 0 0" MouseLeftButtonDown="OnCardCommitEdit"/> 
                </Grid> 
            </Border> 
        </DataTemplate> 
    </telerik:RadCardView.CardEditTemplate> 
    </telerik:RadCardView> 

Example 6: Execute RadCardView commands

private void OnCardBeginEdit(object sender, MouseButtonEventArgs e) 
{ 
    // start editing 
    this.cardView.PendingCommands.Add(Telerik.Windows.Controls.RadCardViewCommands.BeginEdit); 
    this.cardView.ExecutePendingCommand(); 
} 
 
private void OnCardCommitEdit(object sender, MouseButtonEventArgs e) 
{ 
    // commit edit 
    this.cardView.PendingCommands.Add(Telerik.Windows.Controls.RadCardViewCommands.CommitEdit); 
    this.cardView.ExecutePendingCommand(); 
} 

Figure 4: Custom card contents in read-only state

WPF RadCardView Custom card contents in read-only state

Figure 5: Custom card contents in edit state

WPF RadCardView Custom card contents in edit state

Always use both CardReadOnlyTemplate and CardEditTemplate properties together.

See Also

In this article