wx Basics

Concept

wxPython is a Wrapper around the wxWidgets GUI library, which is written in C++.

You may want to visit these pages for more information:

The wxGlade documentation is intended to be readable without previous wx knowledge. It will teach you how to create windows, handle events and how to integrate with your ‘business logic’ code. Sooner or later you will have to look into the wx documentation, though.

Sizers (Layout Managers)

With wxWidgets/wxPython and similar toolkits, usually controls are not placed at pixel positions on their windows, but the layout of a window is managed by sizers.
  • There are horizontal box sizers, vertical box sizers and grid sizers.
  • The box sizers may have a label and a box around them. In that case they’re called static box sizers.
  • Each sizer and contained sizer items can be fixed size or grow to fill the available space, e.g. when the window is resized.

Sizer Examples

Vertical BoxSizer

  • This sizer stacks the controls it manages one above the other.
  • This example shows three buttons arranged in this way.
vertical

Horizontal BoxSizer

  • This sizer arranges its controls alongside of one another.
  • This example shows three button arranged in this way.
horizontal

Allowing controls to grow and/or expand

  • Controls in a horizontal sizer can “grow” horizontally, or “expand” vertically in response to changes in window size.
  • In this three button example, using a Horizontal BoxSizer:
  • The middle button has been allowed to grow horizontally.
  • The third button has been allowed to expand vertically.
horizontal2

Alignment of controls

  • The alignment of controls within a sizer can also be specified.
    This example also uses a Horizontal BoxSizer to specify that:
  • The first button is “top” aligned.
  • The middle button is “bottom” aligned.
  • The third button has been given a border that provides some space around it on all sides.
horizontal3

StaticBoxSizer

  • In this example, a Horizontal StaticBoxSizer has been used to contain the three buttons (which have the same properties set as those in the previous example).
  • This sizer puts a border around its edges and provides a label with which to describe its contents.
  • StaticBoxSizers can be either Horizontal or Vertical, just like their “non-static” equivalents.
static_horizontal

GridSizer

  • GridSizers arrange their contained controls in a grid made up of equally sized rows and columns.
  • In this example, the grid has been set to two rows and two columns.
  • Each cell in the example contains a button, which has been centred in the cell.
grid1

Expanding, growing and aligning in a grid cell

In this example:
  • The first button has been aligned LEFT.
  • The second button has been aligned BOTTOM.
  • The third button has been allowed to expand.
  • The fourth button has been aligned RIGHT and CENTER.
grid2

FlexGridSizer

  • The FlexGridSizer allows a little more flexibility over cell sizes by allowing individual rows and columns to grow and/or expand.
  • In this example, the first column has been allowed to grow horizontally and the second one allowed to grow vertically.
    Note that this becomes obvious when the window is resized by the user.
flex_grid

GridBagSizer

  • This example uses a 3x3 grid and five buttons.
  • It shows how a GridBagSizer can allow controls to span multiple columns and/or rows.
  • All the buttons have their EXPAND property set so that they fill all the space in the cell(s).
gridbag

Example application: Calculator window

_images/Calculator_06_preview.png

This window is managed by one vertical box sizer with six slots for the five rows, plus a horizontal line and five horizontal box sizers for the horizontally arranged controls they contain (e.g. one label and one button):

The Design and Preview windows look like this, but without the colored frames for the horizontal and vertical sizers:
Calculator_06_sizers
Each blue frame is a horizontal sizer with two slots each. The (invisible) borders between slots are indicated by dashed lines.

The inputs for Value 1 and 2 are set to grow horizontally; the Result output is growing horizontally and EXPANDing vertically.
In the Tree window, you can see the hierarchical structure:
Calculator_06_tree
Note that horizontal and vertical sizers are
visualized with different icons: sizer_h sizer .

Later we’ll have a look at alternative structures which allow better alignment of the fields.

wxGlade Requirements and Restrictions

The user interface and internal data structures of wxGlade impose some restrictions on the structure of a window. A frame or panel cannnot have a widget as direct child. They always need a toplevel sizer first. So don’t be surprised to see constructions like these:

  • frame -> sizer with single slot -> panel -> sizer ….
  • frame -> sizer with single slot -> notebook -> …

On the other hand, a notebook or a splitter can have widgets as direct children.