[Python] CustomTkinter フレームの角が丸くならないgrid配置の回避

はじめに

Pythonで簡単におしゃれGUIを作れるCustomTkinterにおいて、customtkinter.CTkFrameの角が丸くならない状況が発生したので、メモとして記載。

実行環境

Windows 10 Pro 64bit
Python 3.9.13
CustomTkinter 5.1.2

角が丸くならない（できない）grid配置

• grid配置で、grid_rowconfigureとgrid_columnconfigureでweight=1として、以下のソースコードのように配置するとフレームの角が丸くならない。

import customtkinter as ctk

class App(ctk.CTk):
    def __init__(self):
        super().__init__()
        self.geometry("240x120")
        self.grid_rowconfigure(0, weight=1)
        self.grid_columnconfigure(0, weight=1)

        self.frame = ctk.CTkFrame(self, fg_color='gray60')
        self.frame.grid(row=0, column=0, padx=20, pady=20, sticky='nsew')
        self.frame.grid_rowconfigure(0, weight=1)
        self.frame.grid_columnconfigure(0, weight=1)

        self.label = ctk.CTkLabel(self.frame, fg_color='gray80')
        self.label.grid(row=0, column=0, sticky='nsew')

if __name__ == "__main__":
    app = App()
    app.mainloop()

• これだけ単純で背景色指定しているとすぐにわかりますが、CTkFrame内に配置したCTkLabelがCTkFrame全体に広がって角が丸くなる余地がなくなっている状態です。
• customtkinterでのcorner_radiusは標準で6pxですが、その丸くなっている部分はウィジェット内部側で丸くなっていす。
• そのためフレーム内に設置するウィジェットがpadx=0, pady=0の状態でsticky='nsew'で配置されると、角が丸い部分も内部のウィジェットが占めてしまい、角が丸くならない状態となります（下図に示す設定が必要）。

上記以外で丸くならない状態1

• 内部に配置するウィジェットのpadx=0, pady=0で、corner_radiusを設定しても角は丸くなりません。
• 以下のように内部のウィジェットは角が丸くなりますが、フレーム自体は角が丸くない状態で設置されます。

-       self.label = ctk.CTkLabel(self.frame, fg_color='gray80')
+       self.label = ctk.CTkLabel(self.frame, fg_color='gray80', corner_radius=10)
        self.label.grid(row=0, column=0, sticky='nsew')

上記以外で丸くならない状態2

• フレームのgrid_rowconfigureとgrid_columnconfigureがweight=0の状態で、内部のフィジェットが四隅側に寄って配置されると、内部のウィジェットがいる角だけ丸くなりません。

        self.frame = ctk.CTkFrame(self, fg_color='gray60')
        self.frame.grid(row=0, column=0, padx=20, pady=20, sticky='nsew')

        self.label = ctk.CTkLabel(self.frame, fg_color='gray80', corner_radius=10)
        self.label.grid(row=0, column=0)

        self.frame = ctk.CTkFrame(self, fg_color='gray60')
        self.frame.grid(row=0, column=0, padx=20, pady=20, sticky='ew')

        self.label = ctk.CTkLabel(self.frame, fg_color='gray80')
        self.label.grid(row=0, column=0)

角が丸くなるgrid配置

• 対策としては、内部に配置するウィジェットに適切な余白を設ける こととなります。

import customtkinter as ctk

class App(ctk.CTk):
    def __init__(self):
        super().__init__()
        self.geometry("240x120")
        self.grid_rowconfigure(0, weight=1)
        self.grid_columnconfigure(0, weight=1)

        self.frame = ctk.CTkFrame(self, fg_color='gray60')
        self.frame.grid(row=0, column=0, padx=20, pady=20, sticky='nsew')
        self.frame.grid_rowconfigure(0, weight=1)
        self.frame.grid_columnconfigure(0, weight=1)

        self.label = ctk.CTkLabel(self.frame, fg_color='gray80')
-       self.label.grid(row=0, column=0, sticky='nsew')
+       self.label.grid(row=0, column=0, padx=20, pady=20, sticky='nsew')

if __name__ == "__main__":
    app = App()
    app.mainloop()

• ウィジェット数が増えてくると、余白の設定もミスりがちなので意図しない配置になった際にはpadx, padyを見直してみるのがいいかもしれません。