wxPython: A foldable panel widget

Question

I have my main program window, and I would like to make a foldable panel. What I mean is, a panel which is aligned to one of the sides of the window, with a fold/unfold button. It's important that when the panel gets folded/unfolded, the other widgets change their size accordingly to take advantage of the space they have.

How do I do this?

Answer 1

Here is one way using wx.SplitterWindow

import wx, wx.calendar


class FoldableWindowContainer(wx.Panel):
    def __init__(self, parent, left, right):
        wx.Panel.__init__(self, parent)

        sizer = wx.BoxSizer(wx.HORIZONTAL)
        self.SetSizer(sizer)
        self.splitter = wx.SplitterWindow(self, style=wx.SP_LIVE_UPDATE)
        left.Reparent(self.splitter)
        right.Reparent(self.splitter)
        self.left = left
        self.right = right
        self.splitter.SplitVertically(self.left, self.right)
        self.splitter.SetMinimumPaneSize(50)
        self.sash_pos = self.splitter.SashPosition
        sizer.Add(self.splitter, 1, wx.EXPAND)

        fold_button = wx.Button(self, size=(10, -1))
        fold_button.Bind(wx.EVT_BUTTON, self.On_FoldToggle)
        sizer.Add(fold_button, 0, wx.EXPAND)

    def On_FoldToggle(self, event):
        if self.splitter.IsSplit():
            self.sash_pos = self.splitter.SashPosition
            self.splitter.Unsplit()
        else:
            self.splitter.SplitVertically(self.left, self.right, self.sash_pos)


class FoldTest(wx.Frame):
    def __init__(self):
        wx.Frame.__init__(self, None)

        left = wx.Panel(self, style=wx.BORDER_SUNKEN)
        right = wx.Panel(self, style=wx.BORDER_SUNKEN)

        left_sizer = wx.BoxSizer(wx.VERTICAL)
        left.SetSizer(left_sizer)
        left_sizer.Add(wx.calendar.CalendarCtrl(left), 1, wx.EXPAND | wx.ALL, 5)
        left_sizer.Add(wx.Button(left, label="Act"), 0, wx.EXPAND | wx.ALL, 5)

        right_sizer = wx.BoxSizer(wx.VERTICAL)
        right.SetSizer(right_sizer)
        right_sizer.Add(
            wx.StaticText(right, label="Fold panel", style=wx.BORDER_RAISED),
            1, wx.EXPAND | wx.ALL, 5
        )

        FoldableWindowContainer(self, left, right)


app = wx.PySimpleApp()
app.TopWindow = FoldTest()
app.TopWindow.Show()
app.MainLoop()

Also, check out wx.CollapsiblePane in the wxPython demos.

Answer 2

The layout managers for wxPython (and Swing and others) should be able to do this for you if you create the hierarchy properly. Let's assume it's bound to the right hand side, thus:

+-----------------------------+
|+----------------+ +--------+|
||                | | This is||
||                | | your   ||
||   Other stuff  | | panel  ||
||                | +--------+|
||                | +--------+|
||                | | Another||
||                | | panel  ||
|+----------------+ +--------+|
+-----------------------------+

If your layout is done right, you will have a top-level layout with two columns, one for the other stuff and one for the right-side container.

That container will have it's own layout manager with two rows, one for the top panel, one for the bottom.

That way, when you resize the top panel (your foldable one) to be shorter (fold) or taller (unfold), the layout manager should expand or contract the bottom panel to fit.

Obviously you can use more complicated layout managers, I've chosen the simplest ones to illustrate how to do it without cluttering the discussion with column/row spans and anchors and so on. You can also change the direction of folding by reversing the window managers (horizontal <-> vertical).

Answer 3

The original example of Toni Ruža, with slight modifications to work under 4.0/Phoenix. Very nice working example, thanks Toni!

import wx
import wx.adv


class FoldableWindowContainer(wx.Panel):
    def __init__(self, parent, left, right):
        wx.Panel.__init__(self, parent)

        sizer = wx.BoxSizer(wx.HORIZONTAL)
        self.SetSizer(sizer)
        self.splitter = wx.SplitterWindow(self, style=wx.SP_LIVE_UPDATE)
        left.Reparent(self.splitter)
        right.Reparent(self.splitter)
        self.left = left
        self.right = right
        self.splitter.SplitVertically(self.left, self.right)
        self.splitter.SetMinimumPaneSize(50)
        self.sash_pos = self.splitter.GetSashPosition()
        sizer.Add(self.splitter, 1, wx.EXPAND)

        fold_button = wx.Button(self, size=(10, -1))
        fold_button.Bind(wx.EVT_BUTTON, self.On_FoldToggle)
        sizer.Add(fold_button, 0, wx.EXPAND)

    def On_FoldToggle(self, event):
        if self.splitter.IsSplit():
            self.sash_pos = self.splitter.GetSashPosition()
            self.splitter.Unsplit()
        else:
            self.splitter.SplitVertically(self.left, self.right, self.sash_pos)


class FoldTest(wx.Frame):
    def __init__(self):
        wx.Frame.__init__(self, None)

        left = wx.Panel(self, style=wx.BORDER_SUNKEN)
        right = wx.Panel(self, style=wx.BORDER_SUNKEN)

        left_sizer = wx.BoxSizer(wx.VERTICAL)
        left.SetSizer(left_sizer)
        left_sizer.Add(wx.adv.CalendarCtrl(left), 1, wx.EXPAND | wx.ALL, 5)
        # left_sizer.Add(wx.Button(left, label="Act"), 0, wx.EXPAND | wx.ALL, 5)  # uncommented as unbound

        right_sizer = wx.BoxSizer(wx.VERTICAL)
        right.SetSizer(right_sizer)
        right_sizer.Add(wx.StaticText(right, label="Fold this panel using the thin vertical button on the right"),
                        1, wx.EXPAND | wx.ALL, 5)

        FoldableWindowContainer(self, left, right)


if __name__ == '__main__':
    app = wx.App()
    ex = FoldTest()
    ex.Show()
    app.MainLoop()