Back to Devexpress

CardView.CardTemplate Property

wpf-devexpress-dot-xpf-dot-grid-dot-cardview-8773e826.md

latest3.2 KB
Original Source

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.v25.2.dll

NuGet Package : DevExpress.Wpf.Grid.Core

Declaration

csharp
public DataTemplate CardTemplate { get; set; }
vb
Public Property CardTemplate As DataTemplate

Property Value

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

Run Demo: WPF Data Grid - Card View Custom Templates

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

CardTemplateSelector

Choosing Templates Based on Custom Logic

Appearance Customization

CardView Class

CardView Members

DevExpress.Xpf.Grid Namespace