Web-style UI with re-flow - seen any examples?

Mal Ross

Hi all, I'm looking to implement a web-style UI using Windows Forms and C#. I want my task screens' content to fill the width of the window and to reflow nicely, like a web browser. While I realise the docking features of Windows Forms are great for resizing content to fit a window, you run into problems when, say, the word-wrapping in a static text control changes such that the line count changes (2 lines become 3, for example). In such a situation, you'd want the controls below the static to shuffle up or down accordingly, but the docking properties aren't enough to cater for this. Has anyone seen any Forms code that avoids ugly spaces opening up (or conversely, overlapping controls) by correctly reflowing the form's content? Cheers, Mal.

sreejith ss nair

hi, put little R and D on Anchoring and docking. It may help you out. ************************** S r e e j i t h N a i r **************************

Mal Ross

Thanks for the reply, but as I explained, the anchoring and docking aren't enough. Unless, that is, you're telling me to handle the Layout event and do my own layout control? But that's the example I'm hoping I can find without having to code it myself. :) Cheers, Mal.

mav northwind

Although I don't know of any flow-layout panel code you could use it shouldn't be too hard to do it yourself. Derive from Panel and override the Resize event handler to calculate the size your child controls will need and then adjust their position accordingly. Regards, mav

mav northwind

ReHi! Because such a flow panel could be useful for me too, I wrote a quick initial version. You can try it out if you like:

public class FlowLayoutPanel : Panel
{
public FlowLayoutPanel()
{}

private Orientation \_orient = Orientation.Horizontal;
\[DefaultValue(Orientation.Horizontal)\]
public Orientation Orientation
{
	get { return \_orient; }
	set
	{
		\_orient = value;
		RecalcLayout();
		Invalidate();
	}
}

private void RecalcLayout()
{
	if (this.Controls.Count==0)
	{
		this.Size = new System.Drawing.Size(100,100);
		return;
	}

	int x=0,y=0,h=0,w=0;
	if (Orientation == Orientation.Horizontal)
	{
		// Width stays constant, height differs
		foreach (Control c in Controls)
		{
			if (x+c.Width > this.Width)
			{
				x = 0;
				y = h+1;
			}
			c.Left = x;
			c.Top = y;
			
			h = Math.Max(h,c.Bottom);
			x += c.Width;
		}
		this.Height = h;
	} 
	else
	{
		// Height stays constant, width differs
		foreach (Control c in Controls)
		{
			if (y+c.Height > this.Height)
			{
				y = 0;
				x = w+1;
			}
			c.Left = x;
			c.Top = y;
			
			w = Math.Max(w,c.Right);
			y += c.Height;
		}
		this.Width = w;
	}
}

protected override void OnResize(EventArgs eventargs)
{
	RecalcLayout();
	base.OnResize (eventargs);
}

protected override void OnControlAdded(ControlEventArgs e)
{
	RecalcLayout();
	base.OnControlAdded (e);
}

protected override void OnControlRemoved(ControlEventArgs e)
{
	RecalcLayout();
	base.OnControlRemoved (e);
}

}

Regards, mav

Mal Ross

Thanks - will check it out pronto. :) Mal.