PyrhonのTkinterをつかってグラフを画面の真ん中に表示させたい

Question

前提・実現したいこと

PyrhonのTkinterをつかってグラフを画面の真ん中に表示させたい。

発生している問題・エラーメッセージ

.grid()を使って"frame"の中心に"LabelFrame(border)"を表示させようと思っています。
ここで、tk.LabelFrameの親ウィジットに"frame"を指定するとなぜかLabelFrameが左上に配置され、anchorなどを指定しても位置が変わりませんでした。また、frameが消えてしまいました。

左上に表示される

import tkinter as tk

# 1. メインウィンドウの作成
root = tk.Tk()
root.title("Application")
root.resizable(width=False,height=False) #ウィンドウ幅の固定
root.geometry("700x500")

#=== オプション：フレームをつくる
frame = tk.Frame(root, width=700, height=300, bg="#000080")
frame.grid(column=0, row=0)

#=== オプション：ラベルフレームウィジットをつくる
border = tk.LabelFrame(frame, text="Form", fg='white', bg='#444', relief=tk.FLAT)
border.grid(column=0, row=0)
innerBox = tk.Frame(border, width=300, height=100)
innerBox.grid()

root.mainloop()

一方、親ウィジットをrootとするとframe内の真ん中に表示されました。

中央に表示される

import tkinter as tk

# 1. メインウィンドウの作成
root = tk.Tk()
root.title("Application")
root.resizable(width=False,height=False) #ウィンドウ幅の固定
root.geometry("700x500")

#=== オプション：フレームをつくる
frame = tk.Frame(root, width=700, height=300, bg="#000080")
frame.grid(column=0, row=0)

#=== オプション：ラベルフレームウィジットをつくる
border = tk.LabelFrame(root, text="Form", fg='white', bg='#444', relief=tk.FLAT)
border.grid(column=0, row=0)
innerBox = tk.Frame(border, width=300, height=100)
innerBox.grid()

root.mainloop()

frameの中央に配置したい場合、.gridの指定の仕方として、親ウィジットにframeを指定するのが正しい認識ですが、なぜこれだと真ん中に表示されず、rootだと画面の真ん中ではなくframeの真ん中に表示されるのでしょうか？

該当のソースコード

border = tk.LabelFrame(frame, text="Form", fg='white', bg='#444', relief=tk.FLAT)

Comments

[退会済みユーザー]

「左上に表示される」というほうのコード、`frame = tk.Frame(frame, ...` と `border = tk.LabelFrame(root, ...` の部分を質問に提示するコードとして書き間違えていないかご確認頂けますか。前者は `frame` の親に `frame` を設定しようとするのはおかしいですし、後者は後述の「該当のソースコード」で提示している問題点と合致しません。

[lteru]

コードを簡素化した際に書き違えてました。ご指摘ありがとうございます。

Answer 1

gridを中央に表示するには、grid()で配置する要素の親要素にgrid_anchor(tkinter.CENTER)を使います。

import tkinter as tk

root = tk.Tk()

# gridを中央に寄せる
root.grid_anchor(tk.CENTER)

frame = tk.Frame(root)
frame.grid() # 親要素rootのgrid(row=0, column=0)に配置

イメージとしては、親要素がgridという要素を持っていて、その中にframeやborderを配置するイメージです。
そして、そのgrid自体の配置場所を中央にするメソッドがgrid_anchor()です。

grid()のanchor引数は「gridセル内のどこに要素を配置するか」を決めるものなので、子要素が1つしか無くgrid自体を中央に持ってきたい今回の場合は指定しても見た目の変化がありません。

ご質問のコードでは一つの要素が一つの子要素を持つので、rootにgrid_anchor(tkinter.CENTER)を設定すればあとは設定しなくてもよいでしょう。

なお、root.geometry('700 x 500')はエラーが出るので、修正しました。

import tkinter as tk

root = tk.Tk()
root.title("Application")
root.resizable(width=False,height=False)
root.geometry('700x500')

# gridを中央に配置
root.grid_anchor(tk.CENTER)

frame = tk.Frame(root, width=700, height=300, bg="red")
frame.grid()

border = tk.LabelFrame(frame, text="Form", fg='white', bg='#444', relief=tk.FLAT)
border.grid()
innerBox = tk.Frame(border, width=300, height=100)
innerBox.grid()

root.mainloop()

ではなぜ質問にあるような状態になったのでしょうか。
それぞれどうなっているのかを確認してみましょう。

まずご質問にある1つ目のコードです。

import tkinter as tk

# 1. メインウィンドウの作成
root = tk.Tk()
root.title("Application")
root.resizable(width=False,height=False)
root.geometry('700x500')

frame = tk.Frame(root, width=700, height=300, bg="red")
frame.grid()    # これはrootのgrid(row=0, column=0)に配置される

border = tk.LabelFrame(frame, text="Form", fg='white', bg='#444', relief=tk.FLAT)
border.grid()   # これはframeのgrid(row=0, column=0)に配置される
innerBox = tk.Frame(border, width=300, height=100)
innerBox.grid() # これはborderのgrid(row=0, column=0)に配置される

root.mainloop()

このコードではrootにframeをgridで配置し、frame内にborderをgridで配置しています。
このときrootのgridは上部に表示され、gridのサイズは子要素に合わせられます。
これはframeのgridも同様です。

すると、borderはframeのgrid内の上部、frameのgridはframe内の上部、frameはroot内のgridの上部、そしてrootのgridはrootの上部、といった配置になり、それぞれのgridのサイズは子要素に合わせられますので、結果的にborderが左上に配置されたように見えます。

一方、ご質問の2つ目のコードではframeとborderがrootにgridで配置されています。
border.grid()と「どのセルに配置するか」を指定していませんので、frameの下のセルに追加されることに注意です。

import tkinter as tk

root = tk.Tk()
root.title("Application")
root.resizable(width=False,height=False)
root.geometry('700x500')

frame = tk.Frame(root, width=700, height=300, bg="#000080")
frame.grid()    # これはrootのgrid(row=0, column=0)に配置される

border = tk.LabelFrame(root, text="Form", fg='white', bg='#444', relief=tk.FLAT)
border.grid()   # これはrootのgrid(row=1, column=0)に配置される
innerBox = tk.Frame(border, width=300, height=100)
innerBox.grid() # これはborderのgrid(row=0, column=0)に配置される

root.mainloop()

rootのgridはrootの上部に表示され、その内部にframeとborderが縦に配置されます。
このときgridのセルの大きさは一番大きいセルに合わせられますのでframeの大きさになります。
結果、borderの左右と下に隙間ができ、中央に表示されたように見えるのです。

回答のコードではrootのgridを中央に配置しています。
その結果、borderはframeのgridの上部、frameのgridはframeの上部、frameはrootのgridの上部、rootのgridはrootの中央部に表示され、それぞれgridのサイズは子要素のサイズに合わせられますのでborderが中央に表示されたように見えるのです。

以上、一部わかりにくかったかもしれませんが、お役に立てれば幸いです。

Comments

[lteru]

わかりやすい説明ありがとうございます。
質問が言葉足らずでしたが、boderを配置したいのはrootではなくframeの中央でした。
また、frameの大きさは固定する想定でした。
ただ、教えていただいた
frame.grid_anchor(tk.CENTER)とフレームを固定するframe.grid_propagate(0) でいけました！
ありがとうございます。

```Python
import tkinter as tk

root = tk.Tk()
root.title("Application")
root.resizable(width=False,height=False)
root.geometry('700x500')

frame = tk.Frame(root, width=700, height=300, bg="red")
frame.grid()
frame.grid_propagate(0) # フレーム幅の固定
frame.grid_anchor(tk.CENTER)

border = tk.LabelFrame(frame, text="Form", fg='white', bg='#444', relief=tk.FLAT)
border.grid(row = 0)

innerBox = tk.Frame(border, width=300, height=100)
innerBox.grid()

root.mainloop()
```