質問編集履歴

3

解決コードの添付

2021/10/24 07:01

投稿

meoto2408
meoto2408

スコア52

test CHANGED
@@ -1 +1 @@
1
- [Tkinter]Notebookのタブに実装した×ボタンのデザインをカーソルを合わせた時に変更したい
1
+ かいけつ[Tkinter]Notebookのタブに実装した×ボタンのデザインをカーソルを合わせた時に変更したい
test CHANGED
@@ -230,7 +230,7 @@
230
230
 
231
231
 
232
232
 
233
- ### 追記 2021/10/24
233
+ ### 追記 2021/10/24 01:14
234
234
 
235
235
  実装したい細かいこと
236
236
 
@@ -239,3 +239,229 @@
239
239
  1. カーソルを×ボタンに合わせながらクリックすると赤いボタンになる。
240
240
 
241
241
  2. 通常時は黒い×である。
242
+
243
+
244
+
245
+ ### 追記(解決コード)
246
+
247
+ 一部変更点ありますが,以下のコードで実装出来ました!
248
+
249
+ ```py
250
+
251
+ class CustomNotebook(ttk.Notebook):
252
+
253
+ """A ttk Notebook with close buttons on each tab"""
254
+
255
+
256
+
257
+ __initialized = False
258
+
259
+
260
+
261
+ def __init__(self, *args, **kwargs):
262
+
263
+ if not self.__initialized:
264
+
265
+ self.__initialize_custom_style()
266
+
267
+ self.__inititialized = True
268
+
269
+
270
+
271
+ kwargs["style"] = "CustomNotebook"
272
+
273
+ ttk.Notebook.__init__(self, *args, **kwargs)
274
+
275
+
276
+
277
+ self._active = None
278
+
279
+
280
+
281
+ self.bind("<ButtonPress-1>", self.on_close_press, True)
282
+
283
+ self.bind("<ButtonRelease-1>", self.on_close_release)
284
+
285
+ self.bind("<Motion>", self.on_close_motion)
286
+
287
+
288
+
289
+ def on_close_motion(self, event):
290
+
291
+ element = self.identify(event.x, event.y)
292
+
293
+ if "close" in element:
294
+
295
+ self.state(['!pressed'])
296
+
297
+ self.state(['hover'])
298
+
299
+ else:
300
+
301
+ self.state(['!pressed'])
302
+
303
+ self.state(['!hover'])
304
+
305
+
306
+
307
+ def on_close_press(self, event):
308
+
309
+ """Called when the button is pressed over the close button"""
310
+
311
+
312
+
313
+ element = self.identify(event.x, event.y)
314
+
315
+
316
+
317
+ if "close" in element:
318
+
319
+ index = self.index("@%d,%d" % (event.x, event.y))
320
+
321
+ self.state(['pressed'])
322
+
323
+ self.state(['hover'])
324
+
325
+ self._active = index
326
+
327
+ return "break"
328
+
329
+
330
+
331
+ def on_close_release(self, event):
332
+
333
+ """Called when the button is released"""
334
+
335
+ if not self.instate(['pressed']) and not self.instate(['hover']):
336
+
337
+ print("bbb")
338
+
339
+ return
340
+
341
+
342
+
343
+ element = self.identify(event.x, event.y)
344
+
345
+ if "close" not in element:
346
+
347
+ # user moved the mouse off of the close button
348
+
349
+ self.state(['!pressed'])
350
+
351
+ self.state(['!hover'])
352
+
353
+ print("aaa")
354
+
355
+ return
356
+
357
+
358
+
359
+ index = self.index("@%d,%d" % (event.x, event.y))
360
+
361
+
362
+
363
+ if self._active == index:
364
+
365
+ close_file(index)
366
+
367
+
368
+
369
+ self.state(["!pressed"])
370
+
371
+ self.state(['!hover'])
372
+
373
+ self._active = None
374
+
375
+
376
+
377
+ def __initialize_custom_style(self):
378
+
379
+ img_close = image_file_to_base64(settings.resource_path("icon/tab/closeTabButton.gif"))
380
+
381
+ img_closehover = image_file_to_base64(settings.resource_path("icon/tab/closeTabButton_hover.gif"))
382
+
383
+ img_closepressed = image_file_to_base64(settings.resource_path("icon/tab/closeTabButton_push.gif"))
384
+
385
+ img_closeintact = image_file_to_base64(settings.resource_path("icon/tab/closeTabButton_inact.gif"))
386
+
387
+
388
+
389
+ style = ttk.Style()
390
+
391
+ self.images = (
392
+
393
+ #
394
+
395
+ tk.PhotoImage("img_close", data=img_close),
396
+
397
+ tk.PhotoImage("img_closehover", data=img_closehover),
398
+
399
+ tk.PhotoImage("img_closepressed", data=img_closepressed),
400
+
401
+ tk.PhotoImage("img_closeintact", data=img_closeintact)
402
+
403
+ )
404
+
405
+
406
+
407
+ style.element_create(
408
+
409
+ "close", "image", "img_close",
410
+
411
+ ("!active", "!selected", "img_closeintact"),
412
+
413
+ ("active", "!pressed", "hover", "!disabled", "img_closehover"),
414
+
415
+ ("active", "pressed", "hover", "!disabled", "img_closepressed"),
416
+
417
+ ("active", "!pressed", "!hover", "!disabled", "img_close"),
418
+
419
+ border=8, sticky=''
420
+
421
+ )
422
+
423
+ style.layout("CustomNotebook", [("CustomNotebook.client", {"sticky": "nswe"})])
424
+
425
+ style.layout("CustomNotebook.Tab", [
426
+
427
+ ("CustomNotebook.tab", {
428
+
429
+ "sticky": "nswe",
430
+
431
+ "children": [
432
+
433
+ ("CustomNotebook.padding", {
434
+
435
+ "side": "top",
436
+
437
+ "sticky": "nswe",
438
+
439
+ "children": [
440
+
441
+ ("CustomNotebook.focus", {
442
+
443
+ "side": "top",
444
+
445
+ "sticky": "nswe",
446
+
447
+ "children": [
448
+
449
+ ("CustomNotebook.label", {"side": "left", "sticky": ''}),
450
+
451
+ ("CustomNotebook.close", {"side": "left", "sticky": ''}),
452
+
453
+ ]
454
+
455
+ })
456
+
457
+ ]
458
+
459
+ })
460
+
461
+ ]
462
+
463
+ })
464
+
465
+ ])
466
+
467
+ ```

2

細かい実装したいことを追記

2021/10/24 07:01

投稿

meoto2408
meoto2408

スコア52

test CHANGED
File without changes
test CHANGED
@@ -227,3 +227,15 @@
227
227
 
228
228
 
229
229
  そもそもStyleよりもthemeを使うべきなのかな?とか調べていて思ったりしたのですが何かヒントをいただけるとありがたいです。
230
+
231
+
232
+
233
+ ### 追記 2021/10/24
234
+
235
+ 実装したい細かいこと
236
+
237
+ 0. カーソルを×ボタンに合わせると黄色い×になる。
238
+
239
+ 1. カーソルを×ボタンに合わせながらクリックすると赤いボタンになる。
240
+
241
+ 2. 通常時は黒い×である。

1

質問の内容を忘れていた

2021/10/23 16:26

投稿

meoto2408
meoto2408

スコア52

test CHANGED
File without changes
test CHANGED
@@ -223,3 +223,7 @@
223
223
 
224
224
 
225
225
  確かに`CustomNotebook.focus`の子要素に`style.element_create`で追加した`close`を`"active", "!disabled", "img_closeactive"`とNotebookのStateでデザインを変えているのは理解できてはいるのですが,×ボタンにカーソルを合わせたらデザインが変えるようにするためにはどのような方法があるのかがわかりませんでした。
226
+
227
+
228
+
229
+ そもそもStyleよりもthemeを使うべきなのかな?とか調べていて思ったりしたのですが何かヒントをいただけるとありがたいです。