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


## はじめに
Pythonで簡単におしゃれGUIを作れる<a href="https://github.com/TomSchimansky/CustomTkinter">CustomTkinter</a>において、`customtkinter.CTkFrame`の角が丸くならない状況が発生したので、メモとして記載。

### 実行環境
Windows 10 Pro 64bit
Python 3.9.13
CustomTkinter 5.1.2

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

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

```Python:
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()

```

![grid1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079481/5c3fc0dd-bab3-2143-b874-c2e711baa5b7.png)

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

![grid2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079481/8165d491-baa2-63b4-6c76-215e3a881e28.png)

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

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

```diff_python:
-       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')
```

![grid4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079481/91f53c83-9693-cdab-9bab-3e32e069a6df.png)

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

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

```Python:
        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)
```

![grid5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079481/71f04cd1-7924-b929-c9ed-57b07939dcee.png)


```Python:
        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)
```

![grid6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079481/0566b78f-3209-6830-137c-fd929d12990a.png)


# 角が丸くなるgrid配置

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

```diff_python:
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()
```

![grid3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079481/962c6672-7c9b-ab61-4ed2-641b5b500b49.png)


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