Telerik Winforms Custom RadListView Rows

A simple example using LightVisualElements and html for a custom ListView look.

Creates a listview with three columns, the first the row’s text field and columns two and three contain a StackElement with LightVisualElement children.

using System;
using System.ComponentModel;
using System.Drawing;
using System.Windows.Forms;
using Telerik.WinControls.Layouts;
using Telerik.WinControls.UI;

namespace TelerikWinFormsApp4
{
    public partial class RadForm1 : Telerik.WinControls.UI.RadForm
    {
        public RadForm1()
        {
            InitializeComponent();
            this.Size = new Size(500, 300);

            this.radListView1.VisualItemCreating += new ListViewVisualItemCreatingEventHandler(this.radListView1_VisualItemCreating);

            // Populate BullJiveTestListItem with fluff
            BindingList rows = new BindingList();
            for (int alpha = 65; alpha < 85; alpha++) rows.Add(new BullJiveTestListItem(Convert.ToChar(alpha).ToString()));

            radListView1.DataSource = rows;
            radListView1.FullRowSelect = true;
            radListView1.AllowArbitraryItemHeight = true;
        }


        private void radListView1_VisualItemCreating(object sender, ListViewVisualItemCreatingEventArgs e)
        {
            if (radListView1.ViewType == ListViewType.ListView && !(e.VisualItem is BaseListViewGroupVisualItem))
            {
                e.VisualItem = new BullJiveTestVisualItem();
            }
        }
    }

    public class BullJiveTestVisualItem : SimpleListViewVisualItem
    {
        private LightVisualElement hBox0, hBox1;
        private StackLayoutPanel horizontalLayout;
        private Point newSize = new Point(200, 0);


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

            horizontalLayout = new StackLayoutPanel();
            horizontalLayout.Orientation = Orientation.Horizontal;

            hBox0 = new LightVisualElement();
            hBox0.MinSize = new Size(newSize);
            horizontalLayout.Children.Add(hBox0);

            hBox1 = new LightVisualElement();
            hBox1.MinSize = new Size(newSize);
            horizontalLayout.Children.Add(hBox1);

            Children.Add(horizontalLayout);
        }


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

            if (this.FindAncestor() == null) return;

            this.Text = "Text";

            hBox0.Text = "Value0: " + this.Data["Value0"] + "" +
                         "Value1: " + this.Data["Value1"] + "";

            hBox1.Text = "Value2: " + this.Data["Value2"] + "" +
                         "Value3: " + this.Data["Value3"] + "";

            TextAlignment = ContentAlignment.TopLeft;
        }


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

    public class BullJiveTestListItem
    {
        public BullJiveTestListItem(string s)
        {
            Value0 = s + "0";
            Value1 = s + "1";
            Value2 = s + "2";
            Value3 = s + "3";
        }


        public string Value0 { get; set; }
        public string Value1 { get; set; }
        public string Value2 { get; set; }
        public string Value3 { get; set; }
    }
}