Buttons on a gradient bar to access different panels

Question

The following code makes a window with a grey gradient bar.

import wx

class GradientFrame(wx.Frame):
    def __init__(self, parent, title):
        wx.Frame.__init__(self, parent, -1, title)
        self.Bind(wx.EVT_PAINT, self.OnPaint)
        self.Bind(wx.EVT_ERASE_BACKGROUND, lambda event: None)
        self.Bind(wx.EVT_SIZE, self.OnSize)
        self.Center()
        self.Show()

    def OnSize(self, event):
        event.Skip()
        self.Refresh()

    def OnPaint(self, event):
        dc = wx.BufferedPaintDC(self)
        rect = self.GetClientRect()
        dc.SetBackground(wx.Brush("white"))
        dc.Clear() 
        rect.SetHeight(30)
        dc.GradientFillLinear(rect, '#fbfbfb', '#efefef', wx.SOUTH)
        rect.SetTop(30)
        rect.SetHeight(2)
        dc.GradientFillLinear(rect, '#dbdbdb', '#c1c1c1', wx.SOUTH)

app = wx.App(0)
frame = GradientFrame(None, 'Test')
app.MainLoop()

I would like to add toogle buttons like the following screenshot, that allows to access to different pages / panels of the GUI (each of them containing their own widgets, etc.)

What is the good framework for that : should these buttons be created manually in OnPaint (this would be very 'low-level') or somewhere else? Is there a ready-to-use way to use buttons linked to different pages ?

Answer 1

There is no good framework for creating custom widgets. However, there are some good recipes out there:

• https://stackoverflow.com/questions/1351448/how-to-make-custom-buttons-in-wx
• http://wiki.wxpython.org/CreatingCustomControls

Those two links should get you started. You can also take a look at the source for GenericButtons, AquaButton or PlateButton for additional ideas.

Alternatively, you could also just create a panel that's a specific size and put some of the custom buttons or just regular buttons on it instead.

Here's an example of how to use PlateButtons that should get you started:

import wx
import wx.lib.platebtn as platebtn

class GradientFrame(wx.Frame):
    def __init__(self, parent, title):
        wx.Frame.__init__(self, parent, -1, title)
        self.panel = wx.Panel(self)
        self.panel.Bind(wx.EVT_PAINT, self.OnPaint)
        self.panel.Bind(wx.EVT_ERASE_BACKGROUND, lambda event: None)
        self.panel.Bind(wx.EVT_SIZE, self.OnSize)

        # add plate buttons
        top_sizer = wx.BoxSizer(wx.VERTICAL)
        btn_sizer = wx.BoxSizer(wx.HORIZONTAL)
        labels = ["Morceaux", "Albums", "Artistes", "Genres"]
        style = platebtn.PB_STYLE_GRADIENT
        for label in labels:
            btn = platebtn.PlateButton(self.panel, label=label, style=style)
            btn.SetPressColor(wx.Colour(208,208,208))
            btn_sizer.Add(btn, 0, wx.RIGHT|wx.LEFT|wx.CENTER, 5)

        top_sizer.Add(btn_sizer, 0, wx.ALL|wx.CENTER, 5)
        top_sizer.Add((1,1), 1, wx.EXPAND)
        self.panel.SetSizer(top_sizer)

        self.Center()
        self.Show()

    def OnSize(self, event):
        event.Skip()
        self.Refresh()

    def OnPaint(self, event):
        dc = wx.BufferedPaintDC(self.panel)
        rect = self.panel.GetClientRect()
        dc.SetBackground(wx.Brush("white"))
        dc.Clear() 
        rect.SetHeight(30)
        dc.GradientFillLinear(rect, '#fbfbfb', '#efefef', wx.SOUTH)
        rect.SetTop(30)
        rect.SetHeight(2)
        dc.GradientFillLinear(rect, '#dbdbdb', '#c1c1c1', wx.SOUTH)

app = wx.App(0)
frame = GradientFrame(None, 'Test')
app.MainLoop()