Jaa

Using TableLayoutPanel to Create DHTML-Style Text Menu

  • Artikkeli

I'm not a big fan of TableLayoutPanel. The control is very limited in what it can do given that the cells created by column/row interactions are not programmatically accessible (unlike in DHTML tables or even in the awesome DataGridView class). However, you can still pull off some cool tricks in spite of its limitations. Below is an example of how to create a DHTML-style link menu that expands and shrinks freely as the form is resized.

The menu is nothing more than a TableLayoutPanel with one row and five columns. The TLP's Dock property is set to Top. The columns are configured to each take up 20% apiece of the panel's available real estate - in other words, each occupies equal space. The link text is simply five LinkLabels, each set as follows:

.Dock=Fill
.BackColor=Transparent
.TextAlign=MiddleCenter

The gradient background and bottom border only took a few lines of code to accomplish. Just define a Paint event handler for TableLayoutPanel and go to town:

        void tableLayoutPanel2_Paint(object sender, PaintEventArgs e)
{
LinearGradientBrush newBrush = new LinearGradientBrush(new Point(0, 0), new Point(tableLayoutPanel2.Width, tableLayoutPanel2.Height),
Color.White, Color.LightGray);
e.Graphics.FillRectangle(newBrush, new Rectangle(0, 0, tableLayoutPanel2.Width, tableLayoutPanel2.Height));
// Draw a thin border on the bottom.
e.Graphics.DrawLine(new Pen(new SolidBrush(Color.Black), 1),
new Point(0, tableLayoutPanel2.Height - 1),
new Point(tableLayoutPanel2.Width, tableLayoutPanel2.Height - 1));
}

NOTE: One problem with this implementation is that there is some nasty flicker on the TLP when you resize the form. The flicker manifests as a small flash of the form's background at the point where the table cells jut up against one another. I don't know how to fix this; setting Form.DoubleBuffered=True had no effect.