wxPython Nested Panel and Sizers

Question

Started learning wxPython so I could make an application. I'm having issues with nested sizers in particular.

class browser_mainPanel(wx.Panel):

   def __init__(self, parent):
     wx.Panel.__init__(self, parent=parent)
     self.toolbar()
     self.searchBar = wx.SearchCtrl(self)

     main_sizer = wx.BoxSizer(wx.HORIZONTAL)

     main_sizer2 = wx.BoxSizer(wx.VERTICAL)   
     main_sizer2.Add(self.toolBar, 0, wx.EXPAND, 5)   
     main_sizer2.Add(self.searchBar, 0, wx.EXPAND, 5)

     main_sizer.Add(main_sizer2, wx.EXPAND)

     tree_panel = wx.Panel(self)
     tree_panel.SetBackgroundColour(wx.BLACK)
     entry_panel = wx.Panel(self)
     entry_panel.SetBackgroundColour(wx.GREEN)

     main_sizer3 = wx.BoxSizer(wx.HORIZONTAL)
     main_sizer3.Add(tree_panel, 0, wx.EXPAND, 5)
     main_sizer3.Add(entry_panel, 0, wx.EXPAND, 5)
     main_sizer2.Add(main_sizer3, wx.EXPAND)
     self.SetSizer(main_sizer)

Right, so the problem is that the two panels in main_sizer3 aren't expanding out as I want them to. Here's a picture.

What I want is for the two panels to expand to the rest of the panel with the black portion being smaller than the green panel width-wise. Can't find a solution for the life of me.

I plan on making these two panels have their own special instances because there's going to be stuff happening in them but for now, I'm looking to implement them as simply as possible before I start getting into the details.

Answer 1

You forgot a few proportions:

# to use the last parameter (border), you have to
# specify which border(s) to use in the flag parameter:
# wx.TOP, wx.BOTTOM, wx.LEFT, wx.RIGHT, a combination
# of them, or wx.ALL
main_sizer2.Add(self.toolBar, 0, wx.EXPAND|wx.BOTTOM, 5)
main_sizer2.Add(self.searchBar, 0, wx.EXPAND|wx.LEFT|wx.RIGHT, 5)
# proportion missing:
main_sizer.Add(main_sizer2, 1, wx.EXPAND)

# set the green panel to twice the size of the black one
main_sizer3.Add(tree_panel, 1, wx.EXPAND|wx.RIGHT, 5)
main_sizer3.Add(entry_panel, 2, wx.EXPAND)
# and another proportion missing:
main_sizer2.Add(main_sizer3, 1, wx.EXPAND|wx.ALL, 5)

Furthermore, your main_sizer only contains one entry which makes it superfluous. Also try to give your sizers somewhat meaningful names to make it easier to read.

Last but not least, if you want the user to be able to dynamically resize the proportions of the two panels (tree and entry), you can use a wx.SplitterWindow:

# ...
layout = wx.BoxSizer(wx.VERTICAL)
layout.Add(self.toolBar, 0, wx.EXPAND|wx.BOTTOM, 5)
layout.Add(self.searchBar, 0, wx.EXPAND|wx.LEFT|wx.RIGHT,5)

splitter = wx.SplitterWindow(self,style=wx.SP_LIVE_UPDATE)

tree_panel = wx.Panel(splitter)
tree_panel.SetBackgroundColour(wx.BLACK)
entry_panel = wx.Panel(splitter)
entry_panel.SetBackgroundColour(wx.GREEN)

splitter.SplitVertically(tree_panel,entry_panel)
splitter.SetMinimumPaneSize(50)

layout.Add(splitter,1,wx.EXPAND|wx.ALL,5)
self.SetSizer(layout)

Answer 2

You are giving wrong parameters to the Add method in several lines of code.
The second parameter of Add is the proportion of the widget that should be an integer (usually 1, fill as you can keeping proportion, or 0, maintain your minimum size). You missed it in some lines. Actually, this parameter took the value of wx.EXPAND that in fact is a constant used for the third parameter, that also got lost as a side-effect.

If you want a Panel to be smaller than the other (50% for example) you can give values 1 and 2 respectively for the smaller and the bigger panels.

This works in Python 3.2 with Phoenix:

 main_sizer.Add(main_sizer2, 1, wx.EXPAND)

 tree_panel = wx.Panel(self)
 tree_panel.SetBackgroundColour(wx.BLACK)
 entry_panel = wx.Panel(self)
 entry_panel.SetBackgroundColour(wx.GREEN)

 main_sizer3 = wx.BoxSizer(wx.HORIZONTAL)     
 main_sizer3.Add(tree_panel, 1, wx.EXPAND, 5)     #smaller
 main_sizer3.Add(entry_panel, 2, wx.EXPAND, 5)    #bigger
 main_sizer2.Add(main_sizer3, 1, wx.EXPAND)
 self.SetSizer(main_sizer)