New to Telerik UI for WinForms? Download free 30-day trial

Visual Data Representation

This article requires that readers are familiar with the workings of the TPF property system.

RadCardView synchronizes the most important RadProperties between the different RadCardViewItems, meaning that a change in certain RadProperty of a particular CardViewItem affects the other items as well. The list below contains the properties which are synchronized by default.

  • VisualElement.BackColorProperty
  • LightVisualElement.BackColor2Property
  • LightVisualElement.BackColor3Property
  • LightVisualElement.BackColor4Property
  • LightVisualElement.NumberOfColorsProperty
  • LightVisualElement.DrawFillProperty
  • VisualElement.ForeColorProperty
  • VisualElement.FontProperty
  • LightVisualElement.TextWrapProperty
  • LightVisualElement.DrawTextProperty
  • LightVisualElement.TextAlignmentProperty
  • LightVisualElement.ImageAlignmentProperty
  • LightVisualElement.TextImageRelationProperty
  • LightVisualElement.BorderColorProperty
  • LightVisualElement.DrawBorderProperty
  • LightVisualElement.BorderWidthProperty
  • LightVisualElement.GradientStyleProperty
  • LightVisualElement.GradientPercentageProperty
  • LightVisualElement.GradientPercentage2Property

The collection with these RadProperties is static and it it accessible, therefore changes of the collection are possible. The example below adds the LightVisualElement.VisibilityProperty and sets others in order to customize the appearance of the items.

Figure 1: Modifying RadProperties

WinForms RadCardView Modifying RadProperties

Formatting the Visual Item

public CardviewCustomizingAppearance()
{
    InitializeComponent();
    CardListViewElement.ItemSynchronizationProperties.Add(LightVisualElement.VisibilityProperty);
    this.CustomizeAppearance();
}
private void CustomizeAppearance()
{
    LayoutControlGroupItem group = this.radCardView1.CardTemplate.Items[0] as LayoutControlGroupItem;
    CardViewItem item = (CardViewItem)group.Items[3];
    item.TextAlignment = ContentAlignment.MiddleCenter;
    item = (CardViewItem)group.Items[2];
    item.ForeColor = Color.Green;
    item = (CardViewItem)group.Items[1];
    item.Font = new Font("Arial", 14, FontStyle.Bold);
    item = (CardViewItem)group.Items[0];
    item.DrawFill = true;
    item.BackColor = Color.LightBlue;
    item.GradientStyle = GradientStyles.Solid;
    item = (CardViewItem)group.Items.Last;
    item.Visibility = ElementVisibility.Hidden;
}

Public Sub New()
    InitializeComponent()
    CardListViewElement.ItemSynchronizationProperties.Add(LightVisualElement.VisibilityProperty)
    Me.CustomizeAppearance()
End Sub
Private Sub CustomizeAppearance()
    Dim group As LayoutControlGroupItem = TryCast(Me.RadCardView1.CardTemplate.Items(0), LayoutControlGroupItem)
    Dim item As CardViewItem = DirectCast(group.Items(3), CardViewItem)
    item.TextAlignment = ContentAlignment.MiddleCenter
    item = DirectCast(group.Items(2), CardViewItem)
    item.ForeColor = Color.Green
    item = DirectCast(group.Items(1), CardViewItem)
    item.Font = New Font("Arial", 14, FontStyle.Bold)
    item = DirectCast(group.Items(0), CardViewItem)
    item.DrawFill = True
    item.BackColor = Color.LightBlue
    item.GradientStyle = GradientStyles.Solid
    item = DirectCast(group.Items.Last, CardViewItem)
    item.Visibility = ElementVisibility.Hidden
End Sub

See Also

Getting Started Structure Formatting Items Custom Items

In this article