CODEWITHSUNDEEP
pythontkinterbuttoncustomtkintertkinter-layout
longira
longira

Reputation: 15

How to get asymmetric buttons in Tkinter frame

I have a Tkinter frame with 3 buttons side by side. My goal is to have the left button about 2 or 3 times wider than the others. I tried many different grid configurations but nothing works, they stay the same on full screen display.

When resized they get even worse, the 2 right buttons retain the same proportions and the left one is squeezed horizontally. I cannot explain this behavior at all. Can someone let me know how can I solve this riddle?

Here's one approach I tried:

class FocusControlFrame(ctk.CTkFrame):
    """Mid-Right Control Frame for microscope controls"""
    def __init__(self, master: ctk.CTk, tile_frame: TileFrame, api: AccuscopeAPI, **kwargs) -> None:
        super().__init__(master, corner_radius=10, fg_color=CANVAS_COLOR_2, bg_color=CANVAS_COLOR_2, **kwargs)
        self.api = api
        self.tile_frame = tile_frame

        self.auto_focus_btn = ctk.CTkButton(self, corner_radius=10, bg_color=CANVAS_COLOR_2, fg_color=CANVAS_COLOR_2, border_width=2,
                                            border_color='#2EADE8', text="Auto Focus", font=("Arial", 18), text_color='#2EADE8')
        self.fourx_btn = ctk.CTkButton(self, corner_radius=10, bg_color=CANVAS_COLOR_2, fg_color=CANVAS_COLOR_2,
                                            border_color='#2EADE8', text="4X", font=("Arial", 18), text_color='#2EADE8', border_width=2,
                                            command=lambda: self.change_objective('4x', 4))
        self.twentyx_btn = ctk.CTkButton(self, corner_radius=10, bg_color=CANVAS_COLOR_2, fg_color=CANVAS_COLOR_2, border_width=2,
                                            border_color='#2EADE8', text="40X", font=("Arial", 18), text_color='#2EADE8',
                                            command=lambda: self.change_objective('20x', 20))
        
        self.grid_columnconfigure(0, weight=10)
        self.grid_columnconfigure(tuple(range(1, 3)), weight=1)
        self.grid_rowconfigure(0, weight=1)
        
        self.auto_focus_btn.grid(row=0, column=0, rowspan=1, columnspan=1, sticky="nsew", padx=5, pady=5)
        self.fourx_btn.grid(row=0, column=1, rowspan=1, columnspan=1, sticky="nsew", padx=5, pady=5)
        self.twentyx_btn.grid(row=0, column=2, rowspan=1, columnspan=1, sticky="nsew", padx=5, pady=5)

I also tried 5 column grid when the first button spans first 3 columns.

In every case the result looks like this: enter image description here

When window is resized this is the result: enter image description here

Please help.

Upvotes: 0

Views: 49

Answers (2)

acw1668
acw1668

Reputation: 47085

If you want the three buttons having same proportion after resized, you need to set uniform option to same value in .grid_columnconfigure(...):

# make the size of button in column 0 three times the size of those in column 1 to 3
self.grid_columnconfigure(0, weight=3, uniform='a')
self.grid_columnconfigure(tuple(range(1, 3)), weight=1, uniform='a')

Upvotes: 1

Jacob
Jacob

Reputation: 28

Maybe you can use the '.place' method. It allows you to set the size of a widget using the 'width' and 'height' parameters.

Here is an example:

import tkinter as tk
from tkinter import ttk

root = tk.Tk()
root.title("Button Test")

frame = ttk.Frame(root, relief='solid', width=400, height=50)
frame.grid(row=0, column=0, padx=10, pady=10)
frame.grid_propagate(False)

ttk.Button(frame, text="Button 1").place(width=150, height=40, x=0, y=5)
ttk.Button(frame, text="Button 2").place(width=100, height=40, x=160, y=5)
ttk.Button(frame, text="Button 3").place(width=100, height=40, x=270, y=5)

root.mainloop()

enter image description here

Upvotes: 0

Related Questions