Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

CardView.CardTemplate Property

Gets or sets a template that defines the appearance of cards. This is a dependency property.

Namespace: DevExpress.Xpf.Grid

Assembly: DevExpress.Xpf.Grid.v24.2.dll

NuGet Package: DevExpress.Wpf.Grid.Core

#Declaration

public DataTemplate CardTemplate { get; set; }

#Property Value

Type Description
DataTemplate

Defines the appearance of cards.

#Remarks

Elements in the CardTemplate specify the appearance of CardData objects. An object’s Row property contains the underlying data item. To bind to data item properties, the path should look as follows: "{Binding Row.YourDataSourceProperty}".

#Example

The example uses a card template to change the appearance of cards.

WPF Data Grid - Card Template

Run Demo: WPF Data Grid - Card View Custom Templates

<dxg:CardView.CardTemplate>  
    <DataTemplate>  
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <dxe:ImageEdit Grid.Column="0" Source="{Binding Path=Row.ImageData}"/>
            <StackPanel Orientation="Vertical" VerticalAlignment="Top" Margin="12,0,12,0" Grid.Column="1">
                <StackPanel Orientation="Horizontal" Margin="0,0,0,4">
                    <TextBlock FontWeight="Bold" Text="Title: "/>
                    <TextBlock Text="{Binding Path=Row.JobTitle}"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal" Margin="0,0,0,4">
                    <TextBlock FontWeight="Bold" Text="First Name: "/>
                    <TextBlock Text="{Binding Path=Row.FirstName}"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <TextBlock FontWeight="Bold" Text="Last Name: "/>
                    <TextBlock Text="{Binding Path=Row.LastName}"/>
                </StackPanel>
            </StackPanel>
            <!-- ... -->
        </Grid>
    </DataTemplate>  
</dxg:CardView.CardTemplate> 
See Also