This is a migrated thread and some comments may be shown as answers.

How to customise the display of listview items

3 Answers 352 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Mike
Top achievements
Rank 1
Mike asked on 06 Nov 2014, 01:28 AM
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.

3 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 07 Nov 2014, 02:03 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Mike
Top achievements
Rank 1
answered on 07 Nov 2014, 09:32 PM
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.

0
Stefan
Telerik team
answered on 10 Nov 2014, 11:24 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
ListView
Asked by
Mike
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Mike
Top achievements
Rank 1
Share this question
or