Customizing existing items

Items appearance in RadListView can be customized by making use of the VisualItemFormatting event. The following example, demonstrates how you can change the color of an item which is being selected

Note
By using this event to customize the items appearance, you should always provide an else clause, where you reset the appearance settings which you have introduced. This is necessery since RadListView uses data virtualization, which might lead to unpredicted appearance results when items are being reused.

Copy[C#] Customizing items

void radListView1_VisualItemFormatting(object sender, Telerik.WinControls.UI.ListViewVisualItemEventArgs e)
{
    if (e.VisualItem.Selected)
    {
        e.VisualItem.NumberOfColors = 1;
        e.VisualItem.BackColor = Color.Yellow;
        e.VisualItem.BorderColor = Color.Blue;
    }
    else
    {
        e.VisualItem.ResetValue(LightVisualElement.NumberOfColorsProperty, Telerik.WinControls.ValueResetFlags.Local);
        e.VisualItem.ResetValue(LightVisualElement.BackColorProperty, Telerik.WinControls.ValueResetFlags.Local);
        e.VisualItem.ResetValue(LightVisualElement.BorderColorProperty, Telerik.WinControls.ValueResetFlags.Local);
    }
}

Copy[VB.NET] Customizing items

Private Sub radListView1_VisualItemFormatting(ByVal sender As Object, ByVal e As Telerik.WinControls.UI.ListViewVisualItemEventArgs)
    If e.VisualItem.Selected Then
        e.VisualItem.NumberOfColors = 1
        e.VisualItem.BackColor = Color.Yellow
        e.VisualItem.BorderColor = Color.Blue
    Else
        e.VisualItem.ResetValue(LightVisualElement.NumberOfColorsProperty, Telerik.WinControls.ValueResetFlags.Local)
        e.VisualItem.ResetValue(LightVisualElement.BackColorProperty, Telerik.WinControls.ValueResetFlags.Local)
        e.VisualItem.ResetValue(LightVisualElement.BorderColorProperty, Telerik.WinControls.ValueResetFlags.Local)
    End If
End Sub

Creating custom items

RadListView allows you to create and use your own custom visual items. This can be done by making use of the VisualItemCreating event. The following example demonstrates creating a visual item with two buttons in it.

First let's create a custom visual item by inheriting from the SimpleListViewVisualItem class:

Copy[C#] Creating custom item

public class MyCustomVisualItem : SimpleListViewVisualItem
{
    private RadButtonElement buttonElement1;
    private RadButtonElement buttonElement2;
    private LightVisualElement contentElement;
    private StackLayoutPanel stackLayout;

    protected override void CreateChildElements()
    {
        base.CreateChildElements();

        this.stackLayout = new StackLayoutPanel();
        this.stackLayout.Orientation = Orientation.Horizontal;
        this.stackLayout.EqualChildrenWidth = true;

        this.contentElement = new LightVisualElement();
        this.contentElement.StretchHorizontally = true;
        this.contentElement.MinSize = new Size(120, 0);
        this.stackLayout.Children.Add(this.contentElement);

        this.buttonElement1 = new RadButtonElement();
        this.buttonElement1.Text = "Button1";
        this.stackLayout.Children.Add(this.buttonElement1);

        this.buttonElement2 = new RadButtonElement();
        this.buttonElement2.Text = "Button2";
        this.stackLayout.Children.Add(this.buttonElement2);

        this.Children.Add(this.stackLayout);
    }

    protected override void SynchronizeProperties()
    {
        base.SynchronizeProperties();

        this.Text = "";
        this.contentElement.Text = Convert.ToString(this.Data["Name"]);
        this.buttonElement1.Text = "Call " + Convert.ToString(this.Data["Phone"]);
        this.buttonElement2.Text = "Fax " + Convert.ToString(this.Data["Fax"]);
    }

    protected override Type ThemeEffectiveType
    {
        get
        {
            return typeof(SimpleListViewVisualItem);
        }
    }
}

Copy[VB.NET] Creating custom item

Public Class MyCustomVisualItem
    Inherits SimpleListViewVisualItem
    Private buttonElement1 As RadButtonElement
    Private buttonElement2 As RadButtonElement
    Private contentElement As LightVisualElement
    Private stackLayout As StackLayoutPanel

    Protected Overrides Sub CreateChildElements()
        MyBase.CreateChildElements()

        Me.stackLayout = New StackLayoutPanel()
        Me.stackLayout.Orientation = Orientation.Horizontal
        Me.stackLayout.EqualChildrenWidth = True

        Me.contentElement = New LightVisualElement()
        Me.contentElement.StretchHorizontally = True
        Me.contentElement.MinSize = New Size(120, 0)
        Me.stackLayout.Children.Add(Me.contentElement)

        Me.buttonElement1 = New RadButtonElement()
        Me.buttonElement1.Text = "Button1"
        Me.stackLayout.Children.Add(Me.buttonElement1)

        Me.buttonElement2 = New RadButtonElement()
        Me.buttonElement2.Text = "Button2"
        Me.stackLayout.Children.Add(Me.buttonElement2)

        Me.Children.Add(Me.stackLayout)
    End Sub

    Protected Overrides Sub SynchronizeProperties()
        MyBase.SynchronizeProperties()

        Me.Text = ""
        Me.contentElement.Text = Convert.ToString(Me.Data("Name"))
        Me.buttonElement1.Text = "Call " + Convert.ToString(Me.Data("Phone"))
        Me.buttonElement2.Text = "Fax " + Convert.ToString(Me.Data("Fax"))
    End Sub

    Protected Overrides ReadOnly Property ThemeEffectiveType() As Type
        Get
            Return GetType(SimpleListViewVisualItem)
        End Get
    End Property
End Class

To use the newly created items, you should handle the VisualItemCreating event as shown below:

Copy[C#] Use the custom item

void radListView1_VisualItemCreating(object sender, ListViewVisualItemCreatingEventArgs e)
{
    e.VisualItem = new MyCustomVisualItem();
}

Copy[VB.NET] Use the custom item

Private Sub radListView1_VisualItemCreating(ByVal sender As Object, ByVal e As ListViewVisualItemCreatingEventArgs) Handles RadListView1.VisualItemCreating
    e.VisualItem = New MyCustomVisualItem()
End Sub

RadControls for WinForms

Customizing existing items

Creating custom items