# 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 wxPython home page: https://wxpython.org/
  - An overview including a Hello World application example: https://wxpython.org/pages/overview/
  - A more comprehensive Getting Started guide: https://wiki.wxpython.org/Getting%20Started
  - The wxWidgets home page: https://www.wxwidgets.org/

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. |
Horizontal BoxSizer This sizer arranges its controls alongside of one another. This example shows three button arranged in this way. |
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. |
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. |
StaticBoxSizer This sizer puts a border around its edges and provides a label to describe its contents. 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). StaticBoxSizers can be either horizontal or vertical, just like their “non-static” equivalents. |
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. |
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. |
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. |
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). |

### Example application: Calculator window

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: 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: Note that horizontal and vertical sizers are visualized with different icons: .

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

Note

- For your own projects, always use the simplest available sizers. Usually you will need mainly box sizers and maybe one or two FlexGridSizers.
- Use nested sizers to match the hierarchical / logical structure of your project. This will make it easy to re-arrange things to find the best user interface.
- Never ever try to use a GridBagSizer as main sizer of a window trying to resemble pixel placement or Tkinter’s grid geometry manager. This is a mess to create and maintain. Actually, a GridBagSizer is almost never needed.

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