作成日 : 2021-05-24
更新日 : 2021-11-03
36 min readPythonTkinter

Tkinterで使うpanedwindowとは?活用方法から各種用語に関して解説

今回はTkinterで使うpanedwindowに関して、活用方法から各種用語に関して徹底解説いたします。panedwindowに関して知りたい、Frame Widgetとの違いを学習したい方へおすすめです。是非最後までご一読ください。

そもそもTkinterで利用されるpanedwindowとは?

Tkinterで利用されるpanedwindowとは、Widgetの一種で、1つ以上のWidgetを取りまとめつつ、自由にWidgetの大きさを変更できるもの = Frameを意味します。

別名panedwindow Widgetと呼ばれます。

初耳な言葉がいくつか出てきましたね。。以下の「Tkinterの構成要素」を確認しながら、理解を深めましょう。

Tkinterの構成要素

Tkinterの構成要素として、Window, Frame, Widgetの概念が存在します。

前の章でTkinterで活用されるpanedwindowとは、Widgetの一種で、1つ以上のWidgetを取りまとめつつ、自由にWidgetの大きさを変更できるもの = Frameとお伝えしました。

「Tkinterの構成要素」の画像内では、水色枠に該当するFrameに対して、編集することになります。

Tkinterの構成要素を理解したところで、実際にpanedwindowの活用方法を理解していきましょう。

panedwindowで囲まれるWidget(画像内では紫色枠)のことをペインと呼びます。またペインとペインの間の空間(画像内では緑色枠)をさっし、さっしの中に表示される四角いものをhandleと呼びます。さっしを選択した状態で、左右(上下)にさっしを動かすと、自由にペイン(Widget)の大きさを変更することができます。handleに関しても、さっしと同様の動作を行います。

Widgetの一種と書かれているので、Widgetと混同される方も多いと思います。正確に説明すると、panedwindowは、1つの機能を持つ最小単位としてWidgetの一種であり、主な役割としてFrameとして働きます。要するに両側面(Widget, Frame)の役割を持っていますが、「Frame」として使う場面が多いため、普段使いではFrameと定義していると考えてください。

panedwindow Widgetとframe Widgetの違い

先ほどは「Tkinterの構成要素」を確認して、panedwindow Widget = Frameであることを説明しました。

しかし同じくFrameの役割を持つ、frame Widgetとの違いを解説していませんでした。

panedwindow Widgetとframe Widgetの違いを簡単に説明すると、

• さっしが存在する
• handleが存在する
• 自由にWidget(ペイン)の大きさを変更できる

点が異なります。

以下の画像をご確認ください。

画像上がpanedwindow Widget、画像下がframe Widgetを表します。

panedwindow Widgetの方だけ、さっしやhandleが存在して、Widget(ペイン)の大きさを変えられます。

frame Widgetに関して理解を深めたい方は、【入門者必見】Tkinterで活用されるframeとは?実用例を通して徹底解説の記事をご確認ください。

panedwindow Widgetで囲まれるWidget(画像内では緑色枠)のことをペインと呼びます。またペインとペインの間の空間(画像内ではオレンジ色枠)をさっし、さっしの中に表示される四角いものをhandleと呼びます。さっしを選択した状態で、左右(上下)にさっしを動かすと、自由にペイン(Widget)の大きさを変更することができます。handleに関しても、さっしと同様の動作を行います。

下準備

今回は先ほど紹介した「Tkinterの構成要素」の画像を元に、panedwindowの使い方をお伝えします。

下にコードを貼り付けておきますので、画像と見比べながら、コードを確認してみてください。できればコードに触れて、一緒にpanedwindowを実装しましょう。

1import tkinter as tk
2
3class Application(tk.Frame):
4    def __init__(self, master=None):
5        # Windowの初期設定を行う。
6        super().__init__(master)
7
8        # Windowの画面サイズを設定する。
9        # geometryについて : https://kuroro.blog/python/rozH3S2CYE0a0nB3s2QL/
10        self.master.geometry("300x200")
11
12        # Windowを親要素として、panedwindow Widget(Frame)を作成する。
13        # <用語の説明>
14        # panedwindow Widget(Frame)の中に配置される、Widgetのことを「ペイン」という。
15        # ペインとペインの間の空間を「さっし」という。さっしを選択した状態で、さっしを左右(上下)へ動かすとペインの大きさを自由に変更できる。
16        # また、さっしの中に表示される、四角いものを「handle」という。handleはさっしと同じ動作を行う。
17        # showhandle : さっしの中へhandleを表示するかどうかの設定。True : 表示する, False : 表示しない。
18        # sashwidth : さっしの幅を設定。
19        panedWindow = tk.PanedWindow(self.master, showhandle=True, sashwidth=20)
20
21        # panedwindow Widget(Frame)を親要素として、label Widgetを作成する。
22        # width : 幅の設定
23        # background : 背景色の設定
24        # 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/
25        # text : テキスト情報
26        # Labelについて : https://kuroro.blog/python/Pj4Z7JBNRvcHZvtFqiKD/
27        label1 = tk.Label(panedWindow, width=30, background="red", text='test1')
28
29        # panedwindow Widget(Frame)を親要素として、label Widgetを作成する。
30        # width : 幅の設定
31        # background : 背景色の設定
32        # 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/
33        # text : テキスト情報
34        # Labelについて : https://kuroro.blog/python/Pj4Z7JBNRvcHZvtFqiKD/
35        label2 = tk.Label(panedWindow, width=30, background="blue", text='test2')
36
37        # label Widget要素をpanedwindow Widget(Frame)へ格納。ペインとする。
38        # add(Widget) : Widgetをpanedwindow Widget(Frame)へ格納する。
39        panedWindow.add(label1)
40        # label Widget要素をpanedwindow Widget(Frame)へ格納。ペインとする。
41        # add(Widget) : Widgetをpanedwindow Widget(Frame)へ格納する。
42        panedWindow.add(label2)
43
44        # Windowを親要素とした場合に、panedwindow Widget(Frame)をどのように配置するのか?
45        # packについて : https://kuroro.blog/python/UuvLfIBIEaw98BzBZ3FJ/
46        panedWindow.pack()
47
48# Tkinter初学者参考 : https://docs.python.org/ja/3/library/tkinter.html#a-simple-hello-world-program
49if __name__ == "__main__":
50    # Windowを生成する。
51    # Windowについて : https://kuroro.blog/python/116yLvTkzH2AUJj8FHLx/
52    root = tk.Tk()
53    app = Application(master=root)
54    # Windowをループさせて、継続的にWindow表示させる。
55    # mainloopについて : https://kuroro.blog/python/DmJdUb50oAhmBteRa4fi/
56    app.mainloop()

上記のコードをPython環境で実行すると、「Tkinterの構成要素」で紹介した画像の結果が表示されます。

Tkinterで活用されるpanedwindow Widgetの定義

panedwindow Widgetは、

1tk.PanedWindow(option1, option2, ...) or tk.PanedWindow('親要素', option1, option2, ...)

で定義されます。

panedwindow Widgetで使われるoptionの種類としては

• background, bg
• borderwidth, bd
• width, height
• relief
• cursor
• orient
• sashcursor
• sashpad, sashwidth
• sashrelief
• showhandle
• handlepad
• handlesize

があります。順番に見ていきましょう。

※ optionの種類一覧を調べたい場合は、以下のようにコードを記述してご確認ください。

1# panedwindowを生成する。
2panedwindow = tk.PanedWindow()
3# panedwindowに関するoptionの種類一覧を取得する。
4print(panedwindow.keys())

background, bg

background option, bg optionを利用すると、panedwindow Widgetの背景色を変更できます。

backgroundとbg両方のoptionを用いて、値を設定した場合、後ろの引数に設定されるoptionが優先されます。

色に関しては、Tkinterの色の使い方とは?活用例から色の一覧をまとめて紹介!?で総括していますので、詳しく知りたい方は是非ご確認ください。

例えば下準備コードのpanedWindow = tk.PanedWindow(self.master, showhandle=True, sashwidth=20)箇所を、以下のように変更すると、

1# 別解法 ##########################
2# panedWindow = tk.PanedWindow(self.master)
3# panedWindow.config(showhandle=True, sashwidth=20, bg="green") or panedWindow.configure(showhandle=True, sashwidth=20, bg="green")
4##################################
5# 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/
6panedWindow = tk.PanedWindow(self.master, showhandle=True, sashwidth=20, bg="green")

以下の画像のようにpanedwindow Widgetを描画します。

borderwidth, bd

borderwidth option, bd optionを利用すると、panedwindow Widgetの枠の大きさを変更できます。

borderwidthとbd両方のoptionに値を設定した場合、後ろの引数に設定されるoptionが優先されます。

例えば下準備コードのpanedWindow = tk.PanedWindow(self.master, showhandle=True, sashwidth=20)箇所を、以下のように変更すると、

1# 別解法 ##########################
2# panedWindow = tk.PanedWindow(self.master)
3# panedWindow.config(showhandle=True, sashwidth=20, bg="green", bd=20) or panedWindow.configure(showhandle=True, sashwidth=20, bg="green", bd=20)
4##################################
5panedWindow = tk.PanedWindow(self.master, showhandle=True, sashwidth=20, bg="green", bd=20)

以下の画像のようにpanedwindow Widgetを描画します。

width, height

width option, height optionを利用すると、それぞれpanedwindow Widgetの幅・高さを変更できます。

例えば下準備コードのpanedWindow = tk.PanedWindow(self.master, showhandle=True, sashwidth=20)箇所を、以下のように変更すると、

1# 別解法 ##########################
2# panedWindow = tk.PanedWindow(self.master)
3# panedWindow.config(showhandle=True, sashwidth=20, height=100, width=500) or panedWindow.configure(showhandle=True, sashwidth=20, height=100, width=500)
4##################################
5panedWindow = tk.PanedWindow(self.master, showhandle=True, sashwidth=20, height=100, width=500)

以下の画像のようにpanedwindow Widgetを描画します。

relief

relief optionを利用すると、panedwindow Widgetの枠のデザインを変更できます。

指定方法としては、

• tk.RAISED
• tk.SUNKEN
• tk.FLAT
• tk.RIDGE
• tk.GROOVE
• tk.SOLID

の6種類があります。

例えば下準備コードを、以下のように変更すると、

1+    reliefList = [tk.RAISED, tk.SUNKEN, tk.FLAT, tk.RIDGE, tk.GROOVE, tk.SOLID]
2+    for relief in reliefList:
3+        panedWindow = tk.PanedWindow(relief=relief, bd=20, width=100, height=100)
4+        panedWindow.pack(side=tk.LEFT)
5     panedWindow = tk.PanedWindow(self.master, showhandle=True, sashwidth=20)

以下の画像のようにpanedwindow Widgetを描画します。

cursor

cursor optionを利用すると、panedwindow Widget内へマウスカーソルを移動すると矢印の見た目を変化できます。

見た目のバリエーションについてはこちらのサイトにまとまっていますので、ご確認ください。

例えば下準備コードのpanedWindow = tk.PanedWindow(self.master, showhandle=True, sashwidth=20)箇所を、以下のように変更して、

1# 別解法 ##########################
2# panedWindow = tk.PanedWindow(self.master)
3# panedWindow.config(showhandle=True, sashwidth=20, cursor="clock") or panedWindow.configure(showhandle=True, sashwidth=20, cursor="clock")
4##################################
5panedWindow = tk.PanedWindow(self.master, showhandle=True, sashwidth=20, cursor="clock")

panedwindow Widget内へマウスカーソルを移動すると、矢印の見た目が変更します。

orient

orient optionを利用すると、さっしを動かせる方向を変更します。

設定方法としては、tk.HORIZONTAL(左右方向、デフォルト), tk.VERTICAL(上下方向)があります。

例えば下準備コードのpanedWindow = tk.PanedWindow(self.master, showhandle=True, sashwidth=20)箇所を、以下のように変更すると、

1# 別解法 ##########################
2# panedWindow = tk.PanedWindow(self.master)
3# panedWindow.config(showhandle=True, sashwidth=20, orient=tk.VERTICAL) or panedWindow.configure(showhandle=True, sashwidth=20, orient=tk.VERTICAL)
4##################################
5panedWindow = tk.PanedWindow(self.master, showhandle=True, sashwidth=20, orient=tk.VERTICAL)

以下の画像のようにpanedwindow Widgetを描画します。

sashcursor

sashcursor optionを設定すると、さっし内へマウスカーソルを移動すると矢印の見た目を変化できます。

見た目のバリエーションについてはこちらのサイトにまとまっていますので、ご確認ください。

例えば下準備コードのpanedWindow = tk.PanedWindow(self.master, showhandle=True, sashwidth=20)箇所を、以下のように変更して、

1# 別解法 ##########################
2# panedWindow = tk.PanedWindow(self.master)
3# panedWindow.config(showhandle=True, sashwidth=20, sashcursor="clock") or panedWindow.configure(showhandle=True, sashwidth=20, sashcursor="clock")
4##################################
5panedWindow = tk.PanedWindow(self.master, showhandle=True, sashwidth=20, sashcursor="clock")

さっし内へマウスカーソルを移動すると、矢印の見た目が変更します。

sashpad, sashwidth

sashpad option, sashwidth optionを利用すると、さっしの選択領域を広げられます。

例えば下準備コードのpanedWindow = tk.PanedWindow(self.master, showhandle=True, sashwidth=20)箇所を、以下のように変更すると、

1# 別解法 ##########################
2# panedWindow = tk.PanedWindow(self.master)
3# panedWindow.config(showhandle=True, sashwidth=20, sashpad=20) or panedWindow.configure(showhandle=True, sashwidth=20, sashpad=20)
4##################################
5panedWindow = tk.PanedWindow(self.master, showhandle=True, sashwidth=20, sashpad=20)

以下の画像のようにpanedwindow Widgetを描画します。

sashrelief

sashrelief optionを利用すると、さっしの枠のデザインを変更できます。

指定方法としては、

• tk.RAISED
• tk.SUNKEN
• tk.FLAT
• tk.RIDGE
• tk.GROOVE
• tk.SOLID

の6種類があります。

例えば下準備コードを、以下のように変更すると、

1+    reliefList = [tk.RAISED, tk.SUNKEN, tk.FLAT, tk.RIDGE, tk.GROOVE, tk.SOLID]
2+    for relief in reliefList:
3-    panedWindow = tk.PanedWindow(self.master, showhandle=True, sashwidth=20)
4+         panedWindow = tk.PanedWindow(self.master, showhandle=True, sashwidth=20, sashrelief=relief)
5-    label1 = tk.Label(panedWindow, width=30, background="red", text='test1')
6+         label1 = tk.Label(panedWindow, width=30, background="red", text='test1')
7-    label2 = tk.Label(panedWindow, width=30, background="blue", text='test2')
8+         label2 = tk.Label(panedWindow, width=30, background="blue", text='test2')
9-    panedWindow.add(label1)
10+         panedWindow.add(label1)
11-    panedWindow.add(label2)
12+         panedWindow.add(label2)
13-    panedWindow.pack()
14+         panedWindow.pack()

以下の画像のようにpanedwindow Widgetを描画します。

showhandle

showhandle optionを利用すると、handleを表示するかどうか変更できます。

True(handleを表示する), False(handleを表示しない、デフォルト)の値を設定します。

例えば下準備コードを実行すると、以下の画像のようにpanedwindow Widgetを描画します。

handlepad

handlepad optionを利用すると、handle位置を変更できます。

例えば下準備コードのpanedWindow = tk.PanedWindow(self.master, showhandle=True, sashwidth=20)箇所を、以下のように変更すると、

1# 別解法 ##########################
2# panedWindow = tk.PanedWindow(self.master)
3# panedWindow.config(showhandle=True, sashwidth=20, handlepad=15) or panedWindow.configure(showhandle=True, sashwidth=20, handlepad=15)
4##################################
5panedWindow = tk.PanedWindow(self.master, showhandle=True, sashwidth=20, handlepad=15)

以下の画像のようにpanedwindow Widgetを描画します。

handlesize

handlesize optionを利用すると、handleの大きさを変更します。

例えば下準備コードのpanedWindow = tk.PanedWindow(self.master, showhandle=True, sashwidth=20)箇所を、以下のように変更すると、

1# 別解法 ##########################
2# panedWindow = tk.PanedWindow(self.master)
3# panedWindow.config(showhandle=True, sashwidth=20, handlesize=50) or panedWindow.configure(showhandle=True, sashwidth=20, handlesize=50)
4##################################
5panedWindow = tk.PanedWindow(self.master, showhandle=True, sashwidth=20, handlesize=50)

以下の画像のようにpanedwindow Widgetを描画します。

panedwindowで活用される関数

panedwindowで活用される関数として、

• add
• remove, forget
• panes
• panecget
• sash_coord
• identify
• paneconfig, paneconfigure
• sash_place

の8種類存在します。順に見ていきましょう。

add

add関数を利用すると、panedwindow Widget内へ、Widget(ペイン)の追加を行います。

1# 第一引数 : Widget(ペイン)
2# 第二引数以降(任意) : option
3.add(Widget(ペイン), option1, option2, ...)

で定義されます。戻り値はありません。

例えば下準備コードのpanedWindow.add(label2)の下へ、以下のコードを追加すると、

1# panedwindow Widget(Frame)を親要素として、label Widgetを作成する。
2# width : 幅の設定
3# background : 背景色の設定
4# 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/
5# text : テキスト情報
6# Labelについて : https://kuroro.blog/python/Pj4Z7JBNRvcHZvtFqiKD/
7label3 = tk.Label(panedWindow, width=30, background="green", text='test3')
8# label Widget要素をpanedwindow Widget(Frame)へ格納。ペインとする。
9# add(Widget) : Widgetをpanedwindow Widget(Frame)へ格納する。
10panedWindow.add(label3)

以下の画像のようにlabel3のWidgetがpanedwindow Widget内へ追加されます。

addで使われるoptionの種類としては、以下のようになります。

remove, forget

remove, forget関数を利用すると、panedwindow Widget内に格納されるWidget(ペイン)の削除を行います。

1# 第一引数 : Widget(ペイン)
2.remove(Widget(ペイン)) or .forget(Widget(ペイン))

で定義されます。戻り値はありません。

例えば下準備コードのpanedWindow.add(label2)の下へ、以下のコードを追加すると

1# もしくはpanedWindow.forget(label2)
2panedWindow.remove(label2)

以下の画像のようにlabel2のWidgetが削除されます。

panes

panes関数を利用すると、panedwindow Widget内に格納されるWidget(ペイン)の一覧情報を取得します。

1# 戻り値 : Widget(ペイン)の一覧情報
2.panes()

で定義されます。戻り値として、(Widget(ペイン)1, Widget(ペイン)2, ...)が返されます。

例えば下準備コードのpanedWindow.add(label2)の下へ、以下のコードを追加すると

1print(panedWindow.panes())

以下の画像のようにlabel1, label2のWidget(ペイン)情報が取得できます。

panecget

panecget関数を利用すると、Widget(ペイン)に設定される、add関数で利用されたoption名の値を取得できます。

1# 第一引数 : Widget(ペイン)
2# 第二引数 : add関数で利用されたoption名
3# 戻り値 : optionの値
4.panecget(Widget(ペイン), option名)

で定義されます。戻り値として、optionの値が返されます。

例えば下準備コードを以下のように変更すると

1-    panedWindow.add(label2)
2+    panedWindow.add(label2, width=40)
3+    print(panedWindow.panecget(label2, 'width'))

以下の画像のようにwidth optionの値を取得できます。

sash_coord

sash_coord関数を利用すると、指定index(位置)のさっしの位置座標を取得できます。

1# 第一引数 : index(位置)
2# 戻り値 : さっしの位置座標
3.sash_coord(index(位置))

で定義されます。戻り値として、(x座標, y座標)が返されます。

さっしのindex(位置)は前(0)から順に数えます。

例えば下準備コードのpanedWindow.add(label2)の下へ、以下のコードを追加すると

1print(panedWindow.sash_coord(0))

以下の画像のように0番目のさっしの位置座標を取得します。

identify

identify関数を利用すると、(x座標, y座標)に配置される、要素情報を取得できます。

1# 第一引数 : x座標
2# 第二引数 : y座標
3# 戻り値 : 要素情報
4.identify(x座標, y座標)

で定義されます。戻り値として、(index(位置), 要素名)が返されます。

例えば下準備コードのpanedWindow.add(label2)の下へ、以下のコードを追加すると

1x, y = panedWindow.sash_coord(0)
2print(panedWindow.identify(x, y))

以下の画像のように0番目のさっし要素を取得します。

paneconfig, paneconfigure

paneconfig, paneconfigure関数を利用すると、Widget(ペイン)に設定される、add関数で利用されたoption名の詳細情報を取得できます。

1# 第一引数 : Widget(ペイン)
2# 第二引数 : add関数で利用されたoption名
3# 戻り値 : option名の詳細情報
4.paneconfig(Widget(ペイン), option名) or .paneconfigure(Widget(ペイン), option名)

で定義されます。戻り値として、option名の詳細情報が返されます。

例えば下準備コードを以下のように変更すると

1-    panedWindow.add(label2)
2+    panedWindow.add(label2, width=40)
3+    print(panedWindow.paneconfig(label2, 'width'))

以下の画像のようにwidth optionの詳細情報を取得できます。

sash_place

sash_place関数を利用すると、指定index(位置)のさっしを、(x座標, y座標)位置へ移動します。

1# 第一引数 : index(位置)
2# 第二引数 : x座標
3# 第三引数 : y座標
4.sash_place(index(位置), x座標, y座標)

で定義されます。戻り値はありません。

例えば下準備コードのpanedWindow.add(label2)の下へ、以下のコードを追加すると

1panedWindow.sash_place(0, 10, 10)

以下の画像のようにさっしの位置を移動します。

まとめ

• Tkinterの構成要素として、Window, Frame, Widgetの概念が存在する。
• Tkinterで利用されるpanedwindowとは、Widgetの一種で、1つ以上のWidgetを取りまとめつつ、自由にWidgetの大きさを変更できるもの = Frameを意味します。
• panedwindowで囲まれるWidgetのことをペインと呼ぶ。

参考文献

• Tkinterのpanedwindowに関するサンプルコード
• マウスカーソルとは?
• マウスカーソルに関する見た目のバリエーション情報