Ttk Elements

This article introduces ttk elements and how to assemble them into widget styles.

1. Introduction to Ttk Elements

So far, you've learned that a theme is a collection of styles that define the appearance of all ttk widgets. A style is a description of the appearance of a widget class. A style consists of one or more elements. For example, a label consists of border, fill, and label elements. These elements are nested with each other, as shown in the following figure:

In general, most built-in ttk styles use the concept of layout to organize the different element layers of building widgets.

To get the layout of the widget class, you can use the layout() method of the Style object, as shown below:

style.layout(widget_class)

If the widget class has no layout, the layout() method raises TK Tclerror exception. The layout() method returns a tuple list (element_name, description), where:

• element_name is the name of the element.
• description is a dictionary that describes the element.

The following example uses the layout() method to get the layout of the TLabel widget class:

import tkinter as tk
from tkinter import ttk


class App(tk.Tk):
    def __init__(self):
        super().__init__()

        style = ttk.Style(self)

        layout = style.layout('TLabel')
        print(layout)


if __name__ == "__main__":
    app = App()
    app.mainloop()

The following output shows the style layout for TLabel:

[('Label.border',
    {'sticky': 'nswe',
     'border': '1',
     'children': [('Label.padding',
                   {'sticky': 'nswe',
                    'border': '1',
                    'children': [('Label.label',
                                  {'sticky': 'nswe'})]
                    })]
     }
)]

TLabel has three nested elements:

• Label.border is the outermost element with stickiness, borders, and subkeys.
• Label.padding is nested in label Inside the border. It also has sticky keys, border keys, and subkeys.
• Label.label is the innermost element with only one sticky key.

For example, when an element has a sticky key with a value of nswe, it will be stretched to attach to the north, South, West, and east of the parent element.

Note that the style layout of the widget class depends on the current theme. If you change the theme, the layout may be different.

2. Elements option

Each element has a list of options that specify the appearance of the element. To get a list of option names, use the element of the Style object_ Options() method:

style.element_options(styleName)

The following procedure shows the label border,Label.padding and label Element options of label element:

import tkinter as tk
from tkinter import ttk


class App(tk.Tk):
    def __init__(self):
        super().__init__()

        style = ttk.Style(self)

        # layout
        layout = style.layout('TLabel')
        print(layout)

        # element options
        print(style.element_options('Label.border'))
        print(style.element_options('Label.padding'))
        print(style.element_options('Label.label'))


if __name__ == "__main__":
    app = App()
    app.mainloop()

Output:

('relief',)
('padding', 'relief', 'shiftrelief')
('compound', 'space', 'text', 'font', 'foreground', 'underline', 'width', 'anchor', 'justify', 'wraplength', 'embossed', 'image', 'stipple', 'background')

In this output:

• Label. The border element has an option: 'relief'.
• Label. The padding element has three options: padding, relief, and shiftrelief.
• Label. The label element has many options, including 'font', 'foreground', 'with', etc.

3. Elements option properties

To get a list of attributes associated with an element option, use the Style object's lookup() method:

style.lookup(layout_name, option_name)

The following example shows TLabel Attributes of font, foreground and background options in label element:

import tkinter as tk
from tkinter import ttk


class App(tk.Tk):
    def __init__(self):
        super().__init__()

        style = ttk.Style(self)

        # attributes of the font, foreground, and background
        # of the Label.label element
        print(style.lookup('Label.label', 'font'))
        print(style.lookup('Label.label', 'foreground'))
        print(style.lookup('Label.label', 'background'))


if __name__ == "__main__":
    app = App()
    app.mainloop()

Output:

TkDefaultFont
SystemWindowText
SystemButtonFace

It can be clearly seen from the output that the font is TkDefaultFont, the foreground is SystemWindowText and the background is SystemButtonFace.

The following example shows how to change the appearance of a Label widget:

import tkinter as tk
from tkinter import ttk


class App(tk.Tk):
    def __init__(self):
        super().__init__()

        self.geometry('500x100')

        message = 'This is an error message!'

        label = ttk.Label(self, text=message, style='Error.TLabel')
        label.pack(expand=True)

        style = ttk.Style(self)

        style.configure('Error.TLabel', foreground='white')
        style.configure('Error.TLabel', background='red')
        style.configure('Error.TLabel', font=('Helvetica', 12))
        style.configure('Error.TLabel', padding=(10, 10))


if __name__ == "__main__":
    app = App()
    app.mainloop()