Edit this page

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.

Fig.1 Modifying RadProperties

cardview-customzing-appearance-visual-data-representation 001

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

Was this article helpful? Yes No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy