Load an image into a wx.BoxSizer

Posted on 2009-12-23
Last Modified: 2012-05-08
Hi all,

I am trying to make up a very basic interface for viewing an image. The layout of the GUI will be something like this:

While I understand how sizers work for basic GUI, I'm struggling to work out how to make this work with an image. I've found several examples but these seem to mainly display an image over the entire frame.

Can this be done by loading an image into a box sizer or is there a better method? Any direction to a worked example or tutorial would be greatly appreciated. Images are always the same size if it makes any difference.

Thanks in advance for your time,

Question by:devondan
    LVL 28

    Accepted Solution

    Have a look at the example below and ask the questions. The panels are not fine tuned -- just to show principle. The code for the ImageWindow was borrowed (see url in the comment). The image has the fixed name here.
    import wx
    class ImageWindow(wx.Window):
        "The code of the class taken from"
        def __init__(self, parent, id):
            wx.Window.__init__(self, parent, id)
            self.Bind(wx.EVT_PAINT, self.OnPaint)
            self.image = None
        def SetImage(self, image):
            self.image = image
        def OnPaint(self, evt):
            dc = wx.PaintDC(self)
            if self.image:
                dc.DrawBitmap(self.image.ConvertToBitmap(), 0, 0, False)
    class AppFrame(wx.Frame):
        def __init__(self, parent, ID, title, pos=wx.DefaultPosition,
                     size=wx.DefaultSize, style=wx.DEFAULT_FRAME_STYLE):
            wx.Frame.__init__(self, parent, ID, title, pos, size, style)
            # Build the panels with buttons and other controls.
            vbox = wx.BoxSizer(wx.VERTICAL)
            topBox = wx.BoxSizer(wx.HORIZONTAL)  # the left for controls, the right for image
            botBox = wx.BoxSizer(wx.HORIZONTAL)  # the bottom for buttons
            vbox.Add(topBox, 1, wx.EXPAND)
            # Some buttons added to the bottom part of the window.
            btnA = wx.Button(self, wx.ID_ANY, 'Button A')
            btnB = wx.Button(self, wx.ID_ANY, 'Button B')
            btnC = wx.Button(self, wx.ID_ANY, 'Button C')
            btnD = wx.Button(self, wx.ID_ANY, 'Button D')
            # Vertical box for left controls (here the buttons).
            leftBox = wx.BoxSizer(wx.VERTICAL)
            btn1 = wx.Button(self, wx.ID_ANY, 'Button 1')
            btn2 = wx.Button(self, wx.ID_ANY, 'Button 2')
            topBox.Add(leftBox)  # Left box added to the top box.
            # Image window created and added to the top box (a second box, after the left box)
            imageWindow = ImageWindow(self, wx.ID_ANY)
            topBox.Add(imageWindow, 1, wx.EXPAND) # vertically and horizontally stretchable
            # Image loaded and set to the image window.
            image = wx.Image('image.png', wx.BITMAP_TYPE_PNG)
            # Set the vbox as the top sizer.
    class MyApplication(wx.App):
        def OnInit(self):
            wnd = AppFrame(None, wx.ID_ANY, "Main application window -- title")
            return True
    def main():
        app = MyApplication(False)
    if __name__ == "__main__":

    Open in new window

    LVL 28

    Expert Comment

    You should observe something like that on the screen (here with console window at the background, on Windows).

    Author Closing Comment

    Greatly appreciated example. Thank you very much for your time.

    LVL 28

    Expert Comment

    Man, you are fast!  (Thanks for the point ;)

    Feel free to continue this question when asking for details.


    Author Comment

    I've been quite actively waiting for a response to this one. I had the theory right but was just lacking that example that provides a working base to learn from. This is exactly what I was looking for.

    Thanks again and for the offer of any additional help.

    LVL 28

    Expert Comment

    The key idea to understand (in my opinion) is that box sizers are structures separated from the abstraction of windows. They are used only for calculation of geometry... However, they make sense only when some windows (controls) are organized via them. This way, you always have to have some objects derived from the wx.Window base class (here the buttons and the ImageWindow).

    The wx.Bitmap class object is not capable to display itself. There is a class wx.StaticBitmap; however, it was not designed for displaying big images (rather icons or such). It is more suitable to draw it via the device context of another window.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    Variable is a place holder or reserved memory locations to store any value. Which means whenever we create a variable, indirectly we are reserving some space in the memory. The interpreter assigns or allocates some space in the memory based on the d…
    The purpose of this article is to demonstrate how we can use conditional statements using Python.
    Learn the basics of lists in Python. Lists, as their name suggests, are a means for ordering and storing values. : Lists are declared using brackets; for example: t = [1, 2, 3]: Lists may contain a mix of data types; for example: t = ['string', 1, T…
    Learn the basics of modules and packages in Python. Every Python file is a module, ending in the suffix: .py: Modules are a collection of functions and variables.: Packages are a collection of modules.: Module functions and variables are accessed us…

    759 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    11 Experts available now in Live!

    Get 1:1 Help Now