How to customise the display of listview items

4 posts, 0 answers
  1. Mike
    Mike avatar
    2 posts
    Member since:
    Nov 2014

    Posted 05 Nov 2014 Link to this post

    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.

  2. Stefan
    Admin
    Stefan avatar
    2891 posts

    Posted 07 Nov 2014 Link to this post

    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.

     
  3. UI for WinForms is Visual Studio 2017 Ready
  4. Mike
    Mike avatar
    2 posts
    Member since:
    Nov 2014

    Posted 07 Nov 2014 in reply to Stefan Link to this post

    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.

  5. Stefan
    Admin
    Stefan avatar
    2891 posts

    Posted 10 Nov 2014 Link to this post

    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.

     
Back to Top