How to customise the display of listview items

[Mike]

Hi there.

I'm currently evaluating Telerik for an upcoming personal project.

The attached image is a very crude mock up of the type of look I'd like to achieve with the list view control, but I'm running into a few walls. Most other controls I've been able to work my way around but no so far with ListView.

I'm the control to show all items in ViewType ListView, Each item will have a thumb nail image, and I'd like to display a main header text (Series Name) with associated sub text of differing fonts and sizes. This is where I'm stumbling, any assistance would be greatly appreciated.

[Stefan]

Hi Mike,

Thank you for writing.

You can modify the visual items, by creating a custom item. At the following link you can find an example how to do this. Feel free to use it as a sample and extend it to fit your scenario: http://www.telerik.com/help/winforms/listview-custom-items.html.

I hope that you find this information useful. Should you have any other questions, do not hesitate to contact us.

Regards,
Stefan
Telerik

 

 

[Mike]

Hi Stefan,

Thanks for your reply.

Unfortunately I'm still left without a clue how to format my listview as per the image I uploaded in my first post.

Eg, picture on the left, and all text items sitting to the right of the image and positioned under each other. Using the example provided in your reply this is my result.

[Stefan]

Hello Mike,

You need to create a SimpleListViewVIsualItem, which will look as you need. In your last screenshot you are using DetailsView, while you need to use the ListView ViewMode. The article I have provided you can see an example how to use different elements to extend the default item. In your case, you will need two stack panels with the desired elements. Here is a sample implementation to put you in the right direction:

public class MyCustomVisualItem : SimpleListViewVisualItem
{
    private LightVisualElement headerElement;
    private LightVisualElement mainElement;
    private LightVisualElement footerElement;
    private LightVisualElement imageElement;
    private StackLayoutPanel horizotalStackLayoutPanel;
    private StackLayoutPanel verticalStackLayoutPanel;

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

        this.DrawText = false;

        this.verticalStackLayoutPanel = new StackLayoutPanel();
        this.verticalStackLayoutPanel.Orientation = Orientation.Horizontal;
        this.verticalStackLayoutPanel.ShouldHandleMouseInput = false;
        this.verticalStackLayoutPanel.NotifyParentOnMouseInput = true;
        this.Children.Add(this.verticalStackLayoutPanel);

        this.imageElement = new LightVisualElement();
        this.verticalStackLayoutPanel.Children.Add(imageElement);

        this.horizotalStackLayoutPanel = new StackLayoutPanel();
        this.horizotalStackLayoutPanel.Orientation = Orientation.Vertical;
        this.horizotalStackLayoutPanel.ShouldHandleMouseInput = false;
        this.horizotalStackLayoutPanel.NotifyParentOnMouseInput = true;
        this.verticalStackLayoutPanel.Children.Add(this.horizotalStackLayoutPanel);

        this.headerElement = new LightVisualElement();
        this.headerElement.Text = "header";
        this.headerElement.ShouldHandleMouseInput = false;
        this.headerElement.NotifyParentOnMouseInput = true;
        this.horizotalStackLayoutPanel.Children.Add(this.headerElement);


        this.mainElement = new LightVisualElement();
        this.mainElement.Text = "main element";
        this.horizotalStackLayoutPanel.Children.Add(this.mainElement);

        this.footerElement = new LightVisualElement();
        this.footerElement.Text = "footer";
        this.horizotalStackLayoutPanel.Children.Add(this.footerElement);
    }

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

        this.imageElement.Image = this.Data.Image;
        this.headerElement.Text = Convert.ToString(this.Data["Name"]);
        this.mainElement.Text = "Call " + Convert.ToString(this.Data["Phone"]);
        this.footerElement.Text = "Fax " + Convert.ToString(this.Data["Fax"]);
    }

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

I hope that you find this information useful.

Regards,
Stefan
Telerik