CODEWITHSUNDEEP
pythonwxpython
dumb_coder
dumb_coder

Reputation: 325

How to right align images in wxpython inside sizer

I have two images and I want to align one image to center and another image to the right.

Somehow both of the images align to center. How can I force them to align differently?

Thank you in advance!!

def __init__(self, parent):
    wx.Frame.__init__(self, parent, -1, "Index Calculator", size=(1200, 1000))
    self.panel = wx.Panel(self)
    sizer = wx.BoxSizer(wx.VERTICAL)
    self.SetBackgroundColour("white")
    self.SetIcon(wx.Icon("images/logo.bmp"))

    png = wx.Image("images/logo.bmp", wx.BITMAP_TYPE_ANY).ConvertToBitmap()
    self.img = wx.StaticBitmap(self.panel, -1, png, (10, 5), (png.GetWidth(), png.GetHeight()))

    png_1 = wx.Image("images/logo1.png", wx.BITMAP_TYPE_ANY).ConvertToBitmap()
    self.img1 = wx.StaticBitmap(self.panel, -1, png_1, (10, 5), (png.GetWidth(), png.GetHeight()))

    self.log_text = wx.StaticText(self.panel, label="Results", pos=(6, 1))
    self.log = wx.TextCtrl(self.panel, wx.ID_ANY, size=(250, 100),
                           style=wx.TE_MULTILINE | wx.TE_READONLY | wx.VSCROLL)
    self.button = wx.Button(self.panel, label="Generate Index Score")

    # self.end_text = wx.StaticText(self.panel, label="Powered by", pos=(400, 300))

    sizer.Add(self.img, 0, wx.EXPAND | wx.ALL, 5)
    sizer.Add(self.log_text, 0, wx.EXPAND | wx.ALL, 5)
    sizer.Add(self.log, 0, wx.EXPAND | wx.ALL, 5)
    sizer.Add(self.button, 0, wx.EXPAND | wx.ALL, 5)
    sizer.Add(self.img_1, 0, wx.EXPAND | wx.ALL, 5)

    self.panel.SetSizerAndFit(sizer)
    self.Bind(wx.EVT_BUTTON, self.OnButton)

Upvotes: 0

Views: 615

Answers (2)

Rolf of Saxony
Rolf of Saxony

Reputation: 22453

Use the the ALIGN options within the sizer.
The wx.ALIGN* flags allow you to specify the alignment of the item within the space allotted to it by the sizer, adjusted for the border if any.
wx.ALIGN_CENTER or wx.ALIGN_CENTRE
wx.ALIGN_LEFT
wx.ALIGN_RIGHT
wx.ALIGN_TOP
wx.ALIGN_BOTTOM
wx.ALIGN_CENTER_VERTICAL or wx.ALIGN_CENTRE_VERTICAL
wx.ALIGN_CENTER_HORIZONTAL or wx.ALIGN_CENTRE_HORIZONTAL 

#!/usr/bin/env python3

import wx


class MyFrame(wx.Frame):
    def __init__(self, parent):
        wx.Frame.__init__(self, parent, -1, "Index Calculator", size=(1200, 1000))
        self.panel = wx.Panel(self)
        sizer = wx.BoxSizer(wx.VERTICAL)
        self.SetBackgroundColour("white")
        self.SetIcon(wx.Icon("image/tick1.png"))

        png = wx.Image("image/tick1.png", wx.BITMAP_TYPE_ANY).ConvertToBitmap()
        self.img = wx.StaticBitmap(self.panel, -1, png, (10, 5), (png.GetWidth(), png.GetHeight()))

        png_1 = wx.Image("image/tick2.png", wx.BITMAP_TYPE_ANY).ConvertToBitmap()
        self.img1 = wx.StaticBitmap(self.panel, -1, png_1, (10, 5), (png.GetWidth(), png.GetHeight()))

        self.img2 = wx.StaticBitmap(self.panel, -1, png_1, (10, 5), (png.GetWidth(), png.GetHeight()))

        self.log_text = wx.StaticText(self.panel, label="Results", pos=(6, 1))
        self.log = wx.TextCtrl(self.panel, wx.ID_ANY, size=(250, 100),
                               style=wx.TE_MULTILINE | wx.TE_READONLY | wx.VSCROLL)
        self.button = wx.Button(self.panel, label="Generate Index Score")

        # self.end_text = wx.StaticText(self.panel, label="Powered by", pos=(400, 300))

        sizer.Add(self.img, 0, wx.ALIGN_LEFT | wx.ALL, 5)
        sizer.Add(self.img1, 0, wx.CENTER | wx.ALL, 5)
        sizer.Add(self.log_text, 0, wx.EXPAND | wx.ALL, 5)
        sizer.Add(self.log, 0, wx.EXPAND | wx.ALL, 5)
        sizer.Add(self.button, 0, wx.EXPAND | wx.ALL, 5)
        sizer.Add(self.img2, 0, wx.ALIGN_RIGHT | wx.ALL, 5)

        self.panel.SetSizerAndFit(sizer)
        self.Show()

if __name__ == "__main__":
    app = wx.App()
    frame = MyFrame(None)
    app.MainLoop()

enter image description here

Upvotes: 1

Petr Blahos
Petr Blahos

Reputation: 2433

If you expand, you sizer cannot do any alignment, because the widget has expanded to all available space. Firstly, try changing

 sizer.Add(self.log_text, 0, wx.ALL | wx.ALIGN_RIGHT, 5)

to see if it works. We are starting with static texts because images are always more difficult. When you see that it works, you can try the same with the images, using wx.ALIGN_RIGHT, wx.ALIGN_CENTER.

Upvotes: 0

Related Questions