CardCustomLayoutTemplate Class

The Custom layout template that allows you to create a card layout manually.

Namespace: DevExpress.DashboardCommon

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

Declaration

C#

public class CardCustomLayoutTemplate :
    CardLayoutTemplate

VB.NET

Public Class CardCustomLayoutTemplate
    Inherits CardLayoutTemplate

Remarks

Use the Card.LayoutTemplate property to specify a card’s layout template. To learn how to manage the layout of cards in the CardDashboardItem, refer to the CardLayoutTemplate class description.

The Custom layout template allows you to create a card’s layout manually. To do this, use the following members:

• The CardCustomLayoutTemplate.Layout property provides access to the CardLayout object that defines a card’s layout.
• The CardLayout object exposes the CardLayout.Rows property that allows you to construct a layout vertically using special layout rows. You can add the CardRow object that can contain multiple elements, or you can use the CardSparklineRow that occupies an entire card width.

• To add specific elements to the CardRow, use the CardRow.Elements property. For instance, you can add the following types of elements:

  • CardRowTextElement - displays a static text within a card;
  • CardRowDataElement - displays bound data within a card (such as actual value, target value, dimension value, etc.);
  • CardRowIndicatorElement - displays a delta indicator.

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 DevExpress.Drawing;
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 = DXFontStyle.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 = DXFontStyle.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 = DXFontStyle.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
Imports DevExpress.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 = DXFontStyle.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 = DXFontStyle.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 = DXFontStyle.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

Inheritance

Object

CardLayoutTemplate

CardCustomLayoutTemplate