Horizontal Image List

6 posts, 0 answers
  1. Martin
    Martin avatar
    7 posts
    Member since:
    Dec 2017

    Posted 04 Dec 2017 Link to this post

    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.


  2. Dimitar
    Admin
    Dimitar avatar
    2918 posts

    Posted 05 Dec 2017 Link to this post

    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.
  3. Martin
    Martin avatar
    7 posts
    Member since:
    Dec 2017

    Posted 05 Dec 2017 in reply to Dimitar Link to this post

    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?

     

  4. Dimitar
    Admin
    Dimitar avatar
    2918 posts

    Posted 06 Dec 2017 Link to this post

    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.
  5. Martin
    Martin avatar
    7 posts
    Member since:
    Dec 2017

    Posted 07 Dec 2017 in reply to Dimitar Link to this post

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

  6. Dimitar
    Admin
    Dimitar avatar
    2918 posts

    Posted 11 Dec 2017 Link to this post

    Hi Martin,

    This is not an issue. The linear gradient takes a particular number of colors which is determined in the by NumberOfColors 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.
Back to Top