RadListBox with Item text and images

16 posts, 1 answers
  1. Robert Canal
    Robert Canal avatar
    17 posts
    Member since:
    Mar 2010

    Posted 28 Sep 2010 Link to this post

    I am trying to add an image next to the text information in the ListBox.

    I have a imageList that has the images i want to display.  I tried something like this.

    RadListBoxItem test1 = new RadListboxItem("ITEM" + imageList1.Images[0]);
    radListBox1.Items.Add(test1);

    But all i get is the "ITEMSystem.Drawing.Bitmap" instead of the image.... 
  2. Emanuel Varga
    Emanuel Varga avatar
    1336 posts
    Member since:
    May 2010

    Posted 01 Oct 2010 Link to this post

    Hello Robert,

    You cannot use it like this, if you want to set the image when creating a ListBoxItem and set the image to appear after the text you should change the default TextImageRelation property, like this:
    var listItem = new RadListBoxItem("ITEM");
    listItem.Image = imageList1.Images[0];
    listItem.TextImageRelation = TextImageRelation.TextBeforeImage;
    radListBox1.Items.Add(listItem);

    An example for this is also available in the Telerik Demos application under : DropDown & List -> List Control -> Data Bindings -> Unbound Mode

    Hope this helps, if you have any other questions or comments, please let me know,

    Best Regards,
    Emanuel Varga
  3. UI for WinForms is Visual Studio 2017 Ready
  4. Robert Canal
    Robert Canal avatar
    17 posts
    Member since:
    Mar 2010

    Posted 01 Oct 2010 Link to this post

    Thanks for the solution, works like a charm.  But I have a followup question...Is it possible to add another image after the 1st image.  So it would be "ITEM" image[0] image[1]

     

  5. Emanuel Varga
    Emanuel Varga avatar
    1336 posts
    Member since:
    May 2010

    Posted 01 Oct 2010 Link to this post

    Hello again Robert,

    It is possible to add multiple images to a RadListBox, but you will have to extend the RadListBoxItem class and change the structure of the ListBox item.

    For this, you can follow Nikolay's response in this thread (http://www.telerik.com/community/forums/winforms/ui-controls/radlistbox-with-multiple-images.aspx), there is also an example on how to do this there.

    Hope this helps, if you have any other questions or comments, please let me know,

    Best Regards,
    Emanuel Varga
  6. Robert Canal
    Robert Canal avatar
    17 posts
    Member since:
    Mar 2010

    Posted 01 Oct 2010 Link to this post

     

     

    I am trying to run the following example but keep getting an error

    "Unable to cast object of type 'Telerik.WinControls.Layouts.StackLayoutPanel' to type 'Telerik.WinControls.Layouts.StripLayoutPanel'.

    public
    class MyListBoxItem : RadListBoxItem

    {

    protected override void CreateChildElements()

    {

    base.CreateChildElements();

    ImageAndTextLayoutPanel layoutPanel = (ImageAndTextLayoutPanel)base.Children[2];

    StripLayoutPanel stripPanel = (StripLayoutPanel)layoutPanel.Children[1];  <------ERROR

    TextPrimitive itemText = (TextPrimitive)stripPanel.Children[0];

    StripLayoutPanel newStripPanel = new StripLayoutPanel();

    newStripPanel.Orientation = Orientation.Horizontal;

    ImagePrimitive secondImage = new ImagePrimitive();

    stripPanel.Children.Remove(itemText);

    newStripPanel.Children.AddRange(new RadElement[] { itemText, secondImage });

     

    stripPanel.Children.Insert(0, newStripPanel);

    }

    }

  7. Emanuel Varga
    Emanuel Varga avatar
    1336 posts
    Member since:
    May 2010

    Posted 03 Oct 2010 Link to this post

    Hello Robert,

    I've been meaning to ask you, can't you update to the new ListControl?, because the ListBox is obsolete and will be removed soon...

    If you cannot please let me know and i will try to help you with this further, but if you can, i would suggest opening a new thread in the DropDownList and ListControl section.

    Best Regards,
    Emanuel Varga
  8. Robert Canal
    Robert Canal avatar
    17 posts
    Member since:
    Mar 2010

    Posted 03 Oct 2010 Link to this post

    I was not aware of the ListControl, I just upgraded my version and will check it out.  I will let you know if I am still having issues, I would assume I will.

    Thanks

  9. Robert Canal
    Robert Canal avatar
    17 posts
    Member since:
    Mar 2010

    Posted 03 Oct 2010 Link to this post

    Does the listcontrol work like a typical Listbox control....Where you can place it on your form.  Or do you have to something else to get it to show up on the form....

  10. Answer
    Emanuel Varga
    Emanuel Varga avatar
    1336 posts
    Member since:
    May 2010

    Posted 04 Oct 2010 Link to this post

    Hello Robert,

    The ListControl looks exactly like the old ListBox, but it has better performance and fully supports virtualization.
    I have prepared a small proof of concept that creates a label and two images for a list Item,

    namespace RadListControlCustomItems
    {
        using System;
        using System.ComponentModel;
        using System.Drawing;
        using System.Windows.Forms;
        using Telerik.WinControls;
        using Telerik.WinControls.Enumerations;
        using Telerik.WinControls.Layouts;
        using Telerik.WinControls.Primitives;
        using Telerik.WinControls.UI;
     
        public partial class Form1 : Form
        {
            private RadListControl radListControl1;
     
            public Form1()
            {
                InitializeComponent();
                this.radListControl1 = new RadListControl();
                this.Size = new Size(500, 300);
                this.Load += new System.EventHandler(Form1_Load);
            }
     
            void Form1_Load(object sender, System.EventArgs e)
            {
                radListControl1.Dock = DockStyle.Fill;
                this.radListControl1.CreatingVisualListItem += CreatingVisualListItem;
                this.radListControl1.ItemDataBinding += this.ItemDataBinding;
                this.radListControl1.ItemDataBound += this.ItemDataBound;
     
                this.Controls.Add(radListControl1);
     
                PrepareDataSourceAndShowDropDown(1000);
            }
     
            private void PrepareDataSourceAndShowDropDown(int noObjects)
            {
                this.radListControl1.DataSource = null;
                this.radListControl1.DisplayMember = "Name";
     
                BindingList<BussinessObject> list = new BindingList<BussinessObject>();
                for (int i = 0; i < noObjects; ++i)
                {
                    BussinessObject businessObject = new BussinessObject();
                    businessObject.Image = Properties.Resources.combobox;
                    businessObject.Image2 = i % 2 == 0 ? Properties.Resources.calendar : null;
                    businessObject.Name = " Item " + (i + 1);
                    list.Add(businessObject);
                }
     
                this.radListControl1.DataSource = list;
            }
     
            #region Event Handlers
     
            private void ItemDataBound(object sender, ListItemDataBoundEventArgs args)
            {
                CustomListDataItem listDataItem = (CustomListDataItem)args.NewItem;
                BussinessObject dataObject = (BussinessObject)listDataItem.DataBoundItem;
     
                listDataItem.Name = dataObject.Name;
                listDataItem.Image = dataObject.Image;
                listDataItem.Image2 = dataObject.Image2;
            }
     
            private void ItemDataBinding(object sender, ListItemDataBindingEventArgs args)
            {
                args.NewItem = new CustomListDataItem();
            }
     
            private void CreatingVisualListItem(object sender, CreatingVisualListItemEventArgs args)
            {
                args.VisualItem = new CustomListVisualItem();
            }
     
            #endregion Event Handlers
     
            #region Overrides
     
            #endregion Overrides
        }
     
        public class BussinessObject : INotifyPropertyChanged
        {
            #region Fields
     
            private string name;
            private Image image;
            private Image image2;
     
            #endregion Fields
     
            #region Properties
     
            public string Name
            {
                get
                {
                    return name;
                }
                set
                {
                    if (this.name == value)
                    {
                        return;
                    }
     
                    this.name = value;
                    this.OnNotifyPropertyChanged("Name");
                }
            }
     
            public Image Image
            {
                get
                {
                    return this.image;
                }
                set
                {
                    if (this.image == value)
                    {
                        return;
                    }
     
                    this.image = value;
                    this.OnNotifyPropertyChanged("Image");
                }
            }
     
            public Image Image2
            {
                get
                {
                    return this.image2;
                }
                set
                {
                    if (this.image2 == value)
                    {
                        return;
                    }
     
                    this.image2 = value;
                    this.OnNotifyPropertyChanged("Image2");
                }
            }
     
            #endregion Properties
     
            #region INotifyPropertyChanged Implementation
     
            public event PropertyChangedEventHandler PropertyChanged;
     
            private void OnNotifyPropertyChanged(string property)
            {
                if (this.PropertyChanged != null)
                {
                    this.PropertyChanged(this, new PropertyChangedEventArgs(property));
                }
            }
     
            #endregion INotifyPropertyChanged Implementation
        }
     
        public class CustomListDataItem : RadListDataItem
        {
            #region RadProperties
     
            public static readonly RadProperty ImageProperty = RadProperty.Register("Image", typeof(Image), typeof(CustomListDataItem), new RadElementPropertyMetadata(null));
            public static readonly RadProperty Image2Property = RadProperty.Register("Image2", typeof(Image), typeof(CustomListDataItem), new RadElementPropertyMetadata(null));
            public static readonly RadProperty NameProperty = RadProperty.Register("Name", typeof(string), typeof(CustomListDataItem), new RadElementPropertyMetadata(""));
     
            #endregion RadProperties
     
            #region Properties
     
            public new Image Image
            {
                get
                {
                    return (Image)this.GetValue(CustomListDataItem.ImageProperty);
                }
                set
                {
                    this.SetValue(CustomListDataItem.ImageProperty, value);
                }
            }
     
            public Image Image2
            {
                get
                {
                    return (Image)this.GetValue(CustomListDataItem.Image2Property);
                }
                set
                {
                    this.SetValue(CustomListDataItem.Image2Property, value);
                }
            }
     
            public string Name
            {
                get
                {
                    return (string)this.GetValue(CustomListDataItem.NameProperty);
                }
                set
                {
                    this.SetValue(CustomListDataItem.NameProperty, value);
                }
            }
     
            #endregion Properties
     
            #region Overrides
     
            protected override void SetDataBoundItem(bool dataBinding, object value)
            {
                base.SetDataBoundItem(dataBinding, value);
                if (value is INotifyPropertyChanged)
                {
                    INotifyPropertyChanged item = value as INotifyPropertyChanged;
                    item.PropertyChanged += item_PropertyChanged;
                }
            }
     
            #endregion Overrides
     
            #region Private Methods
     
            private void item_PropertyChanged(object sender, PropertyChangedEventArgs e)
            {
                if (e.PropertyName == "Image")
                {
                    this.Image = (this.DataBoundItem as BussinessObject).Image;
                }
     
                if (e.PropertyName == "Image2")
                {
                    this.Image2 = (this.DataBoundItem as BussinessObject).Image2;
                }
     
                if (e.PropertyName == "Name")
                {
                    this.Name = (this.DataBoundItem as BussinessObject).Name;
                }
            }
     
            #endregion Private Methods
        }
     
        public class CustomListVisualItem : RadListVisualItem
        {
            #region Fields
     
            private RadLabelElement label = new RadLabelElement();
            private ImagePrimitive image = new ImagePrimitive();
            private ImagePrimitive image2 = new ImagePrimitive();
     
            #endregion Fields
     
            #region Initialization
     
            static CustomListVisualItem()
            {
                RadListVisualItem.SynchronizationProperties.Add(CustomListDataItem.ImageProperty);
                RadListVisualItem.SynchronizationProperties.Add(CustomListDataItem.Image2Property);
                RadListVisualItem.SynchronizationProperties.Add(CustomListDataItem.NameProperty);
            }
     
            #endregion Initialization
     
            #region Overrides
     
            protected override Type ThemeEffectiveType
            {
                get
                {
                    return typeof(RadListVisualItem);
                }
            }
     
            protected override void CreateChildElements()
            {
                base.CreateChildElements();
     
                this.label.StretchHorizontally = true;
     
                var stack = new StackLayoutPanel { Orientation = Orientation.Horizontal };
     
                image.ImageScaling = ImageScaling.SizeToFit;
                image2.ImageScaling = ImageScaling.SizeToFit;
     
                stack.Children.Add(label);
                stack.Children.Add(image);
                stack.Children.Add(image2);
     
                this.Children.Add(stack);
            }
     
            protected override void PropertySynchronized(RadProperty property)
            {
                var dataItem = (CustomListDataItem)this.Data;
     
                this.image2.Image = dataItem.Image2;
                this.image.Image = dataItem.Image;
                this.label.Text = dataItem.Name;
            }
     
            #endregion Overrides
        }
    }

    Hope this helps, if you have any other questions or comments, please let me know,

    Best Regards,
    Emanuel Varga
  11. Robert Canal
    Robert Canal avatar
    17 posts
    Member since:
    Mar 2010

    Posted 04 Oct 2010 Link to this post

    Looks like I had an issue with my update, I had to uninstall the win controls and reinstall before they would work correctly....Kind of junky but I got it to load correctly.  As for you example works like a charm, I am going to modify it a bunch though, I need it to work as a class instead of having it in my main form.  Thanks for the help....
  12. Emanuel Varga
    Emanuel Varga avatar
    1336 posts
    Member since:
    May 2010

    Posted 04 Oct 2010 Link to this post

    Hello again Robert,

    Sorry to hear about the problems... but I'm glad to hear that it is what you were expecting, if you have any other questions, please do not hesitate to say so,

    Best Regards,
    Emanuel Varga
  13. Peter
    Admin
    Peter avatar
    1148 posts

    Posted 06 Oct 2010 Link to this post

    Hi all,

    Emanuel, thank you for the solution.

    Robert, please note that you should restart the Visual Studio instance after you update the references of your project. Probably, you did not perform this step during the update process. Please refer to this article which concerns the application update.

    Regards,

    Peter
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  14. Robert Canal
    Robert Canal avatar
    17 posts
    Member since:
    Mar 2010

    Posted 06 Oct 2010 Link to this post

    I restarted Visual studio's multiple times, I even went so far as opening a new project and try the controls.  But for some reason none of the controls would render on the page it would only add the control to a pallet on at the bottom of the project.  Removing and re-installing is always my last option.  Hope this help explain the problem I was having.
  15. Robert Canal
    Robert Canal avatar
    17 posts
    Member since:
    Mar 2010

    Posted 08 Oct 2010 Link to this post

    Emanuel

    I have run into another problem....I created a class out of the code you provide and it works great when I run it in a RadForm.  But when I take that same code and put it into a RadRibbonForm it doesn't work.  Complies fine, I can step through the code and can see where the "BussinessObject" list is created, can see the "Control.DataSource=list;" has all the elements in it.  But when the RadRibbonForm opens the radListControl is blank, it acts like the controls visibility is set to false....and ideas?  Does the ControlList act funky on RadRibbonForms?

    help...
  16. Emanuel Varga
    Emanuel Varga avatar
    1336 posts
    Member since:
    May 2010

    Posted 08 Oct 2010 Link to this post

    Hello Robert,

    I tested it on a RadRibbonForm and it's working
    Please check to what control collection are you adding the ListControl, in the RadRibbonForm you should add it to the Panels control collection not to the forms collection, if you need an example i will be happy to provide one.
    this.panel1.Controls.Add(this.radListControl1);


    Hope this helps, if you have any other questions or comments, please let me know,

    Best Regards,
    Emanuel Varga
  17. Peter
    Admin
    Peter avatar
    1148 posts

    Posted 11 Oct 2010 Link to this post

    Hi Robert,

    I also cannot reproduce the issue with RadRibbonForm. Is it possible to send us a sample application where the issue can be reproduced? This will allow us to assist you further.

    Please note that you have to open a new support ticket in order to attach your files.

    I am looking forward to your response.

    Kind regards,
    Peter
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top
UI for WinForms is Visual Studio 2017 Ready