This is a migrated thread and some comments may be shown as answers.
Horizontal Image List
5 Answers 87 Views
This is a migrated thread and some comments may be shown as answers.
Martin
Top achievements
Rank 1
Martin asked on 04 Dec 2017, 09:17 AM

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

Sort by
0
Dimitar
Telerik team
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.
0
Martin
Top achievements
Rank 1
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?

 

0
Dimitar
Telerik team
answered on 06 Dec 2017, 07:39 AM
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
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.
0
Martin
Top achievements
Rank 1
answered on 07 Dec 2017, 07:57 AM

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.)

0
Dimitar
Telerik team
answered on 11 Dec 2017, 10:54 AM
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
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.
Asked by
Martin
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
Martin
Top achievements
Rank 1
Share this question
or