pythontkintercustomtkinter

Customtkinter grid buttons not centered


I am trying to make a control panel GUI using customtkinter which essentially consits of different pages with different buttons, however when I go to a different page, the buttons aren't centered.

As you can see, the first page is centered: Home page

However when I navigate to the Music Player, the buttons are aligned to the left for some reason: Music page

When the Music Controls button is pressed, I delete all home screen widgets using

for widget in self.winfo_children():
            widget.destroy()

And then I configure the columns using

self.grid_columnconfigure((0, 2), weight=1)

However, the buttons on the Music Player screen seem to be aligned to the left despite grid_columnconfigure being set.

Here is the code:

import customtkinter
from PIL import Image
from time import strftime

customtkinter.set_default_color_theme("dark-theme.json")

playerOpen = False

class App(customtkinter.CTk):
    def __init__(self):
        super().__init__()
        self.title("Cai's Bar Controls")
        self.geometry("1024x600")
        self.home_screen()

    def home_screen(self):
        for widget in self.winfo_children():
            widget.destroy()
        self.grid_columnconfigure((0, 3), weight=1)
        global playerOpen
        playerOpen = False
        self.bullseye = customtkinter.CTkImage(light_image=Image.open("images/bullseye.png"),size=(100, 100))
        self.lightbulb = customtkinter.CTkImage(light_image=Image.open("images/lightbulb.png"),size=(100, 100))
        self.microphone = customtkinter.CTkImage(light_image=Image.open("images/cog.png"),size=(100, 100))
        self.play = customtkinter.CTkImage(light_image=Image.open("images/play.png"),size=(100, 100))
        self.nexttrack = customtkinter.CTkImage(light_image=Image.open("images/next.png"),size=(100, 100))
        self.previoustrack = customtkinter.CTkImage(light_image=Image.open("images/previous.png"),size=(100, 100))
        self.house = customtkinter.CTkImage(light_image=Image.open("images/home.png"),size=(100, 100))
        self.power = customtkinter.CTkImage(light_image=Image.open("images/power.png"),size=(100, 100))
        self.quit = customtkinter.CTkImage(light_image=Image.open("images/quit.png"),size=(100, 100))
        self.playlist = customtkinter.CTkImage(light_image=Image.open("images/playlist.png"),size=(100, 100))
        self.singalongindiehits = customtkinter.CTkImage(light_image=Image.open("images/singalongindiehits.jpg"),size=(200, 200))
        self.the80shits = customtkinter.CTkImage(light_image=Image.open("images/80shits.jpg"),size=(200, 200))
        self.massivedancehits = customtkinter.CTkImage(light_image=Image.open("images/massivedancehits.jpg"),size=(200, 200))
        self.label = customtkinter.CTkLabel(self, text="Cai's Bar Controls", fg_color="transparent", font=("Roboto", 75, 'bold'))
        self.label.grid(row=0, column=0, padx=20, pady=20, columnspan=4)
        self.clock = customtkinter.CTkLabel(self, text="Time", fg_color="transparent", font=("Roboto", 150))
        self.clock.grid(row=1, column=0, padx=20, pady=20, columnspan=4)
        self.music_controls = customtkinter.CTkButton(self, text="Music Controls", command=self.open_music_controls, image=self.play, width=200, height=200, compound='top')
        self.music_controls.grid(row=2, column=0, padx=20, pady=20)
        self.dart_counter = customtkinter.CTkButton(self, text="Dart Counter", command=self.open_dart_counter, image=self.bullseye, width=200, height=200, compound='top')
        self.dart_counter.grid(row=2, column=1, padx=20, pady=20)
        self.karaoke = customtkinter.CTkButton(self, text="Settings", command=self.open_karaoke, image=self.microphone, width=200, height=200, compound='top')
        self.karaoke.grid(row=2, column=2, padx=20, pady=20)
        self.light_controls = customtkinter.CTkButton(self, text="Light Controls", command=self.open_light_controls, image=self.lightbulb, width=200, height=200, compound='top')
        self.light_controls.grid(row=2, column=3, padx=20, pady=20) 
        self.time()

    def time(self):
        string = strftime('%#I:%M %p')
        self.clock.configure(text=string)
        self.clock.after(1000, self.time)

    def open_music_controls(self):
        for widget in self.winfo_children():
            widget.destroy()
        self.grid_columnconfigure((0, 2), weight=1)
        self.label = customtkinter.CTkLabel(self, text="Music Controls", fg_color="transparent", font=("Arial", 75))
        self.label.grid(row=0, column=0, padx=20, pady=20, columnspan=3)
        self.previous = customtkinter.CTkButton(self, text="", command=self.previous_track, image=self.previoustrack, width=200, height=200, compound='top', font=("Arial", 25))
        self.previous.grid(row=1, column=0, padx=20, pady=20)
        self.pause = customtkinter.CTkButton(self, text="", command=self.play_pause, image=self.play, width=200, height=200, compound='top', font=("Arial", 25))
        self.pause.grid(row=1, column=1, padx=20, pady=20)
        self.skip = customtkinter.CTkButton(self, text="", command=self.next_track, image=self.nexttrack, width=200, height=200, compound='top', font=("Arial", 25))
        self.skip.grid(row=1, column=2, padx=20, pady=20)
        self.home = customtkinter.CTkButton(self, text="", command=self.home_screen, image=self.house, width=50, height=50, compound='top', font=("Arial", 25))
        self.home.grid(row=3, column=1, padx=20, pady=20)
        self.library = customtkinter.CTkButton(self, text="", command=self.open_library, image=self.playlist, width=50, height=50, compound='top', font=("Arial", 25))
        self.library.grid(row=3, column=2, padx=20, pady=20)
        self.nowplaying = customtkinter.CTkLabel(self, text="Loading track...", fg_color="transparent", font=("Arial", 40))
        self.nowplaying.grid(row=2, column=0, padx=20, pady=20, columnspan=3)
        global playerOpen
        playerOpen = True

Solution

  • The fourth column still has a weight of 1 so still takes up space, causing the widgets to appear aligned to the left. Set its weight to 0 when showing the music player:

    def open_music_controls(self):
        for widget in self.winfo_children():
            widget.destroy()
        self.grid_columnconfigure((0, 2), weight=1)
        self.grid_columnconfigure(3, weight=0) # add this