TableLayoutPanel with nested autosized user controls performance issue - c#

I'm facing with nasty performance issue when using TableLayoutPanel. I have a simple user control with RadioButton and LinkLabel. Text of LinkLabel is dynamic so entire control have AutoSize property set to true.
Now I have a Panel with AutoScroll set to true and TableLayoutPanel auto sized and with 2 columns inside it. This TableLayoutPanel is populated with above-mentioned user controls:
private void PopulateLocationItemsTable(Control[] Controls)
{
//Suspend outher Panel and set AutoScroll to false just in case.
panelLocationItemsTableCountainer.SuspendLayout();
panelLocationItemsTableCountainer.AutoScroll = false;
//Suspend TableLayoutPanel
tableLocationItems.SuspendLayout();
Controls = Controls.OrderBy(c => c.Text).ToArray();
//Populate left column
int verticalPosition = 3;
int leftColumnControlsNumber = Controls.Length / 2;
for (int i = 0; i < leftColumnControlsNumber; i++)
{
tableLocationItems.Controls.Add(Controls[i], 0,0);
Controls[i].Location = new Point(10, verticalPosition);
verticalPosition += 17;
}
//Populate right column
verticalPosition = 3;
for (int i = leftColumnControlsNumber; i < Controls.Length; i++)
{
tableLocationItems.Controls.Add(Controls[i], 0, 1);
Controls[i].Location = new Point(10, verticalPosition);
verticalPosition += 17;
}
//Resume TableLayoutPanel
tableLocationItems.ResumeLayout(true);
//And restore outher Panel state
panelLocationItemsTableCountainer.AutoScroll = true;
panelLocationItemsTableCountainer.ResumeLayout(true);
}
The problem is that user controls initially populated in FormLoad event and the Form just hangs for around 10 seconds before it actually appears. This is completely unacceptable for me.
This issue goes away if I set AutoSize property of user control to false. I also was tried to put user controls directly to the outher Panel and it also works fine. The problem is just with TableLayoutPanel. Is anyone faced such issue and found the solution? Of corse I can place my user controls myself directly to the Panel calculating right coordinales but using TableLayoutPanel is a "correct" way for such tasks.

Using the TableLayoutPanel is the right approach but you'll want to think of the columns in that control as static widths. I had an application where I faced almost exactly the same problem using that panel and realized I'd just been looking at it all wrong.
If there are two columns, and my container (e.g. a form) is 300 pixels wide, then each column is 150 pixels wide (minus padding and stuff) so the controls inside those columns have to react rather than the columns reacting.
The other reason you really need to look at it this way is because the engine doesn't layout everything in memory first (like the WPF framework does) so it's extremely in efficient at its core since it commits the changes immediately.

Related

user controls overlap inside a list-like user control in C# Winform

Created my own user control (height = about 40 - 45 px) and tried to arrange them to a (vertical) list in a Panel & FlowLayoutPanel (with autoscroll property enabled)..
It works great and all with about 300 items....
The problem was when the item count reaches over 1000. Somewhere in the middle. The list ends, and the rest of the items get stacked for some reason but the scroll bar seems to calculate the total height and can be scrolled to the bottom with empty spaces.
EDIT:
On runtime after reading some files on a directory, it creates a userControl with the (music) file tags as labels then I add it to the list for viewing and selecting.
public void AddItemsFromDirectory(string directory)
{
//Read files from directory
//...
//Put them on a List<T> files
//...
//Add them to the panel/flowLayoutPanel
for(i = 0; i < files.Count; i++)
{
UserControlItem item = new UserControlItem(files[i]) //UserControlItem puts labels for the tags
{
Location = new Point(0, UserControlItem.Height * i), //Height is constant
//add some events for selecting
};
panel1.Controls.Add(item);
}
}
Is there any simple way of overcoming this problem?
Sidenote:
Tried a different approach on this problem
I am trying to make a custom list control that only shows them when they are next on the list and must be visible.
Like showing only 7 items that fit in the panel and removing them from Controls when they are not visible.
But it still doesn't work the best like my first idea

Resizing User Control - anchor controls to center of form

I have a user control which consists of two controls and four buttons, arranged on a Form: the two controls are on the sides and the buttons in the middle in a vertical row.
When using the control in an app, I place it on a form.
Now, when re-sizing the form horizontally, the two controls just move left or right w/o changing their size.
What I need is that the controls stay anchored to the middle of the form and grow to the sides (sorry about the lack of clarity, I prepared screenshots but the site wouldn't let me attach them).
Is there a way to accomplish this without overriding the Resize event?
Use a TableLayoutPanel as base for your user control.
You need 3 columns and one row. The middle column needs to have a fixed size, and the other 2 you set to 50%. Not to worry, .Net is smart enough to calculate the percent they actually take.
Inside the right and left columns you put your controls and set the Dock property of both to fill. In the middle column you put a panel and set it's Dock property to fill as wall, and In that panel you put the buttons in the middle.
Set your table layout panel Dock to fill as well, and when adding the user control to the form use Dock top, bottom or fill as well.
Erratum:
The above code works most of the time, but it fails for certain Move-Resize sequences. The solution is to respond to the Move and Resize events of the parent form (the consumer of the control), not of the control itself.
One more thing: due to the event firing order (Move first followed by Resize, had to move the working code from Resize() to Move(), which seems counterintuitive but it seems the right way nevertheless.
It seems indeed that it cannot be done in the Designer, but here is the solution using overrides.
It works ok, except for some control flickering which I haven't been able to overcome.
public partial class SB : UserControl
{
//variables to remember sizes and locations
Size parentSize = new Size(0,0);
Point parentLocation = new Point (0,0);
......
// we care only for horizontal changes by dragging the left border;
// all others take care of themselves by Designer code
public void SB_Resize(object sender, EventArgs e)
{
if (this.Parent == null)
return;//we are still in the load process
// get former values
int fcsw = this.parentSize.Width;//former width
int fclx = this.parentLocation.X;//former location
Control control = (Control)sender;//this is our custom control
// get present values
int csw = control.Parent.Size.Width;//present width
int clx = control.Parent.Location.X;//present location
// both parent width and parent location have changed: it means we
// dragged the left border or one of the left corners
if (csw != fcsw && clx != fclx)
{
int delta = clx - fclx;
int lw = (int)this.tableLayoutPanel1.ColumnStyles[0].Width;
int nlw = lw - delta;
if (nlw > 0)
{
this.tableLayoutPanel1.ColumnStyles[0].Width -= delta;
}
}
this.parentSize = control.Parent.Size;//always update it
this.parentLocation = control.Parent.Location;
}
//contrary to documentation, the Resize event is not raised by moving
//the form, so we have to override the Move event too, to update the
//saved location
private void SB_Move(object sender, EventArgs e)
{
if (this.Parent == null)
return;//we are still in the load process
this.parentSize = this.Parent.Size;//always update it
this.parentLocation = this.Parent.Location;
}
}
The above code works most of the time, but it fails for certain Move-Resize sequences. The solution is to respond to the Move and Resize events of the parent form (the consumer of the control), not of the control itself.
One more thing: due to the event firing order (Move first followed by Resize, had to move the working code from Resize() to Move(), which seems counterintuitive but it seems the right way nevertheless.

Keeping distance between panels the same

I have several panels in a windows form application, they are sorted in two columns and maximally 4 rows, so maximally 8 panels. The number of elements included in every single panel changes during the runtime, so not to waste place on monitor I set all of them to autosize. The problem is, I dont know how I can keep them placed correctly, like how to make that when the first one shrinks that the other three come up a bit so there is not too much space between them.
Try to use the TableLayoutPanel or the FlowLayoutPanel (or possibly even a SplitContainer). They all can be very useful for this kind of task. You find them in the section Containers in the Toolbox. You can keep the right distance by setting the margins of the panels appropriately. The TableLayoutPanel gives you different options for sizing the rows and columns (absolute or percent size or auto). Also by working with the Dock or the Anchor properties of the panels and controls you can attain a dynamic behavior when resizing or adding and removing controls.
You might also have to set the MinimumSize and MaximumSize properties of the controls.
You can add controls like this the TableLayoutPanel
int count = tableLayoutPanel1.Controls.Count;
int newColumn = count % 2;
int newRow = count / 2;
if (newRow >= tableLayoutPanel1.RowCount) {
tableLayoutPanel1.RowCount++;
// Set appropriate row style
tableLayoutPanel1.RowStyles.Add(new RowStyle { SizeType = SizeType.AutoSize });
}
var newControl = new Button { Dock = DockStyle.Fill };
tableLayoutPanel1.Controls.Add(newControl, newColumn, newRow);

WPF Toolkit DataGrid - rows overlapping (row height problem)

I have a DataGrid with some template columns that contain another DataGrid. My problem is that if some rows have a lot of content in them their height doesn't adjust so the whole content is visible, but rather it's cut off, giving the impression that the rows overlap. However, as soon as I add a new row to the grid or add a new row to the mini-grid inside one of the main grid's rows, the layout gets updated and the row heights are resized correctly.
So the problem is only when loading the grid the first time.
Is there a way to force the grid to size the rows heights to their content?
Thanks
I had some serious trouble with this (bug?) today, so I'll share what I tried and what almost worked... (And hope that someone knows an actual fix)
In my case the bug only appeared when there were 10 or more rows. Out of the rows, ten first rows would in some cases have too small height for the contents. (I first thought that the nine items were drawn on top of each other, which was stupid of me.) There are quite many columns, so there's a scrollbar. Clicking on the scrollbar resizes the heights to proper values.
Some things that in my experience do not work:
Changing virtualization settings had no effect.
InvalidateVisual() and InvalidateArrange() don't work. Tried both datagrid and its parent.
Changing the height of datagrid did not work (although I'm not quite happy with my tests here)
Forcing the datatemplates of the cells to a specific size did not have an effect.
Placing the datagrid inside a scrollviewer (so that the datagrid would have all the space it could ever need...) did not work.
However:
The one thing (I found) that the datagrid seems to respect is MinRowHeight-setting, so now I've got there a moronic value and I'm hoping that this won't cause problems later on when the datatemplates are modified.
I experienced the same bug with the DataGrid that comes with the .NET Framework 4.0.
Under certain circumstances (no horizontal scrollbar, window is bigger than a specific size, ...) the rows were not displayed correctly but placed on top of another (with a small offset), so just the last row was completely visible.
First I tried to perform a UI-action automatically after the rows are filled in the DataGrid, so the layout is updated. But then I found out, that you can just re-render the control using the dispatcher, which, in my case, fixed the bug eventually.
My whole code-change basically is this (right after filling the DataGrid):
Action emptyAction = delegate() { };
myDataGrid.Dispatcher.Invoke(DispatcherPriority.Render, emptyAction);
I'm not sure what is this, but you could try call InvalidateVisual(), some time later, when element is loaded. This forces complete new layout pass...
The DataGrid in my UserControl is doing the same thing. In this example, there are only 32 rows of data with five DataGridTemplateColumns consisting of an <Image> and four <TextBlock>s.
My control shows search results, if I rerun the same search it does not always do this. In addition, the cropping only occurs, roughly, on the first pageful of results. Rows further down are ok.
Using InvalidateVisual() does not help.
If anyone has any ideas on how to solve this or can indicate if this is a known issue with that control, I'd be interested in hearing about it.
In my case I just needed to add the first row before the loop adding extras.
I wanted 4 columns and n rows like this:
private void InitToList() {
Grid wp = new Grid();
wp.Margin = new Thickness(0);
wp.ColumnDefinitions.Add(new ColumnDefinition());
wp.ColumnDefinitions.Add(new ColumnDefinition());
wp.ColumnDefinitions.Add(new ColumnDefinition());
wp.ColumnDefinitions.Add(new ColumnDefinition());
wp.RowDefinitions.Add(new RowDefinition()); // adding this fixed the overlapping
int curCol = 0;
int curRow = 0;
foreach (string name in toIds) {
if (curCol >= wp.ColumnDefinitions.Count()) {
wp.RowDefinitions.Add(new RowDefinition());
curCol = 0;
curRow++;
}
CheckBox cb = new CheckBox();
cb.Name = String.Format("{0}Check", name.ToLower().Replace(" ", ""));
cb.IsChecked = false;
cb.Margin = new Thickness(5, 5, 5, 5);
cb.Content = name;
Grid.SetColumn(cb, curCol);
Grid.SetRow(cb, curRow);
wp.Children.Add(cb);
curCol++;
}

FlowLayoutPanel autowrapping doesn't work with autosize

.NET Framework / C# / Windows Forms
I'd like the FlowLayoutPanel to automatically adjust its width or height depending on number of controls inside of it. It also should change the number of columns/rows if there is not enough space (wrap its content). The problem is that if I set autosize then the flowlayoutpanel doesn't wrap controls I insert. Which solution is the best?
Thanks!
Set the FlowLayoutPanel's MaximumSize to the width you want it to wrap at. Set WrapContents = true.
Have you tried using the TableLayoutPanel? It's very useful for placing controls within cells.
There is no such thing like impossible in software development. Impossible just takes longer.
I've investigated the problem. If there is really need for Flow Layout, it can be done with a bit of work. Since FlowLayoutPanel lays out the controls without particularly thinking about the number of rows/columns, but rather on cumulative width/height, you may need to keep track of how many controls you've already added. First of all, set the autosize to false, then hook your own size management logic to the ControlAdded/ControlRemoved events. The idea is to set the width and height of the panel in such a way, that you'll get your desired number of 'columns' there
Dirty proof of concept:
private void flowLayoutPanel1_ControlAdded(object sender, ControlEventArgs e)
{
int count = this.flowLayoutPanel1.Controls.Count;
if (count % 4 == 0)
{
this.flowLayoutPanel1.Height = this.flowLayoutPanel1.Height + 70;
}
}
if the panel has initially width for 4 controls, it will generate row for new ones. ControlRemoved handler should check the same and decrease the panel height, or get all contained controls and place them again. You should think about it, it may not be the kind of thing you want. It depends on the usage scenarios. Will all the controls be of the same size? If not, you'd need more complicated logic.
But really, think about table layout - you can wrap it in a helper class or derive new control from it, where you'd resolve all the control placing logic. FlowLayout makes it easy to add and remove controls, but then the size management code goes in. TableLayout gives you a good mechanism for rows and columns, managing width and height is easier, but you'd need more code to change the placement of all controls if you want to remove one from the form dynamically.
If possible, I suggest you re-size the FlowLayoutPanel so that it makes use of all the width that is available and then anchor it at Top, Left and Right. This should make it grow in height as needed while still wrapping the controls.
I know this is an old thread but if anyone else wonders on here then here's the solution I produced - set autosize to true on the panel and call this extension method from the flow panel's Resize event:
public static void ReOrganise(this FlowLayoutPanel panel)
{
var width = 0;
Control prevChildCtrl = null;
panel.SuspendLayout();
//Clear flow breaks
foreach (Control childCtrl in panel.Controls)
{
panel.SetFlowBreak(childCtrl, false);
}
foreach (Control childCtrl in panel.Controls)
{
width = width + childCtrl.Width;
if(width > panel.Width && prevChildCtrl != null)
{
panel.SetFlowBreak(prevChildCtrl, true);
width = childCtrl.Width;
}
prevChildCtrl = childCtrl;
}
panel.ResumeLayout();
}
Are you adding the controls dynamically basing on the user's actions? I'm afraid you'd need to change the FlowLayout properties on the fly in code, when adding new controls to it, then refreshing the form would do the trick.

Categories