What is a grid sizer

The simplest sizer offered by wxPython is the grid. As the name implies, a grid sizer places its children in a two-dimensional grid. The first widget in the sizer's child list goes in the upper left corner of the grid, and the rest are laid out left-to-right and top-to-bottom, until the last widget is placed in the bottom right of the grid. Figure 11.1 shows an example, with nine widgets placed in a 3 x 3 grid. Notice that there is a slight gap between each widget.

When you resize the grid sizer, each slot gets bigger, but by default the widgets stay the same size, and stay attached to the top left corner of their assigned slot. Figure 11.2 shows the same window after being resized.

Listing 11.2 shows the code used to generate figures 11.1 and 11.2.

Figure 11.1

A simple grid sizer layout

Figure 11.1

A simple grid sizer layout

Wxpython Sizer

Figure 11.2

The grid sizer layout, made bigger by the user

Figure 11.2

The grid sizer layout, made bigger by the user

Listing 11.2 Using a grid sizer import wx from blockwindow import BlockWindow labels = "one two three four five six seven eight nine".split()

class GridSizerFrame(wx.Frame):

wx.Frame._init_(self, None, -1, "Basic Grid Sizer")

sizer = wx.GridSizer(rows=3, cols=3, hgap=5, vgap=5) for label in labels:

bw = BlockWindow(self, label=label) sizer.Add(bw, 0, 0) <— Add widget to sizer self.SetSizer(sizer) self.Fit()

Create the grid sizer

Associate sizer with frame app = wx.PySimpleApp()



As you can see from listing 11.2, a grid sizer is an instance of the class wx.Grid-Sizer. The constructor explicitly sets the four properties which are unique to the grid sizer:

wx.GridSizer(rows, cols, vgap, hgap)

In this constructor rows and cols are integers that specify the size of the grid— the number of widgets to be placed across and down. If either is set to 0, its value is inferred from the number of children in the sizer. For example, if the sizer created with the constructor wx.GridSizer(2, 0, 0, 0) has eight children, it will need to have four columns to fit the children in two rows, as specified.

The vgap and hgap parameters allow you to put vertical and horizontal space between the widgets. The vgap is the number of pixels to place between adjacent columns, and the hgap is the number of pixels to place between adjacent rows. These pixels are in addition to any pixels specified by the widget as its border, as we'll see in a couple more sections. The properties rows, cols, vgap, and hgap all have their getter and setter methods—GetRows(), SetRows(rows), GetCols(), Set-Cols(cols), GetVGap(), SetVGap(gap), GetHGap(), and SetHGap(gap).

The sizing and placement algorithm of the grid sizer is straightforward. It creates its initial grid layout when Fit() is first called. If necessary, the number of rows and columns are calculated from the number of elements in the list. Each space in the grid is the same size—even if the size of each widget is different. The largest dimension is used to calculate the size—each space in the grid is as wide as the widest child and as tall as the tallest child. Because of this, a grid sizer is best suited for layouts where the children are naturally all the same size (a calculator keypad is a classic example). A grid sizer with wildly different sized widgets tends to look a little odd. If you still want a grid-like layout, but you have different sized widgets, you will probably be better off looking at either the flex grid sizer or the grid bag sizer.

Was this article helpful?

+1 0

Post a comment