wxpython panel size and titles

Question

When I apply the following code, the second panel is showed over the first one. I would like to know how I can get the two panels without overlapping and with the appropriate size of the window (frame). I would also like to know if there is any suitable way to draw some kind of titles in a panel (in this case, "Inputs:" and "Outputs:"). Thanks!

import wx

class Input_Panel(wx.Panel):
    def __init__(self, parent):
        wx.Panel.__init__(self, parent)
        # Input variables
        self.tittle1 = wx.StaticText(self, label="Inputs:")    
        self.lblname1 = wx.StaticText(self, label="Input 1:")
        self.format1 = ['Option 1','Option 2']
        self.combo1 = wx.ComboBox(self, size=(200, -1),value='', choices=self.format1, style=wx.CB_DROPDOWN)
        self.lblname2 = wx.StaticText(self, label="Input 2")
        self.format2 = ['Option 1','Option 2', 'Option 3']
        self.combo2 = wx.ComboBox(self, size=(200, -1),value='', choices=self.format2, style=wx.CB_DROPDOWN)

        # Set sizer for the panel content
        self.sizer = wx.GridBagSizer(2, 2)
        self.sizer.Add(self.tittle1, (1, 2))
        self.sizer.Add(self.lblname1, (2, 1))
        self.sizer.Add(self.combo1, (2, 2))
        self.sizer.Add(self.lblname2, (3, 1))
        self.sizer.Add(self.combo2, (3, 2))
        self.SetSizer(self.sizer)

class Output_Panel(wx.Panel):
    def __init__(self, parent):
        wx.Panel.__init__(self, parent)
        # Output variables
        self.tittle2 = wx.StaticText(self, label="Outputs:")    
        self.lblname3 = wx.StaticText(self, label="Output1")
        self.result3 = wx.StaticText(self, label="", size=(100, -1))

        # Set sizer for the panel content
        self.sizer = wx.GridBagSizer(2, 2)
        self.sizer.Add(self.tittle2, (1, 2))
        self.sizer.Add(self.lblname3, (2, 1))
        self.sizer.Add(self.result3, (2, 2))
        self.SetSizer(self.sizer)

class Main_Window(wx.Frame):
    def __init__(self, parent, title):
        wx.Frame.__init__(self, parent, title = title)

        # Set variable panels
        self.splitter = wx.SplitterWindow(self)
        self.panel1 = Input_Panel(self.splitter)
        self.panel2 = Output_Panel(self.splitter)
        self.splitter.SplitVertically(self.panel1, self.panel2)

        self.windowSizer = wx.BoxSizer(wx.VERTICAL)
        self.windowSizer.Add(self.splitter, 1, wx.ALL | wx.EXPAND)   
        self.SetSizerAndFit(self.windowSizer)

def main():
    app = wx.App(False)
    frame = Main_Window(None, "App GUI")
    frame.Show()
    app.MainLoop()

if __name__ == "__main__" :
    main()

Answer 1

You can use the Widget Inspection Tool to help you figure out what's going on. I used its highlight functionality to figure out where and what size each of the panels were. You can read more about it here: http://wiki.wxpython.org/Widget%20Inspection%20Tool

The SplitterWindow does not split items equally. You will need to call the splitter's SetMinimumPaneSize to make them both visible. I modified your code to show you what I'm talking about and also to demonstrate how to add the inspection tool:

import wx

class Input_Panel(wx.Panel):
    def __init__(self, parent):
        wx.Panel.__init__(self, parent)
        # Input variables
        self.tittle1 = wx.StaticText(self, label="Inputs:")    
        self.lblname1 = wx.StaticText(self, label="Input 1:")
        self.format1 = ['Option 1','Option 2']
        self.combo1 = wx.ComboBox(self, size=(200, -1),value='', choices=self.format1, style=wx.CB_DROPDOWN)
        self.lblname2 = wx.StaticText(self, label="Input 2")
        self.format2 = ['Option 1','Option 2', 'Option 3']
        self.combo2 = wx.ComboBox(self, size=(200, -1),value='', choices=self.format2, style=wx.CB_DROPDOWN)

        # Set sizer for the panel content
        self.sizer = wx.GridBagSizer(2, 2)
        self.sizer.Add(self.tittle1, (1, 2))
        self.sizer.Add(self.lblname1, (2, 1))
        self.sizer.Add(self.combo1, (2, 2))
        self.sizer.Add(self.lblname2, (3, 1))
        self.sizer.Add(self.combo2, (3, 2))
        self.SetSizer(self.sizer)

class Output_Panel(wx.Panel):
    def __init__(self, parent):
        wx.Panel.__init__(self, parent)
        # Output variables
        self.tittle2 = wx.StaticText(self, label="Outputs:")    
        self.lblname3 = wx.StaticText(self, label="Output1")
        self.result3 = wx.StaticText(self, label="", size=(100, -1))

        # Set sizer for the panel content
        self.sizer = wx.GridBagSizer(2, 2)
        self.sizer.Add(self.tittle2, (1, 2))
        self.sizer.Add(self.lblname3, (2, 1))
        self.sizer.Add(self.result3, (2, 2))
        self.SetSizer(self.sizer)

class Main_Window(wx.Frame):
    def __init__(self, parent, title):
        wx.Frame.__init__(self, parent, title = title, size=(800,600))

        # Set variable panels
        self.splitter = wx.SplitterWindow(self, style = wx.SP_LIVE_UPDATE)
        self.panel1 = Input_Panel(self.splitter)
        self.panel2 = Output_Panel(self.splitter)
        self.splitter.SplitVertically(self.panel1, self.panel2)
        w, h = self.GetSize()
        self.splitter.SetMinimumPaneSize(w/2)

        self.windowSizer = wx.BoxSizer(wx.VERTICAL)
        self.windowSizer.Add(self.splitter, 1, wx.ALL | wx.EXPAND)   

        #self.SetSizerAndFit(self.windowSizer)

def main():
    import wx.lib.inspection
    app = wx.App(False)
    frame = Main_Window(None, "App GUI")
    frame.Show()
    wx.lib.inspection.InspectionTool().Show()
    app.MainLoop()

if __name__ == "__main__" :
    main()

Answer 2

Modifying

self.SetSizer(self.sizer)

by

self.SetSizerAndFit(self.sizer)

into Input_Panel and output_Panel classes also resizes panels correctly.