Skip to main content

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.v22.1.dll

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