質問編集履歴
3
解決コードの添付
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
[Tkinter]Notebookのタブに実装した×ボタンのデザインをカーソルを合わせた時に変更したい
|
|
1
|
+
かいけつ[Tkinter]Notebookのタブに実装した×ボタンのデザインをカーソルを合わせた時に変更したい
|
body
CHANGED
|
@@ -114,8 +114,121 @@
|
|
|
114
114
|
|
|
115
115
|
そもそもStyleよりもthemeを使うべきなのかな？とか調べていて思ったりしたのですが何かヒントをいただけるとありがたいです。
|
|
116
116
|
|
|
117
|
-
### 追記 2021/10/24
|
|
117
|
+
### 追記 2021/10/24 01:14
|
|
118
118
|
実装したい細かいこと
|
|
119
119
|
0. カーソルを×ボタンに合わせると黄色い×になる。
|
|
120
120
|
1. カーソルを×ボタンに合わせながらクリックすると赤いボタンになる。
|
|
121
|
-
2. 通常時は黒い×である。
|
|
121
|
+
2. 通常時は黒い×である。
|
|
122
|
+
|
|
123
|
+
### 追記(解決コード)
|
|
124
|
+
一部変更点ありますが，以下のコードで実装出来ました！
|
|
125
|
+
```py
|
|
126
|
+
class CustomNotebook(ttk.Notebook):
|
|
127
|
+
"""A ttk Notebook with close buttons on each tab"""
|
|
128
|
+
|
|
129
|
+
__initialized = False
|
|
130
|
+
|
|
131
|
+
def __init__(self, *args, **kwargs):
|
|
132
|
+
if not self.__initialized:
|
|
133
|
+
self.__initialize_custom_style()
|
|
134
|
+
self.__inititialized = True
|
|
135
|
+
|
|
136
|
+
kwargs["style"] = "CustomNotebook"
|
|
137
|
+
ttk.Notebook.__init__(self, *args, **kwargs)
|
|
138
|
+
|
|
139
|
+
self._active = None
|
|
140
|
+
|
|
141
|
+
self.bind("<ButtonPress-1>", self.on_close_press, True)
|
|
142
|
+
self.bind("<ButtonRelease-1>", self.on_close_release)
|
|
143
|
+
self.bind("<Motion>", self.on_close_motion)
|
|
144
|
+
|
|
145
|
+
def on_close_motion(self, event):
|
|
146
|
+
element = self.identify(event.x, event.y)
|
|
147
|
+
if "close" in element:
|
|
148
|
+
self.state(['!pressed'])
|
|
149
|
+
self.state(['hover'])
|
|
150
|
+
else:
|
|
151
|
+
self.state(['!pressed'])
|
|
152
|
+
self.state(['!hover'])
|
|
153
|
+
|
|
154
|
+
def on_close_press(self, event):
|
|
155
|
+
"""Called when the button is pressed over the close button"""
|
|
156
|
+
|
|
157
|
+
element = self.identify(event.x, event.y)
|
|
158
|
+
|
|
159
|
+
if "close" in element:
|
|
160
|
+
index = self.index("@%d,%d" % (event.x, event.y))
|
|
161
|
+
self.state(['pressed'])
|
|
162
|
+
self.state(['hover'])
|
|
163
|
+
self._active = index
|
|
164
|
+
return "break"
|
|
165
|
+
|
|
166
|
+
def on_close_release(self, event):
|
|
167
|
+
"""Called when the button is released"""
|
|
168
|
+
if not self.instate(['pressed']) and not self.instate(['hover']):
|
|
169
|
+
print("bbb")
|
|
170
|
+
return
|
|
171
|
+
|
|
172
|
+
element = self.identify(event.x, event.y)
|
|
173
|
+
if "close" not in element:
|
|
174
|
+
# user moved the mouse off of the close button
|
|
175
|
+
self.state(['!pressed'])
|
|
176
|
+
self.state(['!hover'])
|
|
177
|
+
print("aaa")
|
|
178
|
+
return
|
|
179
|
+
|
|
180
|
+
index = self.index("@%d,%d" % (event.x, event.y))
|
|
181
|
+
|
|
182
|
+
if self._active == index:
|
|
183
|
+
close_file(index)
|
|
184
|
+
|
|
185
|
+
self.state(["!pressed"])
|
|
186
|
+
self.state(['!hover'])
|
|
187
|
+
self._active = None
|
|
188
|
+
|
|
189
|
+
def __initialize_custom_style(self):
|
|
190
|
+
img_close = image_file_to_base64(settings.resource_path("icon/tab/closeTabButton.gif"))
|
|
191
|
+
img_closehover = image_file_to_base64(settings.resource_path("icon/tab/closeTabButton_hover.gif"))
|
|
192
|
+
img_closepressed = image_file_to_base64(settings.resource_path("icon/tab/closeTabButton_push.gif"))
|
|
193
|
+
img_closeintact = image_file_to_base64(settings.resource_path("icon/tab/closeTabButton_inact.gif"))
|
|
194
|
+
|
|
195
|
+
style = ttk.Style()
|
|
196
|
+
self.images = (
|
|
197
|
+
#
|
|
198
|
+
tk.PhotoImage("img_close", data=img_close),
|
|
199
|
+
tk.PhotoImage("img_closehover", data=img_closehover),
|
|
200
|
+
tk.PhotoImage("img_closepressed", data=img_closepressed),
|
|
201
|
+
tk.PhotoImage("img_closeintact", data=img_closeintact)
|
|
202
|
+
)
|
|
203
|
+
|
|
204
|
+
style.element_create(
|
|
205
|
+
"close", "image", "img_close",
|
|
206
|
+
("!active", "!selected", "img_closeintact"),
|
|
207
|
+
("active", "!pressed", "hover", "!disabled", "img_closehover"),
|
|
208
|
+
("active", "pressed", "hover", "!disabled", "img_closepressed"),
|
|
209
|
+
("active", "!pressed", "!hover", "!disabled", "img_close"),
|
|
210
|
+
border=8, sticky=''
|
|
211
|
+
)
|
|
212
|
+
style.layout("CustomNotebook", [("CustomNotebook.client", {"sticky": "nswe"})])
|
|
213
|
+
style.layout("CustomNotebook.Tab", [
|
|
214
|
+
("CustomNotebook.tab", {
|
|
215
|
+
"sticky": "nswe",
|
|
216
|
+
"children": [
|
|
217
|
+
("CustomNotebook.padding", {
|
|
218
|
+
"side": "top",
|
|
219
|
+
"sticky": "nswe",
|
|
220
|
+
"children": [
|
|
221
|
+
("CustomNotebook.focus", {
|
|
222
|
+
"side": "top",
|
|
223
|
+
"sticky": "nswe",
|
|
224
|
+
"children": [
|
|
225
|
+
("CustomNotebook.label", {"side": "left", "sticky": ''}),
|
|
226
|
+
("CustomNotebook.close", {"side": "left", "sticky": ''}),
|
|
227
|
+
]
|
|
228
|
+
})
|
|
229
|
+
]
|
|
230
|
+
})
|
|
231
|
+
]
|
|
232
|
+
})
|
|
233
|
+
])
|
|
234
|
+
```
|
2
細かい実装したいことを追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -112,4 +112,10 @@
|
|
|
112
112
|
|
|
113
113
|
確かに`CustomNotebook.focus`の子要素に`style.element_create`で追加した`close`を`"active", "!disabled", "img_closeactive"`とNotebookのStateでデザインを変えているのは理解できてはいるのですが，×ボタンにカーソルを合わせたらデザインが変えるようにするためにはどのような方法があるのかがわかりませんでした。
|
|
114
114
|
|
|
115
|
-
そもそもStyleよりもthemeを使うべきなのかな？とか調べていて思ったりしたのですが何かヒントをいただけるとありがたいです。
|
|
115
|
+
そもそもStyleよりもthemeを使うべきなのかな？とか調べていて思ったりしたのですが何かヒントをいただけるとありがたいです。
|
|
116
|
+
|
|
117
|
+
### 追記 2021/10/24
|
|
118
|
+
実装したい細かいこと
|
|
119
|
+
0. カーソルを×ボタンに合わせると黄色い×になる。
|
|
120
|
+
1. カーソルを×ボタンに合わせながらクリックすると赤いボタンになる。
|
|
121
|
+
2. 通常時は黒い×である。
|
1
質問の内容を忘れていた
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -110,4 +110,6 @@
|
|
|
110
110
|
```
|
|
111
111
|
import部分がそのままだと動かないためそこだけ編集しましたがそれ以外はそのままで動かしたところ×ボタンにカーソルを合わせたらデザインが変わるのではなく，タブにカーソルを合わしたらデザインが変わるようなものでした。
|
|
112
112
|
|
|
113
|
-
確かに`CustomNotebook.focus`の子要素に`style.element_create`で追加した`close`を`"active", "!disabled", "img_closeactive"`とNotebookのStateでデザインを変えているのは理解できてはいるのですが，×ボタンにカーソルを合わせたらデザインが変えるようにするためにはどのような方法があるのかがわかりませんでした。
|
|
113
|
+
確かに`CustomNotebook.focus`の子要素に`style.element_create`で追加した`close`を`"active", "!disabled", "img_closeactive"`とNotebookのStateでデザインを変えているのは理解できてはいるのですが，×ボタンにカーソルを合わせたらデザインが変えるようにするためにはどのような方法があるのかがわかりませんでした。
|
|
114
|
+
|
|
115
|
+
そもそもStyleよりもthemeを使うべきなのかな？とか調べていて思ったりしたのですが何かヒントをいただけるとありがたいです。
|