Windows Forms Documentation Updates : Container Controls and Layout

New White Paper: Creating Smart Application Layouts in Windows Forms 2.0

Jay A. Allen — Thu, 20 Jul 2006 00:17:00 GMT

My new Windows Forms white paper is now available on MSDN. It covers using ToolStrip as a navigation alternative to TabControl, and creating collapsible flyout menus a la the Visual Studio Toolbox. Compilable code samples are included.

Enjoy!

Snaplines: Using CTRL Key to Snap in Windows Forms

Jay A. Allen — Fri, 23 Jun 2006 01:19:00 GMT

I was just in a meeting and learned about a Windows Forms feature I previously knew nothing of. I love Snaplines in Windows Forms 2.0/Visual Studio 2005. What I didn't know, however, is that you can use the CTRL key and the arrow keys to snap to Snaplines.

Try it! Place a Panel and a Button on a form next to one another, spaced reasonably well apart. Put another Button on the form, above and to the left of the other two controls. Now, select the second Button, press CTRL, and use the right arrow key to SNAP your Button's way across the page.

There are a few other shortcuts as well, including ALT, which temporarily disables Snaplines. For the full 411 on this feature, check out Walkthrough: Arranging Controls on Windows Forms Using Snaplines.

Control.Location is a Pain - or, Why We Need an OffsetLocation() Method

Jay A. Allen — Thu, 20 Apr 2006 20:36:00 GMT

I'm polishing up some code for a Windows Forms white paper on application layouts in Windows Forms 2.0. The paper will cover advanced uses of the ToolStrip control for creating navigational layouts, among other things. One of the samples is a VS Toolbox-style flyout panel. The code to implement this wasn't too gnarly, except that in my first rev, I was new()ing up a whole lotta Point structs in slide-in and slide-out:

currentControl.Location = New Point(currentControl.Location.X + 20, currentControl.Location.Y)

Jim Galasyn, one of my colleagues on the team, asked why I was doing this. To put it simply, I did it this naively because the Location property of Control is lame. Location is of type Point, which is a struct. Structs are passed by value, not by reference, meaning that returning the Location property directly would pass a copy of the type on the stack. On top of that, for some reason, the source code for Control.Location in Windows Forms just goes ahead and new()s up a new Struct every time you access the Location property anyway! (That's a good reason not to call this property extraneously, and to almost never call it in large loops.) So direct calls on Location are for naught.

I worked around this in my own application by caching a Point value, and operating on that using the Offset() method. This eliminated the constant creation of new Point structures on the stack, sped up my app, and make for somewhat cleaner code:

_CachedControlPoint.Offset(-20, 0)
currentControl.Location = _CachedControlPoint

What's frustrating is that, after 2-1/2 years writing Windows Forms documentation, I still get bitten by this. It's so natural to call a property or a method and expect that to reflect on the associated object that exceptions such as these throw me for a loop. Sure, we can document this. We have documented it. But documentation can only do so much to defeat logic.

It would be nice, at the very least, to have an OffsetLocation() method defined on Control that eliminated the need for self-caching of Point objects. I know my product team has bigger fish to fry, but...come on, folks, pretty please? As a favor for l'il ol' me? [insert eyelash-batting here]

Using TableLayoutPanel to Create DHTML-Style Text Menu

Jay A. Allen — Thu, 06 Apr 2006 00:48:00 GMT

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.

Using ToolStrip as a TabControl Alternative in Windows Forms

WinFormsUE — Tue, 21 Mar 2006 23:06:00 GMT

I've been going back and forth lately with Karl Erickson, another member of our team, and the guy who owns the TabControl docs. It appears that my gripes with TabControl weren't mine alone. He's been fielding reports of various weird bugs, such as the visual styles weirdness and the funky way TabControl handles layout at run time. Basically, the darn thing isn't meant to have its tab layout order changed at run time; properties like Alignment are best set at design time, and then kept like that for the life of your app.

So, yes: it's possible to hack up TabControl to make right-aligned and left-aligned tabs work.

Or, you can use ToolStrip instead.

Picture 1: ToolStrip Tab Imitator

The idea is simple. Add a SplitContainer to your form. Make one panel the "nav" panel, and the other the content panel. (You could just Dock it Left, but using SplitContainer makes it easier to resize. And yes, I know that ToolStripContainer exists - I'm still trying to force it to do my bidding.) Add a ToolStrip to the nav panel and set it to Dock=Full. Add image and text for each of the buttons, and use the following settings on each button:

.DisplayType=TextAndImage
.ImageAlign=MiddleLeft
.TextAlign=MiddleRight
.TextImageRelation=Overlay

For the panels themselves, you can develop separate UserControl classes, and switch between them whenever a user clicks a button. You can incorporate interfaces onto the UserControls to test if there is any data that needs to be persisted before switching tabs. E.g., if you're on the Pay Bills tab, and the user has unconfirmed bill payments, you might want to prompt to confirm or discard the transactions.

Here's another screenshot of a rinky-dink app I've been using as a testbed. I haven't written any of the panels yet, so there's a big gaping hole in the middle there, but this shows how to do the same thing using larger, more stylized buttons on the right hand side. These use .TextImageRelation=ImageBeforeText to make them work. Also, the RenderStyle of ToolStrip is set to System, and the BackColor to White to blend in with the buttons. (Don't attempt to use TransparencyKey when using complex images.)

You'll have to forgive the app's slight klunkiness; I've hacked it to bits recently. And yes, that is a ToolStrip control I'm using as the title bar!

Picture 2: Right-Aligned Buttons

The benefits of this approach are numerous. Because you're using ToolStrip, you can use features like drop-down buttons, embedded ComboBoxes, fly-out menus, context menus, etc. ToolStrip is a great "kitchen sink" control that's been designed to do just about anything. It has a modern look and feel by default; you can make it very slick without writing a lick of code. If the built-in renderers don't meet your needs, however, never fear: ToolStrip can be stylized out the wazoo using a custom renderer.

Windows Forms TabControl: Using Right-Aligned or Left-Aligned Tabs

WinFormsUE — Wed, 15 Mar 2006 01:15:00 GMT

I wanted to do something today that I thought was simple: take a Windows Forms TabControl and render the tabs horizontally on the right- or left-hand side of the form. The good news is, it is simple. You just have to know the secret sauce to pull it off.

On TabControl, set the following properties:

.Alignment=Right
.SizeMode=Fixed (Must be set to change ItemSize.Width, below)
.DrawMode=OwnerDrawFixed

Set the ItemSize property to the preferred width and height of your tabs. Since we're owner-drawing, we need the tabs to be a fixed width and height so we have a well-defined area in which to draw the tab labels.

Here's one of the tricky bits, though: Width and height do not flip even though you are now right-aligned. In other words, you have to change the Width property to change the height (y axis) of the tabs, and change the Height property to change the width (x axis) of the tabs.
Handle DrawItem() and define code to render the text the way you want it. Here's a sampling:

    Private Sub TabControl1_DrawItem(ByVal sender As Object, ByVal e As _
System.Windows.Forms.DrawItemEventArgs) Handles TabControl1.DrawItem
        Dim g As Graphics = e.Graphics
        Dim _TextBrush As Brush

' Get the item from the collection.
Dim _TabPage As TabPage = TabControl1.TabPages(e.Index)

' Get the real bounds for the tab rectangle.
Dim _TabBounds As Rectangle = TabControl1.GetTabRect(e.Index)

        If (e.State = DrawItemState.Selected) Then
            ' Draw a different background color, and don't paint a focus rectangle.
            _TextBrush = New SolidBrush(Color.Red)
            g.FillRectangle(Brushes.Gray, e.Bounds)
        Else
            _TextBrush = New System.Drawing.SolidBrush(e.ForeColor)
            e.DrawBackground()
        End If

' Use our own font. Because we CAN.
Dim _TabFont As New Font("Arial", 10.0, FontStyle.Bold, GraphicsUnit.Pixel)

        ' Draw string. Center the text.
        Dim _StringFlags As New StringFormat()
        _StringFlags.Alignment = StringAlignment.Center
        _StringFlags.LineAlignment = StringAlignment.Center
        g.DrawString(_TabPage.Text, _TabFont, _TextBrush, _TabBounds, New StringFormat(_StringFlags))
    End Sub