Custom Items

12 posts, 1 answers
  1. tom
    tom avatar
    15 posts
    Member since:
    May 2011

    Posted 05 Aug 2011 Link to this post

    I was trying to use the RadListView with custom items.
    But as in "Run Demo" examples, I can't select a item or better the visual state of the item doesn't change.
    Does anybody has a soluton for this? I have looked through the properties, but haven't found any appropriate.
  2. Alex Lawson
    Alex Lawson avatar
    43 posts
    Member since:
    May 2008

    Posted 10 Aug 2011 Link to this post

    I have just implemented a listview using custom objects and found that the select function behaves as per the normal list box, the following points may help:

    • Define your columns and use the internal data referencing
    • Switch off edit and remove if you do not need them
    • Switch view to icon view to make most of customisations

    I ended up using a straight control dragged onto the form, and using this code to get the layout to display:

               /// <summary>
               /// Initializes a new instance of the <see cref="Login"/> class.
               /// </summary>
               public Login()
               {
                   InitializeComponent();

                   lstSelect.ItemSize = new Size(250, 150);
                   lstSelect.ItemSpacing = 10;
               }

               /// <summary>
            /// Handles the VisualItemFormatting event of the lstSelect control.
            /// </summary>
            /// <param name="sender">The source of the event.</param>
            /// <param name="e">The <see cref="Telerik.WinControls.UI.ListViewVisualItemEventArgs"/> instance containing the event data.</param>
            void lstSelect_VisualItemFormatting(object sender, Telerik.WinControls.UI.ListViewVisualItemEventArgs e)
            {
                // Initialise
     
                Image returnImage = null;
     
                // Convert image
     
                try
                {
                    var ms = new MemoryStream((byte[])e.VisualItem.Data["image"]);
                    returnImage = Image.FromStream(ms);
                }
                catch
                {
                }
     
                // Setup item
     
                e.VisualItem.Tag = e.VisualItem.Data["id"];
                e.VisualItem.Text = "<html><span style=\"color:#040203;font-size:12pt;\"><br/><br/>" + e.VisualItem.Data["name"] + "</span>";
                e.VisualItem.ImageLayout = ImageLayout.Center;
                e.VisualItem.ImageAlignment = ContentAlignment.MiddleCenter;
                e.VisualItem.Image = returnImage;
                e.VisualItem.TextAlignment = ContentAlignment.TopCenter;
                e.VisualItem.BorderColor = Color.Blue;
                e.VisualItem.BorderColor2 = Color.BlueViolet;
                e.VisualItem.BackColor = Color.LightSteelBlue;
            }
  3. UI for WinForms is Visual Studio 2017 Ready
  4. Alexander
    Admin
    Alexander avatar
    306 posts

    Posted 10 Aug 2011 Link to this post

    Hello everyone,

    @ Alex
    Thank you for sharing your solution with us.

    @ Tom
    The custom items in the RadListView examples contain custom elements and visual appearance. You can inherit the visual settings of the item you derive from overriding the ThemeEffectiveType property. For example, if you make a custom IconListViewVisualItem, you can use:

    private class CustomVisualItem : IconListViewVisualItem
    {
        protected override Type ThemeEffectiveType
        {
            get
            {
                return typeof(IconListViewVisualItem);
            }
        }
    }

    I hope it helps.

    Best regards,
    Alexander
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get now >>

  5. tom
    tom avatar
    15 posts
    Member since:
    May 2011

    Posted 10 Aug 2011 Link to this post

    @Alex

    Thank you for your solution, but I have used a custom visual item derived from IconListViewVisualItem as in the RadDemo Example.
    With this approach I don't need the VisualItemFormatting event.

    @Alexander

    Thank you for your hint. This works fine for the theming, but it doesn't solve my problem. I don't know why but the selected item is now displayed with a different color. All items have the same visual appearance. Only if I move with the mouse cursor over the items, one of them is displayed as hottracked item. Do you have a idea what I am doing wrong?
  6. tom
    tom avatar
    15 posts
    Member since:
    May 2011

    Posted 10 Aug 2011 Link to this post

    @Alex

    You are right. I have tried it your way and everything works as expected. I found the way deriving the IconListViewVisualItem an very elegant way, but at the moment I don't see a possibilty to use it.
  7. Answer
    Ivan Todorov
    Admin
    Ivan Todorov avatar
    688 posts

    Posted 16 Aug 2011 Link to this post

    Hello Tom,

    I was able to identify the reason for not having your custom item displayed correctly when it is selected. This is happening because the SynchronizeProperties() function in our example does not call its base implementation. Here is how it should be used:
    protected override void SynchronizeProperties()
    {
        base.SynchronizeProperties();
     
        this.imageElement.Image = System.Drawing.Image.FromStream(new System.IO.MemoryStream((byte[])this.Data["Image"]));
        this.titleElement.Text = Convert.ToString(this.Data["AlbumName"]);
        this.artistElement.Text = Convert.ToString(this.Data["ArtistName"]);
        double rating = (double)this.Data["Rating"];
        this.ratingElement.Rating = (int)rating;
    }

    I hope this is helpful. Feel free to ask if you have further questions.

    Kind regards,
    Ivan Todorov
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get now >>

  8. tom
    tom avatar
    15 posts
    Member since:
    May 2011

    Posted 16 Aug 2011 Link to this post

    Thank you. Exactly this was missing.

    Best regards,
    Tom
  9. Dirk
    Dirk avatar
    2 posts
    Member since:
    Jul 2011

    Posted 07 May 2012 Link to this post

    I had the same issue even with calling base SyncronizeProperties after creating a Custom Visual element following this recipe:
    http://www.telerik.com/help/winforms/listview-custom-items.html 
    The solution for me was to mess around with
    	NotifyParentOnMouseInput = true,
    	ShouldHandleMouseInput = false,
    
    along the visual chain (I am using several nested StackPanels). The hint for that was here: http://www.telerik.com/help/winforms/tpf-handling-user-input.html  It would be nice if the documentation was more cross linked. Would have saved me hours of research.
  10. Ivan Todorov
    Admin
    Ivan Todorov avatar
    688 posts

    Posted 07 May 2012 Link to this post

    Hi Dirk,

    Yes, when you place child elements that can receive mouse input inside a list view item, they do not notify the item about the input, hence the item not being selectable. The solution you have found is the correct one to handle this case. Thank you for your feedback about our documentation. We will consider covering this case in the Custom items article.

    Should you have any future questions, do not hesitate to contact us.

    Greetings,
    Ivan Todorov
    the Telerik team
    RadControls for WinForms Q1'12 release is now live! Check out what's new or download a free trial >>
  11. Adrian
    Adrian avatar
    5 posts
    Member since:
    Dec 2011

    Posted 24 Dec 2012 Link to this post

    I am having an issue with everything that has been said here. At first I could not get the item to be selected and/or highlighted. I got it working now with base.synchronizeproperties(); however, the behavior is unpredictable. When my mouse passes over an item it is highlighted as it should be by shadowing out the element but when I actually click on it (in which case it should turn gold) nothing happens. It looks as if it is selected for an almost undetectable split second but then is quickly unselected. At times it does work but once one item is selected nothing else can be selected for a while until the program crashes with due to a null in my selected index changed event.

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using Telerik.WinControls.UI;
    using Telerik.WinControls.Layouts;
    using System.Drawing;
    using Telerik.WinControls;
    using System.Windows.Forms;
     
    namespace Crime_Information_System
    {
        public class csCustomInboxItem : SimpleListViewVisualItem
        {
            private LightVisualElement Sender;
            private LightVisualElement Subject;
            private LightVisualElement TimeStamp;
            private StackLayoutPanel stackLayout;
     
            protected override void CreateChildElements()
            {
                base.CreateChildElements();
     
                stackLayout = new StackLayoutPanel();
                stackLayout.Orientation = Orientation.Vertical;
     
                Sender = new LightVisualElement();
                Sender.TextAlignment = ContentAlignment.TopLeft;
                Sender.Margin = new Padding(1, 1, 1, 2);
                Sender.Font = new System.Drawing.Font("Segoe UI", 10, FontStyle.Bold, GraphicsUnit.Point);
                stackLayout.Children.Add(Sender);
     
                TimeStamp = new LightVisualElement();
                TimeStamp.TextAlignment = ContentAlignment.TopLeft;
                TimeStamp.Margin = new Padding(2, 1, 1, 2);
                TimeStamp.Font = new System.Drawing.Font("Segoe UI", 10, FontStyle.Regular, GraphicsUnit.Point);
                TimeStamp.ForeColor = Color.Black;
                stackLayout.Children.Add(TimeStamp);
     
                Subject = new LightVisualElement();
                Subject.TextAlignment = ContentAlignment.TopLeft;
                Subject.Margin = new Padding(2, 3, 1, 1);
                Subject.Font = new System.Drawing.Font("Segoe UI", 9, FontStyle.Regular, GraphicsUnit.Point);
                Subject.ForeColor = Color.Blue;
                stackLayout.Children.Add(Subject);
     
                this.Children.Add(stackLayout);
     
                this.Padding = new Padding(1, 2, 1, 2);
                this.Shape = new RoundRectShape(3);
                this.BorderColor = Color.Black;
                this.BorderGradientStyle = GradientStyles.Solid;
                this.DrawBorder = true;
                this.DrawFill = true;
                this.BackColor = Color.Azure;
                this.GradientStyle = GradientStyles.Solid;
     
                //NotifyParentOnMouseInput = true;
                //ShouldHandleMouseInput = false;
     
            }
     
            protected override void SynchronizeProperties()
            {
                base.SynchronizeProperties();
     
                this.Sender.Text = Convert.ToString(CentralDataStore.AllUsers.Find(p => p.intUserID ==
                    Convert.ToInt64(this.Data["SenderID"])).strFirstName + " " +
                    CentralDataStore.AllUsers.Find(p => p.intUserID ==
                    Convert.ToInt64(this.Data["SenderID"])).strLastName);
     
                if (Convert.ToDateTime(this.Data["Date"]).Date == DateTime.Now.Date) //uses time sent as opposed to a real date
                {
                    this.TimeStamp.Text = Convert.ToDateTime(this.Data["Date"]).ToShortTimeString();
                }
     
                else
                {
                    this.TimeStamp.Text = Convert.ToDateTime(this.Data["Date"]).ToShortDateString();
                }
     
                Subject.Text = this.Data["Subject"].ToString();
     
                if (Convert.ToInt32(this.Data["Read"]) == 1)
                {
                    Sender.Font = new System.Drawing.Font("Segoe UI", 10, FontStyle.Italic, GraphicsUnit.Point);
                    Sender.ForeColor = Color.Gray;
     
                    TimeStamp.Font = TimeStamp.Font = new System.Drawing.Font("Segoe UI", 10, FontStyle.Italic, GraphicsUnit.Point);
                    TimeStamp.ForeColor = Color.Gray;
     
                    Subject.Font = new System.Drawing.Font("Segoe UI", 9, FontStyle.Italic, GraphicsUnit.Point);
                    Subject.ForeColor = Color.Gray;
                }
     
                else
                {
                    Sender.Font = new System.Drawing.Font("Segoe UI", 10, FontStyle.Bold, GraphicsUnit.Point);
                    Sender.ForeColor = Color.Black;
     
                    TimeStamp.Font = TimeStamp.Font = new System.Drawing.Font("Segoe UI", 10, FontStyle.Regular, GraphicsUnit.Point);
                    TimeStamp.ForeColor = Color.Black;
     
                    Subject.Font = new System.Drawing.Font("Segoe UI", 9, FontStyle.Regular, GraphicsUnit.Point);
                    Subject.ForeColor = Color.Blue;
                }
     
                this.Text = ""; //this is here to erase the system.Crime_Information_System.o_Email from
                // the listitem shown.
     
                
     
            }
     
     
            protected override Type ThemeEffectiveType
            {
                get
                {
                    return typeof(IconListViewVisualItem);
                }
            }
     
            protected override SizeF MeasureOverride(SizeF availableSize)
            {
                SizeF measuredSize = base.MeasureOverride(availableSize);
     
                this.stackLayout.Measure(measuredSize);
     
                return measuredSize;
     
            }
     
            protected override SizeF ArrangeOverride(SizeF finalSize)
            {
                base.ArrangeOverride(finalSize);
     
                this.stackLayout.Arrange(new RectangleF(PointF.Empty, finalSize));
     
                return finalSize;
            }
        }
    }
     
     
    //and this is the event code I am running on my form that should pop up a message box with the data that I am looking for.
     
    private void radListView2_SelectedIndexChanged(object sender, EventArgs e)
            {
                oEmail Sender = this.radListView2.Items[radListView2.SelectedIndex].DataBoundItem as oEmail;
                MessageBox.Show(Sender.Body);
            }
  12. Adrian
    Adrian avatar
    5 posts
    Member since:
    Dec 2011

    Posted 26 Dec 2012 Link to this post

    I figured it out. I was using 
    NotifyParentOnMouseInput = true,
    	ShouldHandleMouseInput = false,

    in the wrong way. You have to set those properties for each light visual element not for the class itself
  13. Stefan
    Admin
    Stefan avatar
    2890 posts

    Posted 27 Dec 2012 Link to this post

    Hello Marvin,

    That is correct, to allow the selection you need to set the NotifyParentOnMouseInput to true and the ShouldHandleMouseInput to false of all your elements (Sender, TimeStamp and Subject), so the mouse events can be transferred to the above elements. This will fix the selection issue. 

    Attached you can find a sample project using your code.

    I hope this helps.

    Regards,
    Stefan
    the Telerik team
    Q3’12 of RadControls for WinForms is available for download (see what's new). Get it today.
Back to Top
UI for WinForms is Visual Studio 2017 Ready