Ttk style inheritance

You know the drill by now—open up a blank file and fill in the following code:

import tkinter as tk
import tkinter.ttk as ttk

win = tk.Tk()

regular_button = ttk.Button(win, text="regular button")
small_button = ttk.Button(win, text="small button", style="small.TButton")
big_button = ttk.Button(win, text="big button", style="big.TButton")
big_dangerous_button = ttk.Button(win, text="big dangerous", style="danger.big.TButton")
small_dangerous_button = ttk.Button(win, text="small dangerous", style="danger.small.TButton")

After the imports and main window, we create five buttons. Each button will have different styling added to it:

  • The first has no style argument, so will only have the global styling applied to it.
  • The second has small.TButton styling applied.
  • The third has big.TButton styling applied.
  • The fourth has danger.big.TButton styling applied.
  • The fifth has danger.small.TButton styling applied.

These style arguments are just strings. They won't do anything until we get a Style object to configure them:

style = ttk.Style()

style.configure('TButton', foreground="blue4")
style.configure('small.TButton', font=(None, 7))
style.configure('big.TButton', font=(None, 20))
style.configure('danger.small.TButton', foreground="red")
style.configure('danger.big.TButton', foreground="dark red")

We call configure with each of our style choices as the first argument:

  • The global TButton sets the foreground (text) color to blue4.
  • The small.TButton reduces the font size down to 7.
  • The big.TButton increases the font size to 20.
  • The danger.small.TButton sets the foreground color to red.
  • The danger.big.TButton sets the foreground to dark red.

Now that we have the styles all set up, all we have left to do is pack the buttons and display the window:

regular_button.pack(padx=50, pady=50)
small_button.pack(padx=50, pady=50)
big_button.pack(padx=50, pady=50)
big_dangerous_button.pack(padx=50, pady=50)
small_dangerous_button.pack(padx=50, pady=50)

win.mainloop()

Run this code and look at the styling of each button. Hopefully, the way inheritance works is clear just from this example.

When defining a style name, the string which is used determines the logic used when styling the widget. Inheritance is applied via the use of the dots within the string.

Think of the rightmost word as the base of the inheritance chain. This will almost always be named after one of the ttk special strings, as they define exactly which widget the styling is applied to.

A list of all of these can be found online; for example, at
http://infohost.nmt.edu/tcc/help/pubs/tkinter/web/ttk-style-layer.html.

Once you have found the appropriate base, you can edit all widgets of that type by configuring the base. This is what we did with this line of code:

style.configure('TButton', foreground="blue4")

Using this line, we changed all buttons to have blue text, unless overwritten by a new style.

In order to create a style which is only applied to certain widgets, add a new style name, followed by a dot, before the name of the base style. We did this as follows:

style.configure('small.TButton', font=(None, 7))
style.configure('big.TButton', font=(None, 20))

Any buttons using one of these two styles will have the relevant font size modifications from their leftmost style name. As well as this, they will inherit the blue text modification from the TButton base style. This is why all of the first three buttons have blue text.

This chain of inheritance can continue as far as necessary. In our example, we extended both big and small buttons one further time:

style.configure('danger.small.TButton', foreground="red")
style.configure('danger.big.TButton', foreground="dark red")

Each of these two buttons inherits both the font size and blue text from its middle and right style names, but the base name of TButton, which sets the text to blue, has been overwritten by the leftmost style name's shade of red:

This inheritance allows us to achieve effortless consistency across widgets of the same type within an application. We can configure a base style for each widget and update certain features of any widget which may need a slight difference in style without having to re-declare the base styling.

It also shortens our initializations significantly if we want to apply multiple default styles upon creation.

Now that we have an understanding of the differences between tk and ttk widgets, let's begin using some by building the first version of our text editor application.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset