【tkinter】アプリ起動時、スクロールバー上下端の△▽が表示されない【Python】

Question

実現したいこと

現在独学でGUI開発をしています。

tkinterでスクロールバーを実装したのですが、下図のようにはじめはスクロールバー上下端の△▽が表示されておらず、
スクロールバーをクリックすると、△▽が現れます。

使用感に変わりはなく、ただGUIのデザイン的に気に入らないだけなのですが、もやもやしております。
app.mainloop()した時点で、△▽を表示させる方法はありますか？

該当のソースコード

import tkinter as tk
app = tk.Tk()

can = tk.Canvas(app, highlightthickness=0)

ybar = tk.Scrollbar(app, orient=tk.VERTICAL, command=can.yview, takefocus=0)
ybar.pack(side=tk.RIGHT, fill=tk.Y)
can.configure(yscrollcommand=ybar.set)

can.pack(side=tk.LEFT, fill=tk.BOTH)

fra = tk.Frame(can, height=50)
can.create_window((0, 0), window=fra, anchor=tk.NW, width=can.cget('width'))

texs = []
for i in range(20):
    tex = tk.Entry(fra, width=50)
    texs.append(tex)
    texs[i].insert(0, str(i))
    texs[i].pack(pady=5)

app.update_idletasks()
x = (texs[i].winfo_height()+10)*20
can.config(scrollregion=(0, 0, 100, x))
can.config(height=150)

app.mainloop()

試したこと（ttk.Scrollbar）

（A)スクロールバーをtk→ttkに変更しました。
下図のように指定しても背景色、スクロールバー横幅は変わらず、
またウィジェット上にマウスカーソルがあるときのみ△▽が表示されます。

また、layout内にfocusに関する項目は見当たりません。

ybar = ttk.Scrollbar(app, orient=tk.VERTICAL, command=can.yview)
style = ttk.Style()
style.configure("c.Vertical.TScrollbar", background="steelblue", arrowsize=50)
ybar.configure(style="c.Vertical.TScrollbar")

pprint(style.layout("c.Vertical.TScrollbar"))
>[('Vertical.Scrollbar.trough',
  {'children': [('Vertical.Scrollbar.uparrow', {'side': 'top', 'sticky': ''}),
                ('Vertical.Scrollbar.downarrow',
                 {'side': 'bottom', 'sticky': ''}),
                ('Vertical.Scrollbar.thumb',
                 {'expand': '1', 'sticky': 'nswe'})],
   'sticky': 'ns'})]

（B)テーマを指定
テーマをdefaultに変更しました。外観が変わって△▽が表示されました。
が、その他の指定項目に変化はありません。

style.theme_use("default")

ttk.Scrollbarの問題としては、以下が個人的なネックです。
◆タッチパッドでのスクロールに対応していない
→下記コードで、Entryにマウススクロールをbindすることで実装（なぜかEntryウィジェットの上以外でもマウススクロール関数が呼び出される）

◆色や横幅などを指定しても変更できない。
→デフォルトのstyleのthemeはvistaで、winnativeに変えることで好みの外観に変更（色や横幅などの情報は相変わらず変更できない）

（◆style.layoutに、focusに関する項目がない。常に△▽を表示するには、用意されたテーマを使用する必要がある）

# マウススクロール関数
def MouseScroll(event):
    can.yview("scroll", int(-1*(event.delta/120)), "units")

# ループ中にマウススクロール関数を各ウィジェットにbind
tex[i].bind_all("<MouseWheel>", MouseScroll)

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

Windows11
Python 3.9.7
tk 8.6.11

Answer 1

同環境にて、上記のコードで問題の現象は発生しませんでした。

対処法としては、scrollregion による設定値を見直してみてください。
固定値を加算してる辺りが環境に依存している可能性があります。
変数 x の値(※ scrollregion のy軸高さ height 指定) を小さくすると、発生しました。

高さの算出を、実際のフレームの高さ fra.winfo_reqheight() にしてみてはどうでしょう。
訂正: 自分の環境では 変数xの値と一致しました。問題の解決策としては、scrollregionのheight値の調整で出来るはずです。

---

win10/py3.9で実行。スクロールバーの外観が異なります。

Comments

[netz-eng]

同環境でご確認くださり、ありがとうございます。

scrollregionのy軸高さを、キャンバスに表示しているフレーム高さ以下に設定すると△▽が表示されましたが、
それでは結局スクロールバーが下まで移動しません。
上記コードxの値までスクロールすることと、△▽をアプリ起動状態で表示することはトレードオフなのでしょうか？
※問題解決しておりませんが、誤操作でBAボタン押してしまいました。

[teamikl]

現象が再現・確認出来ないので、推測になりますが

「フレーム高さ以下に設定すると△▽が表示」は逆ではないですか？
scrollregion(スクロール可能範囲)の値の方が大きくなるはずなので、
もし、scrollregionの方が小さい時しか矢印が表示されないとすれば、別問題の可能性があります。
あと気になる点は、スクロールバーの外観が自分の環境とは異なる、くらいかな、

> 上記コードxの値までスクロールすることと、△▽をアプリ起動状態で表示することはトレードオフなのでしょうか？

その様なことはないはずです。

[teamikl]

参考に、外部ライブラリの scrolledframe 実装
https://github.com/TkinterEP/ttkwidgets/blob/master/ttkwidgets/frames/scrolledframe.py
scrollregion 計算等の該当箇所は、__configure_interior メソッド辺り。

[netz-eng]

>もし、scrollregionの方が小さい時しか矢印が表示されないとすれば、別問題の可能性があります。
現状、テキストボックス全てを含んだフレーム高さが580で、
アプリに表示しているキャンバス高さが150に設定してあります。

質問文内scrollregionのxの値を、150以下にしないと初期△▽が表示されません。（151以上はダメでした）
他、いろいろ試してみるとbackgroundやreliefなど、見た目に関するオプションを指定しても反映されない不具合が生じています。widthは問題なく指定できました。

既にいろいろとお考えいただいたとは思いますが、
何か解決に向けたお知恵などありますでしょうか？

[teamikl]

私の環境では、「150以下にしないと表示されない」というのが再現出来ないので、
問題解決の為には原因の特定が先に必要です。

実行環境で何か特別な設定をしていたりすることはありませんか？
こちらの環境ではスクロールバーの外観が違ってました。
またxの値に関わらず、矢印自体は表示されます。
回答内に質問のコードをwi10/py3.9で実行した画像を添付します。

- ライブラリを使って実装してみる
　 → 同じ現象が発生する場合は、コードではなく環境問題の可能性有
- pywinauto 等で開始時にスクロールバーをクリック (回避策)

[netz-eng]

ご返信ありがとうございます。
いま、質問文のバージョン情報が誤っていることに気づきました。
　Win10　→　Win11　に訂正いたします。
誤った情報でお手間をとらせてしまい、申し訳ありません。

もしかすると、Windowsバージョン原因が異なることが原因かもしれません。
ご提案いただいた中ではpywinautoを用いる方法が、ひと手間必要ですが現実的な策に感じます。

[teamikl]

すみません、こちらもバージョン情報が正確ではありませんでした。
tk ライブラリのパッチレベルの違いにより、外観は異なるようです。tk　8.6.9 と 8.6.12 で確認。
但し、問題の現象はwin10では確認できずなので、
ライブラリ上流(tcl/tk のwin11対応状況) 側の可能性もありますね。

他の案:
デフォルトテーマの外観の問題だとすると、tkinter.Scrollbar の代わりに tkinter.ttk.Scrollbar を使い、
ttk.Style で別テーマを試してみる等はどうでしょう。

[teamikl]

クリックの代案をもうひとつ。動作検証は出来てませんが、クリックした時に呼び出される
キャンバスやスクロールバーのメソッドを明示的に呼び出してみる。

mainloop呼び出し前に

app.after_idle(can.yview_moveto, 0.0)
もしくは
app.after_idle(vbar.set, 0.0)

[netz-eng]

なるほど、tkのバージョンで外観は異なるのですね。

>但し、問題の現象はwin10では確認できずなので、
>ライブラリ上流(tcl/tk のwin11対応状況) 側の可能性もありますね。
お話を伺っていて、自分もそこに原因があるように感じています。

>app.after_idle(can.yview_moveto, 0.0)
>もしくは
>app.after_idle(vbar.set, 0.0)
そのままではエラーが出たため、app.after_idle(vbar.set, 0.0)　→　app.after_idle(ybar.set, 0.0, 0.0)
としてmainloop()前に入れてみましたが、外観上の変化は見られませんでした。

ttk.Scrollbarの場合、デフォルトではマウスフォーカス時のみ△▽が表示されています。
おっしゃる通りテーマをdefautなどに指定するとデザインが変わり、△▽が表示されるようになりました。

が、ttkでは以下3点、個人的に解決したい問題が発生しています。
①スクロールバーがタッチパッドでのスクロールに対応していない（tk.Scrollbarでは対応していた。ttkではスクロールバーをクリック保持して動かさないとスクロールされない）
②pprintで確認したところ、style.layout内にfocusに関する項目が見当たらない（テーマを指定しないと△▽表示に関する問題が解消されない）
③スクロールバー横幅をarrowsize=で指定しても反映されない

質問文にも追記いたしますが、
ttk.Scrollbarの仕様に関しては、主題が異なってくるので、別に質問しようかと思っております。