Working With the Grid Layout Manager

Starting with the beta 1 version of Tk 4.1, the new grid command dramatically simplifies a lot of layout problems inherent in the older pack command. For example, common layouts, like a standard main window, become a lot easier than with the pack command.

The following short example shows the grid command in operation to create an application main window.

The standard application main window, on Unix or Windows, sports a menubar at the top. Immediately beneath the menubar you can have a toolbar. Beneath that lies the main application area. This is where your documents would go and so on. Finally, at the bottom of the window lies a message or status area, used to present short one-line help messages and general status information to the user.

When such a main window gets resized, the extra vertical space should go to the main application area. Extra horizontal space should go to all these areas, as each spans the entire main window.

In Tcl terms, each area is a frame widget. With the grid command, we place each frame in "column" 0. Each frame spans one column. When we configure the grid, we need to ensure that the column can be resized.

Since we're essentially lining things up vertically, each frame widget gets placed in its own row, starting with row 0. Because only the main application area needs to grow vertically, we should configure the grid for that row to expand.

To do this, we give row 2 (where the main area resides) a resize "weight" of 1. The other rows default to a weight of 0. Any extra space is divided based on the relative weights of the rows. Since row 2 is the only row with a weight, it gets all the space.

The code to do this follows:

You need to configure column 0, the only column, similarly to allow it to grow:

Finally, to allow resizing, we make each widget "sticky" in its grid cell against all four edges (n, s, e and w). This means that as the cell grows, the widget will also grow.

What follows is an example Tcl file using the grid command. I've simplified the example, so that there is only one menu and a simple toolbar button.

Try it out and resize the window. It should resize properly. Note that you'll need the beta 1 or higher versions of Tcl 7.5 and Tk 4.1 for this to work.

One last note: If you're trying to sell something, please don't use this short example to "prove" that Tcl is less efficient than your commercial product. Thank you.

# gridtest.tcl
# This test shows how to make a standard
# main window with a menubar, toolbar,
# main area and status area at the bottom and
# have the window properly resize.
#
# 8-Feb-96
# Eric Johnson

#
# Menubar
#
frame .menubar -bd 2 -relief raised

menubutton .menubar.file -underline 0 -text "File" \
    -menu .menubar.file.menu
menu .menubar.file.menu
menubar.file.menu add command -label "Exit" \
    -underline 1 -command { exit }

	# Mix old pack with new grid
pack .menubar.file -side left


#
# Toolbar
#
frame .toolbar -bd 2 -relief groove
button .toolbar.edit -text "Edit"
pack .toolbar.edit -side left

#
# Main Area
#
frame .main -bd 2 -relief groove
label .main.label -text "Main Application Area"
pack .main.label -padx 100 -pady 50 


#
# Status Area
#
frame .status -bd 1 -relief flat
label .status.msg -relief sunken -bd 2 -text "Status Area"
label .status.prod -relief sunken -bd 2 -text "WunderWord 1.0"
pack  .status.msg -side left -expand true -fill x
pack  .status.prod -side right


#
# Test grid layout. 
# All widgets are in the same column; 
# and each take up one row.
#
# Each widget is sticky to all four edges 
#   so that it expands to fit.
#
grid config .menubar -column 0 -row 0 \
	-columnspan 1 -rowspan 1 -sticky "snew" 
grid config .toolbar -column 0 -row 1 \
	-columnspan 1 -rowspan 1 -sticky "snew" 
grid config .main    -column 0 -row 2 \
	-columnspan 1 -rowspan 1 -sticky "snew" 
grid config .status  -column 0 -row 3 \
	-columnspan 1 -rowspan 1 -sticky "snew" 

#
# Set up grid for resizing.
#
# Column 0 (the only one) gets the extra space.
grid columnconfigure . 0 -weight 1

# Row 2 (the main area) gets the extra space.
grid rowconfigure . 2 -weight 1