Styling a ttk widget

In order to emulate the previous example with a ttk button, open up a new file and add the following code:

import itertools
import tkinter as tk
import tkinter.ttk as ttk

win = tk.Tk()
style = ttk.Style()

style_1 = {'foreground': 'red', 'background': 'black'}
style_2 = {'foreground': 'yellow', 'background': 'grey'}

mapping_1 = {'background': [('pressed', 'gold'), ('active', 'magenta')]}
mapping_2 = {'background': [('pressed', 'chocolate'), ('active', 'blue4')]}

style_cycle = itertools.cycle([style_1, style_2])
mapping_cycle = itertools.cycle([mapping_1, mapping_2])

To set up our style switching button, we use the following steps:

  1. Though the imports are the same as before, we will also add ttk this time, so we start by adding this.
  2. We create a main window, followed by the ttk Style object. This is the object that will be configured in order to affect multiple widgets in the application.
  3. Another two style dictionaries are created, this time without activebackground or activeforeground, which are configured differently in ttk.
  4. Two mapping dictionaries are created which will handle changing colors when the buttons are hovered over and pressed. These are in the form of a list of 2-tuples. The first value in the tuple is the state and the second is the color (as a string in this case).
  5. Create two cycles to hold our styles and mappings.

Now that we have these variables set up, we can continue with the logic:

def switch_style():
style_choice = next(style_cycle)
mapping_choice = next(mapping_cycle)
style.configure('TButton', **style_choice)
style.map('TButton', **mapping_choice)

button = ttk.Button(win, text="style switch", command=switch_style, style="TButton")
button.pack(padx=50, pady=50)

win.mainloop()

Our switch_style function now looks a bit different.

  1. We get the next style and mapping dictionary from our cycles.
  2. The configure method is called as before, but this time on the Style object rather than the button itself.
  3. The string TButton is passed as the first argument to configure. This is a special string within ttk which will tell the Style object to apply the given styling to all Button widgets. The keyword arguments passed here come from our style_choice dictionary, as before.
  4. In order to add the highlighting logic, we need to use the map function. This will map the attributes in the keys of our mapping dictionaries (just background in this case) to different style options, depending on their states.
  5. The button is created. Upon creation, it is mapped to the TButton style. This assignment is actually pointless because the TButton styles will apply to all Button widgets by default, but it can be helpful to pass it as the argument to style just for clarification.
  6. We finish the file by packing the button and displaying the window.

Give this file a try. Click the button a few times, again making sure to hold down the button to see how the coloring changes based on its state:

Now that we have a grasp of how to change some styling with both tk and ttk widgets, it is clear that styling a tk widget is much simpler, so it may be tempting to stick with tk widgets.

However, aside from the native look, there is another huge benefit to ttk widget styling—inheritance. One more example will allow us to explore how this concept works.

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

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