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

Custom Items Re-drawing itself, and location of checkbox?

5 Answers 152 Views

CheckedListBox

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

Robert LeGood asked on 12 Jun 2012, 10:03 PM

Two questions / issues. Easy one first.

a) How do I control the alignment of the checkbox that appears in a ListViewDataItem? It seems stuck in the middle and I'd like to align it with my text.

b) I'm creating custom ListViewDataItems, as I need to add a "legend" to each drop down. Here's the sample code I'm using...

First, the code in _VisualItemCreating

private void rlvLegend_VisualItemCreating(object sender, ListViewVisualItemCreatingEventArgs e)

{

e.VisualItem = new LegendCustomVisualItem();

}

Second, the override of CreateChildElements

protected override void CreateChildElements()

{

base.CreateChildElements();

this.stackLayout = new StackLayoutPanel();

this.stackLayout.Orientation = Orientation.Vertical;

this.stackLayout.EqualChildrenWidth = true;

//Header space

this.p1 = new RadPanelElement();

p1.AutoSize = true;

p1.MinSize = new Size(200, 20);

p1.NotifyParentOnMouseInput = true;

p1.ShouldHandleMouseInput = false;

p1.PanelBorder.Visibility = ElementVisibility.Hidden;

this.stackLayout.Children.Add(p1);

this.stackLayout.Children.Add(new LegendCustomStack("Test 1", Color.Red, Color.Red));

this.stackLayout.Children.Add(new LegendCustomStack("Test 2", Color.Blue, Color.Red));

this.stackLayout.Children.Add(new LegendCustomStack("Test 3", Color.Aquamarine, Color.Red));

this.stackLayout.Children.Add(new LegendCustomStack("Test 4", Color.DimGray, Color.Red));

this.Children.Add(this.stackLayout);

}

Lastly, the other items I've created in the last couple lines..

public class LegendCustomStack : StackLayoutPanel

{

private int _height = 15;

public LegendCustomStack(string labelText, Color fillColor, Color outlineColor)

{

//spacer panel

RadPanelElement p2;

p2 = new RadPanelElement();

p2.AutoSize = true;

p2.MinSize = new Size(25, _height);

p2.NotifyParentOnMouseInput = true;

p2.ShouldHandleMouseInput = false;

p2.PanelBorder.Visibility = ElementVisibility.Hidden;

this.Children.Add(p2);

RadPanelElement p3 = new RadPanelElement();

p3.AutoSize = false;

p3.Size = new Size(_height, _height);

p3.PanelFill.NumberOfColors = 1;

p3.PanelFill.BackColor = fillColor;

p3.PanelBorder.ForeColor = outlineColor;

p3.NotifyParentOnMouseInput = true;

p3.ShouldHandleMouseInput = false;

//p3.Alignment = ContentAlignment.MiddleLeft;

this.Children.Add(p3);

RadLabelElement l1 = new RadLabelElement();

l1.Text = labelText;

l1.NotifyParentOnMouseInput = true;

l1.ShouldHandleMouseInput = false;

l1.TextAlignment = ContentAlignment.TopLeft;

this.Children.Add(l1);

}

When I load up my items, it looks fine, until I have too many that the scroll bars appear. If I scroll down, everything is fine. If I scroll up, the LegendCustomStack items seem to jump around randomly from ListDataItem to ListDataItem (sometimes completely disappearing)

(I created a version where, the colours were random to better demonstrate the behavior, but I think I backout out those changes)

Any ideas what I'm doing wrong?

Thanks!!!

Rob.

5 Answers, 1 is accepted

answered on 13 Jun 2012, 01:40 PM

Here... this should demonstrate the issue a little better. Note that it only happens for me when I scroll up, scrolling down doesn't seem to be an issue..

protected override void CreateChildElements()

{

base.CreateChildElements();

this.stackLayout = new StackLayoutPanel();

this.stackLayout.Orientation = Orientation.Vertical;

this.stackLayout.EqualChildrenWidth = true;

//Header space

this.p1 = new RadPanelElement();

p1.AutoSize = true;

p1.MinSize = new Size(200, 20);

p1.NotifyParentOnMouseInput = true;

p1.ShouldHandleMouseInput = false;

p1.PanelBorder.Visibility = ElementVisibility.Hidden;

this.stackLayout.Children.Add(p1);

Random randonGen = new Random();

Color rC1 = Color.FromArgb(randonGen.Next(255), randonGen.Next(255),

randonGen.Next(255));

Color rC2 = Color.FromArgb(randonGen.Next(255), randonGen.Next(255),

randonGen.Next(255));

Color rC3 = Color.FromArgb(randonGen.Next(255), randonGen.Next(255),

randonGen.Next(255));

Color rC4 = Color.FromArgb(randonGen.Next(255), randonGen.Next(255),

randonGen.Next(255));

this.stackLayout.Children.Add(new LegendCustomStack("Test 1", rC1, rC2));

this.stackLayout.Children.Add(new LegendCustomStack("Test 2", rC3, rC4));

this.Children.Add(this.stackLayout);

}

answered on 14 Jun 2012, 03:37 PM

WindowsFormsApplication48.zip

Hi Robert,

Thank you for contacting us.

You can change the location of the check box by overriding the ArrangeContentCore method. Please refer to the attached project for additional details.

As to the second issue, RadListView uses a virtualization mechanism to display its items. This means that it only creates the least number of visual items to fit in the visible part of the control. When you scroll up and down, the visual items are being reused to display different data items - they are detached from an item that is not visible anymore and then attached to some other data item.

This means that you should not store any states or data in the visual items as they are used to only display information. There is a special method which you should override - SynchronizeProperties. This method is called when the visual item has been attached to a different data item or when the data item has changed its properties. You should use this method to update the information that the visual item displays. This is also demonstrated in the attached project. Please refer to it for further details.

I hope you find this useful. Do not hesitate to write back if you have any additional questions.

All the best,
Ivan Todorov
the Telerik team

RadControls for WinForms Q2'12 release is now live! Check out what's new or download a free trial >>