Horizontal Image List in UI for WinForms

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

Horizontal Image List

5 Answers 87 Views

ListView

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

Martin asked on 04 Dec 2017, 09:17 AM

iconlisthorizontalscroll.png

Hi Jack,

There’s 1 scenario / control that I need to achieve that I could not.
So I’d appreciate if you could help me with this.

What I want is a horizontal list of (selectable) images with a text below each image. The list should also scroll horizontally
I want to add the image items programmatically, filling with a generic list of objects to fill the items with.
if content is wider that the control area. Images have a transparent background of course.
I’ve attached a image so that you can exactly see what I mean.

The ‘bad’ image was my first try of me with the RadListView (from the WinForms UI suite).
I tried to set the position of the text and image so that the text comes below the image, but that doesn’t seem to work properly.
I don’t know if its me or if it is a bug?

A working example of exactly this scenario / controltype would help.

5 Answers, 1 is accepted

answered on 05 Dec 2017, 09:25 AM

Hello Martin,

The following snippet shows how you can set the orientation of view, this way you will have the horizontal scrollbar. The snippet shows how to set the alignment as well:

var element = radListView1.ListViewElement.ViewElement as IconListViewElement;

element.Orientation = Orientation.Horizontal;

var image = Image.FromFile(@"C:\img\delete.png");

for (int i = 0; i < 20; i++)

{

var item = new ListViewDataItem("Item " + i);

item.Image = image;

item.ImageAlignment = ContentAlignment.TopCenter;

item.TextAlignment = ContentAlignment.BottomCenter;

item.TextImageRelation = TextImageRelation.ImageAboveText;

radListView1.Items.Add(item);

}

I hope this will be useful. Let me know if you have additional questions.

Regards,
Dimitar
Progress Telerik

Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

answered on 05 Dec 2017, 11:04 AM

Hi Dimitar,

This works quite well.

Although I had to add 1 line in this code not to get a nullref exception:
radListView1.ViewType = ListViewType.IconsView;

1.) And I assume that disable text editing in a item is done by the line below. Correct?
radListView1.AllowEdit = false; //***

2.) However, there is one other thing I mentoined: If I set the backcolor of a item to a certain color (like yellow),
and I hover over the items, then the hover color does not disappear. And also initially the yellow color does not look correct on all items.

You can reproduce this simply by adding this line below under item.Image = image;

item.BackColor = Color.Yellow;

3.) And last question: when I add a doubleclick event to the control, how do I know which item was clicked?
By the 'key' property of a item? Or tag property or something?