dashboard-devexpress-dot-dashboardcommon-17361f51.md
A card template used to display a series of cards in the CardDashboardItem.
Namespace : DevExpress.DashboardCommon
Assembly : DevExpress.Dashboard.v25.2.Core.dll
NuGet Package : DevExpress.Dashboard.Core
public class Card :
KpiElement,
ICardLayoutContext
Public Class Card
Inherits KpiElement
Implements ICardLayoutContext
The following members return Card objects:
To create a card template in the CardDashboardItem, use the CardDashboardItem.Cards property that accepts the Card class objects. An API exposed by the Card class includes the following main members:
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
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;
}
}
}
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
Object DataItemContainer NamedDataItemContainer KpiElement Card
See Also