Card.LayoutTemplate Property

Gets or sets a layout template for the CardDashboardItem.

Namespace: DevExpress.DashboardCommon

Assembly: DevExpress.Dashboard.v24.1.Core.dll

NuGet Package: DevExpress.Dashboard.Core

Declaration

C#

[DefaultValue(null)]
public CardLayoutTemplate LayoutTemplate { get; set; }

VB.NET

<DefaultValue(Nothing)>
Public Property LayoutTemplate As CardLayoutTemplate

Property Value

Type	Default	Description
CardLayoutTemplate	null	A CardLayoutTemplate object that specifies a layout template for the CardDashboardItem.

Remarks

To learn how to manage the layout of cards in the CardDashboardItem, refer to the CardLayoutTemplate class description.

Example

This example creates a Card dashboard item in code, bind it to data and customize the card layout.

To apply a custom card template, create the CardCustomLayoutTemplate instance and assign it to the Card.LayoutTemplate property of a Card object. Specify the required settings and add the Card object to the CardDashboardItem.Cards collection.

View Example: How to Create a Custom Template for the Card Dashboard Item

Form1.cs

using DevExpress.DashboardCommon;
using System.Drawing;

namespace CardCustomLayoutTemplateExample
{
    public partial class Form1 : DevExpress.XtraEditors.XtraForm
    {
        public Form1()
        {
            InitializeComponent();
            dashboardViewer1.Dashboard = CreateDashboardWithCards();

        }
        Dashboard CreateDashboardWithCards()
        {
            Dashboard dashboard = new Dashboard();
            dashboard.Title.Text = "Card Custom Template";
            dashboard.CurrencyCultureName = "en-US";

            DashboardObjectDataSource dataSource = new DashboardObjectDataSource();
            dashboardViewer1.AsyncDataLoading += (s, ev) => {
                ev.Data = DataGenerator.GenerateTestData();
            };
            dashboard.DataSources.Add(dataSource);

            CardDashboardItem cardItem = new CardDashboardItem();
            cardItem.SeriesDimensions.Add(new Dimension("Country"));
            cardItem.SparklineArgument = new Dimension("SalesDate", DateTimeGroupInterval.DayMonthYear);
            cardItem.DataSource = dataSource;
            cardItem.ShowCaption = false;

            dashboard.Items.Add(cardItem);
            Measure actualValue = new Measure("Sales");
            actualValue.NumericFormat.FormatType = DataItemNumericFormatType.Currency;
            Measure targetValue = new Measure("SalesTarget");
            targetValue.NumericFormat.FormatType = DataItemNumericFormatType.Currency;
            Card card = new Card(actualValue, targetValue)
            {
                LayoutTemplate = CreateCustomCardLayoutTemplate()
            };
            cardItem.Cards.Add(card);
            return dashboard;
        }
        CardLayoutTemplate CreateCustomCardLayoutTemplate()
        {
            CardCustomLayoutTemplate customTemplate = new CardCustomLayoutTemplate();
            CardLayout layout = new CardLayout();

            CardSparklineRow sparklineRow = new CardSparklineRow
            {
                Indent = 10,
                Height = 40,
                VerticalAlignment = CardVerticalAlignment.Top
            };

            CardRow captionRow = new CardRow
            {
                VerticalAlignment = CardVerticalAlignment.Center
            };
            CardRowTextElement captionTextElement = new CardRowTextElement
            {
                FontSize = 14,
                HorizontalAlignment = CardHorizontalAlignment.Left,
                Text = "Country: "
            };
            CardRowDataElement captionValueElement = new CardRowDataElement
            {
                ValueType = CardRowDataElementType.Title,
                FontSize = 18,
                ForeColor = Color.Blue,
                FontStyle = FontStyle.Italic,
                HorizontalAlignment = CardHorizontalAlignment.Right
            };
            CardRowIndicatorElement deltaIndicator = new CardRowIndicatorElement(CardHorizontalAlignment.Right, 22);
            captionRow.Elements.AddRange(captionTextElement, captionValueElement, deltaIndicator);
            CardRow absoluteVariationRow = new CardRow
            {
                VerticalAlignment = CardVerticalAlignment.Center,
                Indent = 20
            };
            CardRowTextElement absoluteVariationText = new CardRowTextElement
            {
                FontSize = 16,
                ForeColor = Color.MediumBlue,
                HorizontalAlignment = CardHorizontalAlignment.Left,
                Text = "Absolute Variation: "
            };
            CardRowDataElement absoluteVariationValue = new CardRowDataElement
            {
                FontSize = 20,
                ValueType = CardRowDataElementType.AbsoluteVariation,
                HorizontalAlignment = CardHorizontalAlignment.Right,
                PredefinedForeColor = CardPredefinedColor.Delta
            };
            absoluteVariationRow.Elements.AddRange(absoluteVariationText, absoluteVariationValue);

            CardRow percentVariationRow = new CardRow
            {
                VerticalAlignment = CardVerticalAlignment.Center,
                Indent = 20
            };
            CardRowTextElement percentVariationText = new CardRowTextElement
            {
                FontSize = 16,
                ForeColor = Color.MediumBlue,
                HorizontalAlignment = CardHorizontalAlignment.Left,
                Text = "Percent Variation: "
            };
            CardRowDataElement percentVariationValue = new CardRowDataElement
            {
                FontSize = 20,
                ValueType = CardRowDataElementType.PercentVariation,
                PredefinedForeColor = CardPredefinedColor.Delta,
                HorizontalAlignment = CardHorizontalAlignment.Right
            };
            percentVariationRow.Elements.AddRange(percentVariationText, percentVariationValue);

            CardRow percentOfTargetRow = new CardRow
            {
                VerticalAlignment = CardVerticalAlignment.Center,
                Indent = 20
            };
            CardRowTextElement percentOfTargetText = new CardRowTextElement
            {
                FontSize = 16,
                ForeColor = Color.MediumBlue,
                HorizontalAlignment = CardHorizontalAlignment.Left,
                Text = "Percent of Target: "
            };
            CardRowDataElement percentOfTargetValue = new CardRowDataElement
            {
                FontSize = 20,
                ValueType = CardRowDataElementType.PercentOfTarget,
                PredefinedForeColor = CardPredefinedColor.Delta,
                HorizontalAlignment = CardHorizontalAlignment.Right
            };
            percentOfTargetRow.Elements.AddRange(percentOfTargetText, percentOfTargetValue);

            CardRow totalSalesRow = new CardRow
            {
                VerticalAlignment = CardVerticalAlignment.Center
            };
            CardRowTextElement totalSalesText = new CardRowTextElement
            {
                FontStyle = FontStyle.Underline,
                FontSize = 14,
                ForeColor = Color.BlueViolet,
                Text = "Total Sales: ",
                HorizontalAlignment = CardHorizontalAlignment.Left
            };
            CardRowDataElement totalSalesValue = new CardRowDataElement
            {
                ForeColor = Color.CadetBlue,
                FontSize = 16,
                ValueType = CardRowDataElementType.ActualValue,
                HorizontalAlignment = CardHorizontalAlignment.Right
            };
            totalSalesRow.Elements.AddRange(totalSalesText, totalSalesValue);

            CardRow targetSalesRow = new CardRow
            {
                VerticalAlignment = CardVerticalAlignment.Center
            };
            CardRowTextElement targetSalesText = new CardRowTextElement
            {
                FontStyle = FontStyle.Underline,
                FontSize = 14,
                ForeColor = Color.BlueViolet,
                Text = "Target Sales: ",
                HorizontalAlignment = CardHorizontalAlignment.Left
            };
            CardRowDataElement targetSalesValue = new CardRowDataElement
            {
                ForeColor = Color.CadetBlue,
                FontSize = 16,
                ValueType = CardRowDataElementType.TargetValue,
                HorizontalAlignment = CardHorizontalAlignment.Right
            };
            targetSalesRow.Elements.AddRange(targetSalesText, targetSalesValue);

            layout.Rows.AddRange(sparklineRow,
                captionRow,
                absoluteVariationRow,
                percentVariationRow,
                percentOfTargetRow,
                totalSalesRow,
                targetSalesRow);
            customTemplate.Layout = layout;
            customTemplate.MinWidth = 300;
            customTemplate.MaxWidth = 350;
            return customTemplate;
        }
    }
}

Form1.vb

Imports DevExpress.DashboardCommon
Imports System.Drawing

Namespace CardCustomLayoutTemplateExample
    Partial Public Class Form1
        Inherits DevExpress.XtraEditors.XtraForm

        Public Sub New()
            InitializeComponent()
            dashboardViewer1.Dashboard = CreateDashboardWithCards()
        End Sub
        Private Function CreateDashboardWithCards() As Dashboard
            Dim dashboard As New Dashboard()
            dashboard.Title.Text = "Card Custom Template"
            dashboard.CurrencyCultureName = "en-US"
            Dim dataSource As New DashboardObjectDataSource()
            AddHandler dashboardViewer1.AsyncDataLoading, Sub(s, ev)
                                                              ev.Data = DataGenerator.GenerateTestData()
                                                          End Sub
            dashboard.DataSources.Add(dataSource)

            Dim cardItem As New CardDashboardItem()
            cardItem.SeriesDimensions.Add(New Dimension("Country"))
            cardItem.SparklineArgument = New Dimension("SalesDate", DateTimeGroupInterval.DayMonthYear)
            cardItem.DataSource = dataSource
            cardItem.ShowCaption = False

            dashboard.Items.Add(cardItem)
            Dim actualValue As New Measure("Sales")
            actualValue.NumericFormat.FormatType = DataItemNumericFormatType.Currency
            Dim targetValue As New Measure("SalesTarget")
            targetValue.NumericFormat.FormatType = DataItemNumericFormatType.Currency
            Dim card As New Card(actualValue, targetValue)
            card.LayoutTemplate = CreateCustomCardLayoutTemplate()
            cardItem.Cards.Add(card)
            Return dashboard
        End Function
        Private Function CreateCustomCardLayoutTemplate() As CardLayoutTemplate
            Dim customTemplate As New CardCustomLayoutTemplate()
            Dim layout As New CardLayout()

            Dim sparklineRow As CardSparklineRow = New CardSparklineRow()
            sparklineRow.Indent = 10
            sparklineRow.Height = 40
            sparklineRow.VerticalAlignment = CardVerticalAlignment.Top

            Dim captionRow As CardRow = New CardRow()
            captionRow.VerticalAlignment = CardVerticalAlignment.Center
            Dim captionTextElement As CardRowTextElement = New CardRowTextElement()
            captionTextElement.FontSize = 14
            captionTextElement.HorizontalAlignment = CardHorizontalAlignment.Left
            captionTextElement.Text = "Country: "
            Dim captionValueElement As CardRowDataElement = New CardRowDataElement()
            captionValueElement.ValueType = CardRowDataElementType.Title
            captionValueElement.FontSize = 18
            captionValueElement.ForeColor = Color.Blue
            captionValueElement.FontStyle = FontStyle.Italic
            captionValueElement.HorizontalAlignment = CardHorizontalAlignment.Right
            Dim deltaIndicator As New CardRowIndicatorElement(CardHorizontalAlignment.Right, 22)
            captionRow.Elements.AddRange(captionTextElement, captionValueElement, deltaIndicator)
            Dim absoluteVariationRow As CardRow = New CardRow()
            absoluteVariationRow.VerticalAlignment = CardVerticalAlignment.Center
            absoluteVariationRow.Indent = 20
            Dim absoluteVariationText As CardRowTextElement = New CardRowTextElement()
            absoluteVariationText.FontSize = 16
            absoluteVariationText.ForeColor = Color.MediumBlue
            absoluteVariationText.HorizontalAlignment = CardHorizontalAlignment.Left
            absoluteVariationText.Text = "Absolute Variation: "
            Dim absoluteVariationValue As CardRowDataElement = New CardRowDataElement()
            absoluteVariationValue.FontSize = 20
            absoluteVariationValue.ValueType = CardRowDataElementType.AbsoluteVariation
            absoluteVariationValue.HorizontalAlignment = CardHorizontalAlignment.Right
            absoluteVariationValue.PredefinedForeColor = CardPredefinedColor.Delta
            absoluteVariationRow.Elements.AddRange(absoluteVariationText, absoluteVariationValue)

            Dim percentVariationRow As CardRow = New CardRow()
            percentVariationRow.VerticalAlignment = CardVerticalAlignment.Center
            percentVariationRow.Indent = 20
            Dim percentVariationText As CardRowTextElement = New CardRowTextElement()
            percentVariationText.FontSize = 16
            percentVariationText.ForeColor = Color.MediumBlue
            percentVariationText.HorizontalAlignment = CardHorizontalAlignment.Left
            percentVariationText.Text = "Percent Variation: "
            Dim percentVariationValue As CardRowDataElement = New CardRowDataElement()
            percentVariationValue.FontSize = 20
            percentVariationValue.ValueType = CardRowDataElementType.PercentVariation
            percentVariationValue.PredefinedForeColor = CardPredefinedColor.Delta
            percentVariationValue.HorizontalAlignment = CardHorizontalAlignment.Right
            percentVariationRow.Elements.AddRange(percentVariationText, percentVariationValue)

            Dim percentOfTargetRow As CardRow = New CardRow()
            percentOfTargetRow.VerticalAlignment = CardVerticalAlignment.Center
            percentOfTargetRow.Indent = 20
            Dim percentOfTargetText As CardRowTextElement = New CardRowTextElement()
            percentOfTargetText.FontSize = 16
            percentOfTargetText.ForeColor = Color.MediumBlue
            percentOfTargetText.HorizontalAlignment = CardHorizontalAlignment.Left
            percentOfTargetText.Text = "Percent of Target: "
            Dim percentOfTargetValue As CardRowDataElement = New CardRowDataElement()
            percentOfTargetValue.FontSize = 20
            percentOfTargetValue.ValueType = CardRowDataElementType.PercentOfTarget
            percentOfTargetValue.PredefinedForeColor = CardPredefinedColor.Delta
            percentOfTargetValue.HorizontalAlignment = CardHorizontalAlignment.Right
            percentOfTargetRow.Elements.AddRange(percentOfTargetText, percentOfTargetValue)

            Dim totalSalesRow As CardRow = New CardRow()
            totalSalesRow.VerticalAlignment = CardVerticalAlignment.Center
            Dim totalSalesText As CardRowTextElement = New CardRowTextElement()
            totalSalesText.FontStyle = FontStyle.Underline
            totalSalesText.FontSize = 14
            totalSalesText.ForeColor = Color.BlueViolet
            totalSalesText.Text = "Total Sales: "
            totalSalesText.HorizontalAlignment = CardHorizontalAlignment.Left
            Dim totalSalesValue As CardRowDataElement = New CardRowDataElement()
            totalSalesValue.ForeColor = Color.CadetBlue
            totalSalesValue.FontSize = 16
            totalSalesValue.ValueType = CardRowDataElementType.ActualValue
            totalSalesValue.HorizontalAlignment = CardHorizontalAlignment.Right
            totalSalesRow.Elements.AddRange(totalSalesText, totalSalesValue)

            Dim targetSalesRow As CardRow = New CardRow()
            targetSalesRow.VerticalAlignment = CardVerticalAlignment.Center
            Dim targetSalesText As CardRowTextElement = New CardRowTextElement()
            targetSalesText.FontStyle = FontStyle.Underline
            targetSalesText.FontSize = 14
            targetSalesText.ForeColor = Color.BlueViolet
            targetSalesText.Text = "Target Sales: "
            targetSalesText.HorizontalAlignment = CardHorizontalAlignment.Left
            Dim targetSalesValue As CardRowDataElement = New CardRowDataElement()
            targetSalesValue.ForeColor = Color.CadetBlue
            targetSalesValue.FontSize = 16
            targetSalesValue.ValueType = CardRowDataElementType.TargetValue
            targetSalesValue.HorizontalAlignment = CardHorizontalAlignment.Right
            targetSalesRow.Elements.AddRange(targetSalesText, targetSalesValue)

            layout.Rows.AddRange(sparklineRow, 
       captionRow, 
       absoluteVariationRow, 
       percentVariationRow, 
       percentOfTargetRow, 
       totalSalesRow, 
       targetSalesRow)
            customTemplate.Layout = layout
            customTemplate.MinWidth = 300
            customTemplate.MaxWidth = 350
            Return customTemplate
        End Function
    End Class
End Namespace

Related GitHub Examples

The following code snippets (auto-collected from DevExpress Examples) contain references to the LayoutTemplate property.

Note

The algorithm used to collect these code examples remains a work in progress. Accordingly, the links and snippets below may produce inaccurate results. If you encounter an issue with code examples below, please use the feedback form on this page to report the issue.

C#

winforms-dashboard-apply-conditional-formatting-to-cards/CS/CardFormatRulesSample/Form1.cs#L15

CardCompactLayoutTemplate layout2 = new CardCompactLayoutTemplate();
cardItem.Cards[0].LayoutTemplate = layout;
cardItem.Cards[1].LayoutTemplate = layout2;

wpf-dashboard-olap-data-provider/CS/WpfDashboard_OlapDataProvider/MainWindow.xaml.cs#L40

Card card = new Card();
card.LayoutTemplate = new CardStretchedLayoutTemplate();
card.ActualValue = new Measure("[Measures].[Internet Sales Amount]");

VB.NET

winforms-dashboard-apply-conditional-formatting-to-cards/VB/CardFormatRulesSample/Form1.vb#L18

Dim layout2 As CardCompactLayoutTemplate = New CardCompactLayoutTemplate()
cardItem.Cards(0).LayoutTemplate = layout
cardItem.Cards(1).LayoutTemplate = layout2

winviewer-how-to-create-custom-card-layout-template/VB/ViewerForm.vb#L34

Dim card As New Card(actualValue, targetValue)
card.LayoutTemplate = CreateCustomCardLayoutTemplate()
cardItem.Cards.Add(card)

wpf-dashboard-olap-data-provider/VB/WpfDashboard_OlapDataProvider/MainWindow.xaml.vb#L35

Dim card As Card = New Card()
card.LayoutTemplate = New CardStretchedLayoutTemplate()
card.ActualValue = New Measure("[Measures].[Internet Sales Amount]")