frame,tkinterでのコントロール配置及び設定が不明です

Question

前提・実現したいこと

pythonの初心者です。
tkinterでメニュー画面を作っています。
アップimageよりblueのフレームが画面高になりません
又コントロール配置がpack、gridで制御出来ていません
ご指導願います。
それと、その先ですが画面にcontrol-frameとcanvas-frameを
設けていますが、buttonのon/offでcontrol-frameの左右ｽﾗｲﾄﾞ
(視覚的スライドにｺﾝﾄﾛｰﾙﾌﾚｰﾑwidthtを縮めてゼロに、同時にcontrol-frameを広げる）
を考えていますが可能でしょうか併せてご指導ください。

下記のページから引用してます
https://daeudaeu.com/play_movie/
アップコードは関連場所のみとしています。

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

該当のソースコード

import tkinter as tk
from tkinter import ttk
import tkinter.messagebox as msgbox
from PIL import Image, ImageTk

class Model():
    def __init__(self):
        # 読み込んだフレーム
        self.frames = None

class View():
    def __init__(self, app, model):
        self.master = app
        self.model = model
        # アプリ内のウィジェットを作成
        self.create_widgets()

    # クリックされたら実行
    def btn_click(self):
        msgbox.showinfo("クリックイベント", "が入力されました。")

    def create_widgets(self):
        # キャンバスのサイズ
        canvas_width = 800
        canvas_height = 480

        # メインフレームの作成と配置
        self.main_frame = tk.Frame(self.master,bg="yellow")
        self.main_frame.pack()

        # コマンドフレームの作成と配置
        self.operation_frame = tk.Frame(self.main_frame,bg="blue")
        self.operation_frame.grid_propagate(1)
        self.operation_frame.grid(column=0, row=1)

        # 映像フレームの作成と配置
        self.canvas_frame = tk.Frame(self.main_frame)
        self.canvas_frame.grid(column=1, row=1)

        # 映像キャンバスの仕様
        self.canvas = tk.Canvas(
            self.canvas_frame,
            width=canvas_width,
            height=canvas_height,
            bg="black")
        self.canvas.pack()

        # info_Label
        la = ttk.Label(self.operation_frame,
            text="メニュー選択",
            width=10,
            font=("Meiryo UI", 12, "bold"))
        la.pack(padx=10, pady=10, side=tk.TOP)
        #la.grid( column=0, row=0, padx=50, pady=10, ipadx=0)
        #la.place(relx=0.05, rely=0.05)  # 横0.05、縦0.1の位置に配置

        # selectFile_Combobox
        List = ['all select', 'folder1', 'folder2', 'folder3']
        str = tk.StringVar()
        cmb = ttk.Combobox(
            self.operation_frame,
            values=List,
            width=10,
            font=("Meiryo UI", 12),
            textvariable=str,
            state='readonly')
        cmb.set(List[0])
        cmb.bind('<<ComboboxSelected>>',lambda e: print('str=%s' % str.get()))
        #cmb.bind('<<ComboboxSelected>>', selectFile_changed)
        #cmb.grid(row=1, column=0,  padx=5, pady=5)
        #cmb.pack(padx=20, pady=10, anchor=tk.W)
        cmb.pack(padx=20, pady=10, side=tk.TOP)

        # Order_Radiobutton
        rb1 = tk.Radiobutton(
            self.operation_frame,
            value=0,
            text="shuffle",
            width=10,
            bg="Lightblue",
            font=("Meiryo UI", "12"))
        rb1.select()
        #rb1.grid(column=0, row=2, padx=0, pady= 10, ipadx=0)
        #rb1.place(relx=0.05, rely=0.35)
        #rb1.pack(padx=20, anchor = tk.NW)
        rb1.pack(padx=20, pady=10, side=tk.TOP)

        # Order_Radiobutton
        rb2 = tk.Radiobutton(
            self.operation_frame,
            value=1,
            bg="Lightblue",
            font=("Meiryo UI", "12"),
            text="normal",
            width=10)
        rb2.deselect()
        #rb2.grid(column=0, row=3, padx=0, pady= 10, ipadx=0)
        #rb2.place(relx=0.05, rely=0.50)
        #rb2.pack(padx=20, anchor = tk.W)
        rb2.pack(padx=20, pady=10, side=tk.TOP)

        # load_button
        image1 = Image.open('./inifile/start.png')
        image1 = image1.resize(size=(46, 43))
        self.img1 = ImageTk.PhotoImage(image1)
        self.btn1 = tk.Button(
            self.operation_frame,
            image=self.img1,
            relief="flat",
            command = self.btn_click)
        #self.btn1.grid(column=0, row=4, padx=0, pady= 10, ipadx=0)
        #self.btn1.place(relx=0.05, rely=0.65)
        #self.btn1.pack(padx=20, pady=10, anchor=tk.W)
        self.btn1.pack(padx=20, pady=10, side=tk.TOP)

        # exit_button
        image2 = Image.open('./inifile/exit.png')
        image2 = image2.resize(size=(46, 43))
        self.img2 = ImageTk.PhotoImage(image2)
        self.btn2 = tk.Button(
            self.operation_frame,
            image=self.img2,
            relief="flat",
            command = self.btn_click)
        #self.btn2.grid(column=0, row=5, padx=10, pady= 10, ipadx=10)
        #self.btn2.place(relx=0.05, rely=1.80)
        self.btn2.pack(padx=20, pady=10, side=tk.TOP)

if __name__ == "__main__":
    app = tk.Tk()
    app.title("Digital Photo Slide view")
    model = Model()
    view = View(app, model)
    # controller = Controller(app, model, view)
    app.mainloop()

試したこと

補足情報（FW/ツールのバージョンなど）

--環境--
python3.8
tkinter8.6
pycharm2021.1

Answer 1

pack() の伸縮オプションは、.pack(fill=tk.BOTH, expand=tk.YES)

grid() の伸縮オプションは、

• 親ウィジェットの .grid_rowconfigure(), .grid_columnconfigure()
• grid() のオプションで、.grid(row=0, column=0, sticky=tk.NSEW)

　NSEW: 全方向、NS: 縦、EW: 横

grid の configure で伸縮可能な領域と、
sticky で、実際に伸縮する際の方向を指定します。

---

blueのフレームが画面高になりません

-       self.operation_frame.grid(column=0, row=1)
+       self.operation_frame.grid(column=0, row=1, sticky=tk.NS)

コントロール配置がpack、gridで制御出来ていません

ここは完成形がどのようなイメージなのか解らないので、
制御できていないというのは、具体的にどの部分を指してるのでしょうか？

control-frameの左右ｽﾗｲﾄﾞ

(視覚的スライドにｺﾝﾄﾛｰﾙﾌﾚｰﾑwidthtを縮めてゼロに、同時にcontrol-frameを広げる）
を考えていますが可能でしょうか

やりたいことは可能ですが、実装方法は検討が必要で、
「pack()/grid() を使う場合の width 」は、自動的に計算される値な為、直接指定しても効果はありません。

• grid() では、width の代わりに、grid_columnconfigure の minsize で変更できます。
• grid_forget() で、レイアウトを解除し、非表示にすることが可能です。

　再計算が必要なので、親クラスの grid_propagate(0)

• lift(), lower() で、レイヤーの様に他のウィジェットで覆いかぶせる方法もあります。
• 任意の width を直接指定したい場合は、place() で配置することになります。

---

メニューフレーム表示非表示のサンプル

from types import SimpleNamespace
import tkinter as tk


def create_view(root):
    menu_frame = tk.Frame(root, width=200, bg="blue")
    main_frame = tk.Frame(root, width=400, bg="black")

    exit_button = tk.Button(menu_frame, text="Exit")
    exit_button.pack()
    hide_button = tk.Button(menu_frame, text="Hide")
    hide_button.pack()
    show_button = tk.Button(main_frame, text="Show")
    # show_button.pack()

    menu_frame.grid(row=0, column=0, sticky=tk.NSEW)
    main_frame.grid(row=0, column=1, sticky=tk.NSEW)

    root.grid_propagate(tk.NO)
    root.grid_rowconfigure(0, weight=1)
    root.grid_columnconfigure(0, minsize=200)
    root.grid_columnconfigure(1, weight=1)

    return SimpleNamespace(**locals())


def main():
    root = tk.Tk()
    root.geometry("600x600")
    view = create_view(root)

    def show_animation(maxsize=200):
        def animation(value):
            value = min(value, maxsize)
            root.grid_columnconfigure(0, minsize=value)
            if value < maxsize:
                root.after(20, animation, value+20)

        view.show_button.pack_forget()
        view.menu_frame.grid(row=0, column=0, sticky=tk.NSEW)

        root.after_idle(animation, 10)

    def hide_animation(value=200):
        def animation(value):
            value = max(0, value-20)
            root.grid_columnconfigure(0, minsize=value)
            if value > 0:
                root.after(20, animation, value)
            else:
                view.root.grid_propagate(False)
                view.menu_frame.grid_forget()
                view.show_button.pack()
        root.after_idle(animation, value)

    def toggle_menu(e):
        is_shown = root.grid_columnconfigure(0)["minsize"]
        if is_shown:
            hide_animation()
        else:
            show_animation()

    root.bind_all("<F4>", toggle_menu)
    view.exit_button.config(command=root.quit)
    view.hide_button.config(command=hide_animation)
    view.show_button.config(command=show_animation)

    root.mainloop()


if __name__ == '__main__':
    main()

Comments

[shin0859]

teamikl様
早々のコメント有難うございます。
self.operation_frame.grid(column=0, row=1, sticky=tk.NS)　だけでも
凄くうれしく思います。
メニューフレーム表示非表示のサンプル のコードは内容が重すぎて、
しばらく理解に時間が掛かりそうです。
まずは、コントロールの配置を考えて行きたいと思います。
大変貴重なコード提示及びアドバイスに感謝いたします。
もうしばらく、開けておきます。

[shin0859]

その後ですが
メニューフレーム表示非表示のサンプル のコードは自分の希望そのものでした。凄い！
中身のコード理解は、う～ムですが、理解に努力したいと思います。

あと思ったのですが、pythonにはコントロールアニメーションに特化したプラグインは
無いのでしょうか？　ネット上に見当たらなかったので...　
例えばjQueryやハンバーガーメニュー等
全部自前のコードで処理するのでしょうか
どなたかご存知でしたら、お知らせください

自分の希望する回答が得られましたので、解決といたします
teamikl様　有難うございました
もうしばらく、開けておきます。

[teamikl]

grid() での配置の場合、
「中に配置されたウィジェットのwidth」 と「grid のセルの width」があり、
質問のコードの場合は、ウィジェットのwidth ではなく、後者を変更する必要があります。
（結果的に、ウィジェットのwidth が狭まりますが、
直接 width を指定することは出来ないという意図の説明です）

- after() は、指定ミリ秒後に関数を実行するタイマー関数です。
- 横幅の値を小さくしながら animation() を呼んでいます。
　grid_columnconfigure で minsize を時間経過で徐々に小さくする
- 最後(minsize==0)まで到達すると、grid_forget で非表示にする。

>pythonにはコントロールアニメーションに特化したプラグインは
無いのでしょうか？

この場合は、tcl/tk や tkinter 関連のライブラリを探す事になりますが、
自分の知る限りですが、無さそうですね。
あったとしてもユーザ規模自体が他と比べて薄く、
保守されてるかどうかが不安材料です。

tkinter 以外であれば、pythonでの選択肢は
- PyQt / PySide の QML
- cefpython や webview 等のブラウザ組込 (HTML5でUIを開発できるので jquery 等が使える)

tkinter では、 tcl/tk の次期バージョンで svg サポートが予定されてるので、
将来的には svg animation を期待できるかなといったところですが、
現状ではタイマー(after()関数)を使い独自に実装するしかなさそうです。

[teamikl]

jquery っぽいアニメーションのデモ
https://replit.com/@MiKLTea/TkAnimation#main.py

place() での移動・リサイズとメソッドチェイン迄実装してみたけど、
CSS みたいに統一されたプロパティーの規格がないのが難点。

# コード例
label.animate({"x": 40, "y": 100, "width": 400} # リサイズしながら移動
　　).animate({"y": 400}, 1500) # その後、1.5秒で y軸400まで移動

キャンバス内でのFade In/Out アニメーション
https://replit.com/@MiKLTea/tkAsyncGame#main.py

[shin0859]

teamikl様
度重なるコメント有難うございます
コメント内容が、自分知識のずうーと先なので、消化不良状態です
時間を掛けて見ていきたい思います。
又　現時点でのpythonが知れて、為になりました。
もう自分への回答は十分頂きましたので、解決といたします。
teamikl様　有難うございました