{"id":2062,"date":"2021-01-04T09:50:20","date_gmt":"2021-01-04T09:50:20","guid":{"rendered":"https:\/\/www.pythontutorial.net\/?page_id=2062"},"modified":"2021-01-05T01:52:26","modified_gmt":"2021-01-05T01:52:26","slug":"ttk-style-map","status":"publish","type":"page","link":"https:\/\/www.pythontutorial.net\/tkinter\/ttk-style-map\/","title":{"rendered":"How to Change the Appearances of Widgets Dynamically Using Ttk Style map() Method"},"content":{"rendered":"\n

Summary<\/strong>: in this tutorial, you’ll learn how to use the ttk Style map()<\/code> method to dynamically change the appearance of a widget based on its specific state.<\/p>\n\n\n\n

Typically, a ttk widget<\/a> allows you to change its appearance based on a specific state.<\/p>\n\n\n\n

The following table shows a list of widget states and their meanings:<\/p>\n\n\n\n

State<\/th>Meaning<\/th><\/tr><\/thead>
active<\/code><\/td>The mouse is currently within the widget.<\/td><\/tr>
alternate<\/code><\/td>Ttk reserved this state for application use.<\/td><\/tr>
background<\/code><\/td>The widget is on a window that is not the foreground window. The foreground window is a window that is getting user inputs. This state is only relevant to Windows and macOS.<\/td><\/tr>
disabled<\/code><\/td>The widget won’t respond to any actions.<\/td><\/tr>
focus<\/code><\/td>The widget currently has focus.<\/td><\/tr>
invalid<\/code><\/td>The value of the widget is currently invalid.<\/td><\/tr>
pressed<\/code><\/td>The widget is currently being clicked or pressed e.g. when a Button widget is pressed.<\/td><\/tr>
readonly<\/code><\/td>The readonly widget prevents you from changing its current value e.g., a read-only Entry<\/code> widget won’t allow you to change its text contents.<\/td><\/tr>
selected<\/code><\/td>The widget is selected e.g. when radio buttons are checked.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

To change the appearance of a widget dynamically, you can use the map()<\/code> method of the Style object:<\/p>\n\n\n

style.map(style_name, query)<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
The map()<\/code> method accepts the first argument as the name of the style e.g., TButton<\/code> and TLabel<\/code>.<\/p>\n\n\n\n
The argument query is a list of keyword arguments where each key is a style option and values are lists of tuples of (state,value)<\/code>.<\/p>\n\n\n\n
For example, the following code dynamically changes the foreground color of a button widget:<\/p>\n\n\n
import<\/span> tkinter as<\/span> tk\nfrom<\/span> tkinter import<\/span> ttk\n\n\nclass<\/span> App<\/span>(tk.Tk)<\/span>:<\/span>\n    def<\/span> __init__<\/span>(self)<\/span>:<\/span>\n        super().__init__()\n\n        self.geometry('300x100'<\/span>)\n\n        button = ttk.Button(self, text='Save'<\/span>)\n        button.pack(expand=True<\/span>)\n\n        style = ttk.Style(self)\n        style.configure('TButton'<\/span>, font=('Helvetica'<\/span>, 16<\/span>))\n        style.map('TButton'<\/span>,\n                foreground=[('pressed'<\/span>, 'blue'<\/span>),\n                            ('active'<\/span>, 'red'<\/span>)])\n\n        print(style.layout('TButton'<\/span>))\n\n\nif<\/span> __name__ == \"__main__\"<\/span>:\n    app = App()\n    app.mainloop()<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
In this example, when you move focus to the button, its text color changes to red. And when you click or press the button, its text color turns to blue.<\/p>\n\n\n\n
Output:<\/p>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n
<\/p>\n\n\n\n
Summary #<\/a><\/h2>\n\n\n\n
  • Use the style.map()<\/code> method to dynamically change the appearance of a widget based on its specific state.<\/li><\/ul>\n
    \n\t
    \n\t\t
    Was this tutorial helpful ?<\/div>\n\t\t
    \n\t\t\t\n\t\t\t\t\n\t\t\t\t\t<\/path>\n\t\t\t\t<\/svg>\n\t\t\t\t Yes <\/span>\n\t\t\t<\/button>\n\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t<\/path>\n\t\t\t\t<\/svg>\n\t\t\t\t No <\/span>\n\t\t\t<\/button>\n\t\t<\/div>\n\t<\/header>\n\n\t
    \n\t\t
    \n\t\t\t
    <\/div>\n\t\t\t