wxPython - Widgets on top of each other with GridSizer

Question

I'm learning wxPython and experimenting with GridSizer as it's my favourite way of handling layouts. Besides religiously reading the API for the classes I'm using, I scavenged bits and pieces around the wx wiki and tutorials to wrap everything together.

Somehow though, the widgets I'm testing, two ListBoxes which are supposed to be on top of each other, appear on top of each other instead.
I can only see the first ListBox once I click: the elements pop up as I select them and TABbing goes back to the first list.

There is clearly something I'm inadvertenly skipping. Looking around I thought the problem was that I wasn't using Layout() correctly, but I tested it with all containers to no avail. Also, the issues I found around the web seem to mention resizing to refresh the window, but even by resizing my window nothing of value happens.

Finally, here's the code:

import wx


class MainWindow(wx.Frame):
    def __init__(self):
        super().__init__(parent=None, id=-1,
                         title="Test Window",
                         style=wx.DEFAULT_FRAME_STYLE & ~(wx.RESIZE_BORDER | wx.MAXIMIZE_BOX))

        main_panel = wx.Panel(parent=self, id=wx.ID_ANY)

        wx.ListBox(main_panel, id=wx.ID_ANY, size=wx.Size(200, 200),
                   style=wx.LB_SINGLE | wx.LB_ALWAYS_SB | wx.LB_SORT,
                   choices=[
                       "Babble",
                       "Bobble",
                       "Bubble"
                   ])
        wx.ListBox(main_panel, id=wx.ID_ANY, size=wx.Size(200, 200),
                   style=wx.LB_SINGLE | wx.LB_ALWAYS_SB,
                   choices=[
                       "One",
                       "Two",
                       "Three"
                   ])

        main_grid = wx.GridSizer(cols=1, rows=2, gap=wx.Size(50, 50))
        main_grid.Add(main_panel)

        self.SetAutoLayout(True)
        self.SetSizer(main_grid)
        self.Layout()
        self.Show(True)


if __name__ == "__main__":
    app = wx.App(False)
    app.SetTopWindow(MainWindow())
    app.MainLoop()

Answer 1

Give the individual items names and Add them to the sizer, not the entire panel.

import wx


class MainWindow(wx.Frame):
    def __init__(self):
        super().__init__(parent=None, id=-1,
                         title="Test Window",
                         style=wx.DEFAULT_FRAME_STYLE & ~(wx.RESIZE_BORDER | wx.MAXIMIZE_BOX))

        main_panel = wx.Panel(parent=self, id=wx.ID_ANY, size=(400,600))

        list1 = wx.ListBox(main_panel, id=wx.ID_ANY, size=wx.Size(200, 200),
                   style=wx.LB_SINGLE | wx.LB_ALWAYS_SB | wx.LB_SORT,
                   choices=[
                       "Babble",
                       "Bobble",
                       "Bubble"
                   ])
        list2 = wx.ListBox(main_panel, id=wx.ID_ANY, size=wx.Size(200, 200),
                   style=wx.LB_SINGLE | wx.LB_ALWAYS_SB,
                   choices=[
                       "One",
                       "Two",
                       "Three"
                   ])

        main_grid = wx.GridSizer(cols=1, gap=(50,50))
        main_grid.Add(list1)
        main_grid.Add(list2)

        self.SetAutoLayout(True)
        self.SetSizer(main_grid)
        self.Layout()
        self.Show(True)


if __name__ == "__main__":
    app = wx.App(False)
    app.SetTopWindow(MainWindow())
    app.MainLoop()