Custom Items in UI for WinForms

This is a migrated thread and some comments may be shown as answers.

Custom Items

13 Answers 417 Views

ListView

This is a migrated thread and some comments may be shown as answers.

13 Answers, 1 is accepted

answered on 10 Aug 2011, 02:55 PM

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;

}

answered on 10 Aug 2011, 03:50 PM

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

Accepted

answered on 16 Aug 2011, 09:52 AM

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

answered on 24 Dec 2012, 10:56 PM

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

}

answered on 27 Dec 2012, 01:57 PM

451032.zip

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.

answered on 14 Sep 2017, 01:25 PM

Hello Jamsheer,

Thank you for writing.

You can handle the formatting events and customize the appearance of the visual items, including their text: http://docs.telerik.com/devtools/winforms/listview/customizing-appearance/formatting-items.

Please also bear in mind that we try to keep our threads focused on a single topic. In the future, please consider opening new threads for questions which you cannot find already answered in the forums.

I hope this helps.

Regards,
Hristo
Progress Telerik

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.