WxPython: Nesting panels within panels

Question

I've been trying to learn wxPython and just can't get my head around sizers. As an exercise, I'm trying to lay out three panels so they appear inside of each other. Firstly, I've used an image editing program to show an approximation window I'm trying to achieve:

This is the code I'm using to attempt this:

import wx
class MyApp(wx.Frame):
 def __init__(self):
 super().__init__(None, title="Test")
 outer_sizer = wx.BoxSizer()
 outer_panel = wx.Panel(self)
 outer_panel.SetBackgroundColour(wx.Colour("#94f7e7"))
 inner_panel = wx.Panel(outer_panel)
 inner_panel.SetBackgroundColour(wx.Colour("#b8e8a9"))
 inner_sizer = wx.BoxSizer()
 inner_inner_panel = wx.Panel(inner_panel)
 inner_inner_panel.SetBackgroundColour(wx.Colour("#cbebf5"))
 inner_inner_sizer = wx.BoxSizer()
 inner_inner_sizer.Add(inner_inner_panel, 1, wx.ALL | wx.EXPAND, 20)
 inner_sizer.Add(inner_inner_panel, 1, wx.ALL | wx.EXPAND, 20)
 outer_sizer.Add(inner_sizer, 1, wx.EXPAND)
 outer_panel.SetSizer(outer_sizer)
if __name__ == '__main__':
 app = wx.App()
 ma = MyApp()
 ma.Show()
 app.MainLoop()

And this is what it actually results with:

The reason I had hoped the above code would work is because I had some success with the following code:

import wx
class MyApp(wx.Frame):
 def __init__(self):
 super().__init__(None, title="Test")
 outer_sizer = wx.BoxSizer()
 outer_panel = wx.Panel(self)
 outer_panel.SetBackgroundColour(wx.Colour("#94f7e7"))
 inner_panel = wx.Panel(outer_panel)
 inner_panel.SetBackgroundColour(wx.Colour("#b8e8a9"))
 inner_sizer = wx.BoxSizer()
 inner_sizer.Add(inner_panel, 1, wx.ALL | wx.EXPAND, 20)
 outer_sizer.Add(inner_sizer, 1, wx.EXPAND)
 outer_panel.SetSizer(outer_sizer)
if __name__ == '__main__':
 app = wx.App()
 ma = MyApp()
 ma.Show()
 app.MainLoop()

Which produced this:

Now obviously I'm not getting something. I'm hoping the above will enable some kind soul to identify what I'm not understanding.

None of the related posts here seem to help much as they don't ever nest panels more than one layer.

Answer 1

Ok, the first step will be putting in just one panel and make a hierarchy of 3 sizers. This works exactly as you expect, only you cannot change the background color of a sizer:

def __init__(self):
 super().__init__(None, title="Test")
 sz1 = wx.BoxSizer()
 sz2 = wx.BoxSizer()
 sz3 = wx.BoxSizer()
 p1 = wx.Panel(self)
 p1.SetBackgroundColour(wx.RED)
 sz3.Add(p1, 1, wx.ALL | wx.EXPAND, 20)
 sz2.Add(sz3, 1, wx.ALL | wx.EXPAND, 20)
 sz1.Add(sz2, 1, wx.ALL | wx.EXPAND, 20)
 self.SetSizer(sz1)

Now, to really use the panels you have to put the panel into sizer (sizer.Add) and than the sizer into the panel (panel.SetSizer) and than into a sizer and so on... Just be careful about setting the right parent.

def __init__(self):
 super().__init__(None, title="Test")
 sz1 = wx.BoxSizer()
 sz2 = wx.BoxSizer()
 sz3 = wx.BoxSizer()
 p1 = wx.Panel(self)
 p2 = wx.Panel(p1)
 p3 = wx.Panel(p2)
 p1.SetBackgroundColour(wx.RED)
 p2.SetBackgroundColour(wx.GREEN)
 p3.SetBackgroundColour(wx.BLUE)
 sz3.Add(p3, 1, wx.ALL | wx.EXPAND, 20) # innermost
 p2.SetSizer(sz3)
 sz2.Add(p2, 1, wx.ALL | wx.EXPAND, 20)
 p1.SetSizer(sz2)
 sz1.Add(p1, 1, wx.ALL | wx.EXPAND, 0)
 self.SetSizer(sz1)

• Howtousernamepls: Thanks very much. This is so so helpful as a reference to go back to when sizer are defeating me!