What is the easiest way to align images and buttons in the center of wxpanel vertically?

256 views Asked by At

My project is YouTube and the home page includes the videos you can watch. A video is made of a thumbnail and a button just underneath 'Play'. I would like to have a wxpython panel that is made like this... \image\ button \image\ button and so on

An image at the top of the screen that is placed in the center horizontally and a button just underneath. Then just below the button of the first video, an image and then a button, so on and so on.

I tried looking at sizers and I imagine the solution will include sizers but I had a hard time understanding how it works and how I could use it to resolve my problem.

This is what I have so far (placing the first image in the center horizontally)

    self.image = wx.StaticBitmap(self)
    self.image.SetBitmap(wx.Bitmap('icon.png'))
    self.topsizer = wx.BoxSizer(wx.HORIZONTAL)
    self.topsizer.Add(self.image, wx.ALIGN_CENTER_HORIZONTAL)
    self.SetSizer(self.topsizer)
    self.Layout()
1

There are 1 answers

1
Rolf of Saxony On

The thing to remember, is that people can't just share code, unless they are doing what you are trying to do. It has to be written.
Try using this as a starting point.
The image rescaling is specific to my images, to make them the right size.

import wx 
from wx.lib.scrolledpanel import ScrolledPanel

imgs = ['ace.png','2.png','3.png','4.png','5.png']
links = ['https://www.asite.com/ace.mp4', 'https://www.asite.com/2.mp4', 'https://www.asite.com/3.mp4', 'https://www.asite.com/4.mp4', 'https://www.asite.com/5.mp4']

class Example(wx.Frame): 
   
    def __init__(self, parent, title): 
        super(Example, self).__init__(parent, title = title) 
             
        self.InitUI() 
        self.Centre() 
        self.Show()
        
    def InitUI(self): 
        panel = ScrolledPanel(self, wx.ID_ANY)
        panel.SetupScrolling()
        vbox = wx.BoxSizer(wx.VERTICAL) 

        for index, img in enumerate(imgs):
            bmp = wx.Bitmap(img)
            image = bmp.ConvertToImage()
            image.Rescale(70, 100)
            bmp = wx.Bitmap(image)
            video = wx.StaticBitmap(panel, wx.ID_ANY, bmp)
            button = wx.Button(panel, wx.ID_ANY, "Play", name=str(index))
            button.SetToolTip("Play "+links[index])
            vbox.Add(video, 0, wx.ALL|wx.ALIGN_CENTER_HORIZONTAL, 0) 
            vbox.Add(button, 0, wx.ALL|wx.ALIGN_CENTER_HORIZONTAL, 5) 
            self.Bind(wx.EVT_BUTTON, self.OnPlay, button)
 
        panel.SetSizer(vbox) 

    def OnPlay(self, event): 
        obj = event.GetEventObject()        
        print("Playing ..."+links[int(obj.GetName())])
                  
app = wx.App() 
Example(None, title = 'BoxSizer Demonstration') 
app.MainLoop()

enter image description here