Scrolling windows with wxPython
Question: I am making a frame with a scrollbar and some images inside. The scrollbar
works fine when the frame is empty. However, when I add a picture in, the
scrollbars seem to get pushed up into the top left corner of the frame. How
can I implement my code so that the scrollbars stay where they are after I add
pictures?

Working Code;

    
    
        import wx
        import wx.animate
    
    
        class ScrollbarFrame(wx.Frame):
            def __init__(self):
                wx.Frame.__init__(self, None, -1, 'Scrollbar Example', pos = (100, 50), size=(1000, 1000))
                self.scroll = wx.ScrolledWindow(self, -1)
                self.scroll.SetScrollbars(1, 1, 1000, 1000)
                #self.button = wx.Button(self.scroll, -1, "Scroll Me", pos=(50, 20))
                #self.Bind(wx.EVT_BUTTON,  self.OnClickTop, self.button)
                #self.button2 = wx.Button(self.scroll, -1, "Scroll Back", pos=(500, 350))
                #self.Bind(wx.EVT_BUTTON, self.OnClickBottom, self.button2)
                self.SetBackgroundColour("gray")
                imageName = "01 background.png"
                gifName = "Jill.gif"
                backgroundImage = wx.Image(imageName, wx.BITMAP_TYPE_ANY).ConvertToBitmap()
                wx.StaticBitmap(self, -1, backgroundImage,(10,5),(backgroundImage.GetWidth(), backgroundImage.GetHeight()))
                gifImage = wx.animate.GIFAnimationCtrl(self, 0, gifName, pos=(160, 74))
                # clears the background
                gifImage.GetPlayer().UseBackgroundColour(True)
                gifImage.Play()
    
        def update(self, imageName, gifName):
            backgroundImage = wx.Image(imageName, wx.BITMAP_TYPE_ANY).ConvertToBitmap()
            wx.StaticBitmap(self, -1, backgroundImage,(10,5),(backgroundImage.GetWidth(), backgroundImage.GetHeight()))
            gifImage = wx.animate.GIFAnimationCtrl(self, 0, gifName, pos=(100, 100))
            # clears the background
            gifImage.GetPlayer().UseBackgroundColour(True)
            gifImage.Play()
    
        def OnClickTop(self, event):
            self.scroll.Scroll(600, 400)
    
        def OnClickBottom(self, event):
            self.scroll.Scroll(1, 1)
    
    
    app = wx.PySimpleApp()
    frame = ScrollbarFrame()
    frame.Show()
    app.MainLoop()
    

* * *

if you comment out this part:

    
    
     gifName = "Jill.gif"
            backgroundImage = wx.Image(imageName, wx.BITMAP_TYPE_ANY).ConvertToBitmap()
            wx.StaticBitmap(self, -1, backgroundImage,(10,5),(backgroundImage.GetWidth(), backgroundImage.GetHeight()))
            gifImage = wx.animate.GIFAnimationCtrl(self, 0, gifName, pos=(160, 74))
            # clears the background
            gifImage.GetPlayer().UseBackgroundColour(True)
            gifImage.Play()
    

the window displays properly with the scrollbar. But include either (or both)
of the image files, and the problem occurs.


Answer: If you want your images inside the scrolled window panel, then you have to put
your static bipmap and gifImage inside it. So the parent of your images should
not be `self` (the `wx.Frame` instance) but `self.scroll`.

Modify the 4 lines indicated:

    
    
        ...................
        wx.StaticBitmap(self.scroll, -1, backgroundImage,(10,5),(backgroundImage.GetWidth(), backgroundImage.GetHeight()))    # <- this one
        gifImage = wx.animate.GIFAnimationCtrl(self.scroll, 0, gifName, pos=(160, 74))  # <- this one
        # clears the background
        gifImage.GetPlayer().UseBackgroundColour(True)
        gifImage.Play()
    
    def update(self, imageName, gifName):
        backgroundImage = wx.Image(imageName, wx.BITMAP_TYPE_ANY).ConvertToBitmap()
        wx.StaticBitmap(self.scroll, -1, backgroundImage,(10,5),(backgroundImage.GetWidth(), backgroundImage.GetHeight()))    # <- this one
        gifImage = wx.animate.GIFAnimationCtrl(self.scroll, 0, gifName, pos=(100, 100))  # <- this one
        ...................
    

This puts your two images one over the other. If you want to put them
separately (column or row), then you should add them to a sizer inserted in
your scrolled window

