Horizontal Image List

[Martin]

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.

[Dimitar]

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

[Martin]

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?

 

[Dimitar]

Hello Martin,

Yes, I have changed the view type at design time. 

1. This is the correct property for this.

2. You need to set the GradientStyle as well:

item.GradientStyle = Telerik.WinControls.GradientStyles.Solid;

3. Use the ItemMouseDoubleClick event. The Item will be passed in the event arguments. 

Should you have any other questions do not hesitate to ask.

Regards,
Dimitar
Progress Telerik

[Martin]

About issue 2, yes that is a working solution.

However, I think it should work with GradientStyle 'Lineair' as well. So it looks like a little bug when using this style.

(Issue 1 and 3 are working.)

[Dimitar]

Hi Martin,

This is not an issue. The linear gradient takes a particular number of colors which is determined in the by property. In addition, setting only the BackColor would not override any other properties set in the theme.

Should you have any other questions do not hesitate to ask.
 

Regards,
Dimitar
Progress Telerik