wxPython BoxSizer Tutorial

In this tutorial we will discuss the wxPython BoxSizer Layout Sizer.

The wxPython BoxSizer is one of the five sizers in wxPython designed to help with the layout management of widgets in the window. The BoxSizer is the most basic and commonly used Sizer in wxPython. Every GUI library has a Layout manager like the BoxSizer.

It’s a fairly simple Sizer that simply stacks widgets vertically or horizontally depending on the orientation setting used. It doesn’t have alot of utility alone, but when using several BoxSizers nested within each other, complex GUI layouts can be created easily.

wxPython BoxSizer Example#1

In this example we will create a simple BoxSizer with 2 widgets placed inside of it.

sizer = wx.BoxSizer(wx.VERTICAL)

First we create the BoxSizer, passing in either wx.VERTICAL or wx.HORIZONTAL to set the orientation of how widgets will be placed.

        button1 = wx.Button(self.panel, label = "Button 1")
        sizer.Add(button1)

Next we add individual widgets in this manner.

        sizer.Add(wx.Button(self.panel, label = "Button 1"))

Alternatively, we could add them directly like this.

        self.panel.SetSizer(sizer)

After adding all the widgets we want to, we simply call the SetSizer method on the panel in which we are creating all these widgets.

The complete code and output is as follows.

import wx

class Window(wx.Frame):
    def __init__(self, title):
        super().__init__(parent = None, title = title)
        self.panel = wx.Panel(self)

        sizer = wx.BoxSizer(wx.VERTICAL)

        button1 = wx.Button(self.panel, label = "Button 1")
        sizer.Add(button1)

        button2 = wx.Button(self.panel, label = "Button 2")
        sizer.Add(button2)

        self.panel.SetSizer(sizer)
        
        self.Centre()
        self.Show()

        
app = wx.App()
window = Window("WxPython Tutorial")
app.MainLoop()

The output:

wxPython BoxSizer Example#2

In this example we’ll begin using some of the additional options and parameters in order to add more functionality to our widgets in the BoxSizer.

The Add() function can take three additional parameters.

1. proportion: This parameter is 0 by default. 0 means that the size of the widget is unchangeable. Any value above 0 will change the size of the widgets relative to value in the other widgets (for example a widget with proportion 2 will grow twice as much as a widget with 1) as the sizer changes size.
2. flag: A combination of flags which are used to change certain things about the sizer.
3. border: The amount of padding to be used between widgets. Needs to be used together with the appropriate flag.(For example, using wx.ALL will apply padding on all sides)

Below is a simple example using the BoxSizer + a bunch of additional parameters and options enabled.

import wx

class Window(wx.Frame):
    def __init__(self, title):
        super().__init__(parent = None, title = title)
        self.panel = wx.Panel(self)

        sizer = wx.BoxSizer(wx.VERTICAL)

        button1 = wx.Button(self.panel, label = "Button 1")
        sizer.Add(button1, proportion = 1, flag = wx.ALL | wx.EXPAND, border = 5)

        button2 = wx.Button(self.panel, label = "Button 2")
        sizer.Add(button2, flag = wx.ALL, border = 5)

        self.panel.SetSizer(sizer)
        
        self.Centre()
        self.Show()

        
app = wx.App()
window = Window("WxPython Tutorial")
app.MainLoop()

The first button has the proportion set to 1, so it expands unlike button 2. There is also some extra padding between the two buttons.

wxPython BoxSizer Example#3

Now let’s try to make something more practical. For this we’ll use a rather interesting concept of nested sizers. You can add another Sizer into another Sizer the same way you add widgets, using the Add() method.

import wx

class Window(wx.Frame):
    def __init__(self, title):
        super().__init__(parent = None, title = title)
        self.panel = wx.Panel(self)

        sizer = wx.BoxSizer(wx.VERTICAL)

        #-----------------------
        sub_sizer1 = wx.BoxSizer(wx.HORIZONTAL)

        text1 = wx.StaticText(self.panel, label = "Username: ")
        sub_sizer1.Add(text1, flag = wx.ALL, border = 5)
        
        text2 = wx.TextCtrl(self.panel)
        sub_sizer1.Add(text2, proportion = 1, flag = wx.ALL, border = 5)
        #-----------------------


        #-----------------------
        sub_sizer2 = wx.BoxSizer(wx.HORIZONTAL)

        text3 = wx.StaticText(self.panel, label = "Password: ")
        sub_sizer2.Add(text3, flag = wx.ALL, border = 5)
        
        text4 = wx.TextCtrl(self.panel)
        sub_sizer2.Add(text4, proportion = 1, flag = wx.ALL, border = 5)
        #-----------------------

        sizer.Add(sub_sizer1, flag = wx.TOP|wx.LEFT|wx.EXPAND, border = 10)
        sizer.Add(sub_sizer2, flag = wx.TOP|wx.LEFT|wx.EXPAND, border = 10)

        self.panel.SetSizer(sizer)
        
        self.Centre()
        self.Show()

        
app = wx.App()
window = Window("WxPython Tutorial")
app.MainLoop()

The layout below, despite being fairly simple, would not be possible with just a single Sizer. For such things, we require multiple sizers.

Other Sizers in wxPython

There are many other Sizers in wxPython that you can use instead of BoxSizer. Infact, the best layouts are often the result of combining together several different types of Sizers together. This can be done by simply nesting them into each other. There is no limitation to this ability.

1. StaticBoxSizer (A variant of BoxSizer)
2. GridSizer
3. FlexGridSizer
4. GridBagSizer

You can learn more about these sizers here, by reading our guide on layout managers in wxPython.

This marks the end of the wxPython BoxSizer Tutorial. Any suggestions or contributions for CodersLegacy are more than welcome. Questions regarding the tutorial content can be asked in the comments section below.