KURORO BLOGのロゴ

このエントリーをはてなブックマークに追加
Tkinterで使うpanedwindowとは?活用方法から各種用語に関して解説

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

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

目次
  1. そもそもTkinterで利用されるpanedwindowとは?
    1. Tkinterの構成要素
  2. panedwindow Widgetとframe Widgetの違い
  3. 下準備
  4. Tkinterで活用されるpanedwindow Widgetの定義
    1. background, bg
    2. borderwidth, bd
    3. width, height
    4. relief
    5. cursor
    6. orient
    7. sashcursor
    8. sashpad, sashwidth
    9. sashrelief
    10. showhandle
    11. handlepad
    12. handlesize
  5. panedwindowで活用される関数
    1. add
    2. remove, forget
    3. panes
    4. panecget
    5. sash_coord
    6. identify
    7. paneconfig, paneconfigure
    8. sash_place
  6. まとめ
  7. 参考文献
目次を開く⬇︎

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

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

別名panedwindow Widgetと呼ばれます。

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

Tkinterの構成要素

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

名称説明文
Window  画像のオレンジ色枠の部分になります。Tkinter画面全体を表します。
Frame画像内の水色枠部分になります。Widgetが1つ以上ある場合に、取りまとめるものです。
Widget紫色枠で囲まれる部分になります。1つの機能を持つ最小単位 = 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の種類としては、以下のようになります。

option名説明文用例
after           afterで指定されるWidgetの後ろに、第一引数で指定するWidgetを追加する。panedWindow.add(label3, after=label1)
beforebeforeで指定されるWidgetの前に、第一引数で指定するWidgetを追加する。panedWindow.add(label3, before=label2)
height追加するWidgetの高さを設定する。panedWindow.add(label3, height=50)
width追加するWidgetの幅を設定する。panedWindow.add(label3, width=50)
hideTrue, Falseで指定。デフォルトはFalse。Trueを指定すると、追加するWidgetを表示しない。Falseを指定すると、追加するWidgetを表示する。panedWindow.add(label3, hide=True)
minsize追加するWidgetの最小幅(さっしを動かした場合に残るWidgetの幅)を設定する。panedWindow.add(label3, minsize=200)
padx追加するWidgetの左右外側へ空白幅を設定する。panedWindow.add(label3, padx=10)
pady追加するWidgetの上下外側へ空白幅を設定する。panedWindow.add(label3, pady=10)

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のことをペインと呼ぶ。

参考文献