I'm trying to place two frames together inside another frame but I can't done it with the layout managers.

The frames are imported from ttk, gray area is the result of border. My target is, the first image fill all gray area on the left, and the second fill the gray area on right. Eventually I'm gonna change the second picture by another widget. My code is:

    class Window(Frame):
        def __init__(self, master, *args):
            super().__init__(master, *args)
            self.principal_frame = Frame(self.master)
            self.principal_frame.grid(column=1, row=1, sticky='nsew')
            self.master.columnconfigure(1, weight=1)
            self.master.rowconfigure(1, weight=1)
            self.widgets()

        def tactical_window(self):
            self.pages.select([self.third_frame])

        def widgets(self):
            self.image_pitch = PhotoImage(file=...)
            self.pages = ttk.Notebook(self.principal_frame)
            self.pages.grid(column=0, row=0, sticky='nsew')
            self.third_frame = Frame(self.pages, bg='white')
            self.third_frame.pack(fill=tk.BOTH, expand=True)
            self.pages.add(self.third_frame)

            # Third Frame
            self.frame_tactic_pitch = ttk.Frame(self.third_frame, borderwidth=2)
            self.frame_player_list = ttk.Frame(self.third_frame, borderwidth=3)
            self.frame_pitch_tactic.pack(side=tk.LEFT, expand=True, fill=tk.BOTH, pady=2, padx=2)
            self.frame_players_tactic.pack(side=tk.LEFT, expand=False, fill=tk.Y, pady=2, padx=2)
            
            # Pitch
            self.canvas_pitch = tk.Canvas(self.frame_tactic_pitch)
            self.canvas_pitch.pack()
            self.canvas_pitch.create_image(0, 0, image=self.image_pitch, anchor='nw')
            self.canvas_pitch1 = tk.Canvas(self.frame_player_list)
            self.canvas_pitch1.pack()
            self.canvas_pitch1.create_image(0, 0, image=self.image_pitch, anchor='nw')
            
            ...

I'm trying self.frame_tactic_pitch use ≈75% of self.third_frame and self.frame_player_list the remaining.

And the widget canvas uses the total of self.frame_tactic_pitch but that the image fits fairly, it doesn't matter if enlarging the window deforms the image.

CodePudding user response：

One simple way to achieve what you want is to create a uniform group, by giving both columns the same value for the uniform option. Then, give each column a proportional weight. In your case it's 3 and 1. grid will then maintain the sizes in strict proportion to the weight.

From the official grid documentation:

The -uniform option, when a non-empty value is supplied, places the column in a uniform group with other columns that have the same value for -uniform. The space for columns belonging to a uniform group is allocated so that their sizes are always in strict proportion to their -weight values.

It looks something like the following example. This example puts the two frames in the root window, but the technique will work just as well by putting the frames in another frame.

import tkinter as tk

root = tk.Tk()
root.geometry("300x200")

f1 = tk.Frame(root, bd=1, relief="raised")
f2 = tk.Frame(root, bd=1, relief="raised")

root.grid_rowconfigure(0, weight=1)
root.grid_columnconfigure(0, weight=3, uniform="group1")
root.grid_columnconfigure(1, weight=1, uniform="group1")

f1.grid(row=0, column=0, sticky="nsew")
f2.grid(row=0, column=1, sticky="nsew")

root.mainloop()