wx Basics

Concept

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

See here for an overview, including Hello World application example: https://wxpython.org/pages/overview/

Here you can find a more comprehensive Getting Started guide: https://wiki.wxpython.org/Getting%20Started

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 this 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.

Examples

vertical BoxSizer

  • with three buttons
vertical

horizontal BoxSizer

  • with three buttons
horizontal

same sizer,

  • but one button growing (horizontally) and
    one expanding (vertically)
horizontal2

same sizer,

  • but one button aligned top,
  • one bottom and
  • one with a border
horizontal3
same as horizontal StaticBoxSizer static_horizontal

GridSizer

  • with two rows and two columns,
  • all columns and all rows have the same size,
  • all buttons are centered
grid1

same,

  • with one button aligned left,
  • one aligned bottom,
  • one expanding and
  • one aligned right/center
grid2

same as FlexGridSizer

  • with growing column #1 and
  • one growing row #2
flex_grid

GridBagSizer

  • with 3x3 cells and five buttons;
  • three buttons are spanning multiple rows/cols
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 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 / Restrictions

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

  • 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.