{"id":707,"date":"2018-07-18T07:41:07","date_gmt":"2018-07-18T05:41:07","guid":{"rendered":"http:\/\/pythonprogramming.altervista.org\/?p=707"},"modified":"2019-09-02T19:25:23","modified_gmt":"2019-09-02T17:25:23","slug":"707-2","status":"publish","type":"post","link":"https:\/\/pythonprogramming.altervista.org\/707-2\/","title":{"rendered":"Tkinter: explaining the use of ttk with radiobutton example"},"content":{"rendered":"<h2>Video with code for ttk and radiobuttons<\/h2>\n<p>With <strong>ttk<\/strong> (from the <strong>tkinter<\/strong> module) we can have a better look for our <strong>widgets<\/strong>. With some little changes in our code we can obtain this, as you will see in the lines of code below and the video that follows.<\/p>\n<pre class=\"lang:default decode:true\">import tkinter as tk\r\nimport tkinter.ttk as ttk\r\n\r\nroot = tk.Tk()\r\nvstring = tk.IntVar()\r\nvalues = [\r\n    (\"option 1\"),\r\n    (\"option 2\"),\r\n    (\"option 3\"),\r\n    (\"option 4\")\r\n]\r\n\r\nfor v in values:\r\n\t# Here is the ttk style widget\r\n    rb = ttk.Radiobutton(root,\r\n        text=v,\r\n        value= v[-1],\r\n        variable = vstring)\r\n    rb.pack(anchor=tk.W)\r\n\r\nroot. mainloop()\r\n<\/pre>\n<p>The result is this new look of the radiobuttons and the old look<\/p>\n<p><a href=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2018\/07\/ttkrb.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3232\" src=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2018\/07\/ttkrb.png\" alt=\"\" width=\"122\" height=\"116\" \/><\/a> <a href=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2018\/07\/tkinter_rb.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3233\" src=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2018\/07\/tkinter_rb.png\" alt=\"\" width=\"122\" height=\"132\" \/><\/a><\/p>\n<pre class=\"lang:default decode:true \"># for the old style just change this (tk instead of ttk before Radiobutton)\r\n\r\nrb = tk.Radiobutton(root, text=v, value= v[-1], variable = vstring)<\/pre>\n<p>As you can see the <strong>ttk<\/strong> round shape of the radiobuttons looks more flat and newer than the <strong>tk<\/strong> version. The tk radiobutton, also, occupies more space among each other, as you can see by the fact that the window is taller for the tk version.<\/p>\n<p><iframe loading=\"lazy\" width=\"100%\" height=\"400\" src=\"https:\/\/www.youtube.com\/embed\/8Fl9-qK6ZFA\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" allowfullscreen=\"allowfullscreen\"><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><\/iframe><\/p>\n<h2>Give the ttk Radiobuttons some style<\/h2>\n<p>In ttk to change the style of the widgets things work a little different than in tkinter regular widgets. This is an example of how to apply some changes to the style of the Radiobuttons in ttk.<\/p>\n<pre class=\"lang:default decode:true \"># the code\r\n# for the original tkinter\r\n\r\nimport tkinter as tk\r\nimport tkinter.ttk as ttk\r\n\r\nroot = tk.Tk()\r\nvstring = tk.IntVar()\r\nvalues = [\r\n    (\"Rome 1\"),\r\n    (\"Paris 2\"),\r\n    (\"London 3\"),\r\n    (\"New York 4\")\r\n]\r\n\r\n\r\nstyle = ttk.Style()\r\nstyle.configure(\"BW.TRadiobutton\", foreground=\"red\", background=\"yellow\")\r\n\r\nfor v in values:\r\n\t# Here is the ttk style widget\r\n    rb = ttk.Radiobutton(root,\r\n        text=v[:-1],\r\n        value= v[-1],\r\n        variable = vstring,\r\n        style = \"BW.TRadiobutton\"\r\n        )\r\n    rb.pack(anchor=tk.W)\r\n\r\nroot. mainloop()\r\n<\/pre>\n<p>The result is this:<\/p>\n<p><a href=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2018\/07\/ttk_style.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3236\" src=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2018\/07\/ttk_style.png\" alt=\"\" width=\"122\" height=\"116\" \/><\/a><\/p>\n<h2>Using Images instead of text<\/h2>\n<p>In this example we modified the previous code to use images instead of text<\/p>\n<pre class=\"lang:default decode:true \"># the code\r\n# for the original tkinter\r\n\r\nimport tkinter as tk\r\nimport tkinter.ttk as ttk\r\n\r\nroot = tk.Tk()\r\nvstring = tk.IntVar()\r\nvalues = [\r\n    (\"walk01.png1\"),\r\n    (\"walk02.png2\"),\r\n    (\"walk04.png3\"),\r\n    (\"walk03.png4\")\r\n]\r\n\r\n\r\nstyle = ttk.Style()\r\nstyle.configure(\"BW.TRadiobutton\", foreground=\"red\", background=\"yellow\")\r\n\r\nimg = [tk.PhotoImage(file=x[:-1]) for x in values]\r\nfor n,v in enumerate(values):\r\n\t# Here is the ttk style widget\r\n    rb = ttk.Radiobutton(root,\r\n        image=img[n],\r\n        value= v[-1],\r\n        variable = vstring,\r\n        style = \"BW.TRadiobutton\"\r\n        )\r\n    rb.pack(side=\"left\", anchor=tk.W)\r\n\r\nroot. mainloop()\r\n<\/pre>\n<p>This is the result<\/p>\n<p><a href=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2018\/07\/ttk_images.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3238\" src=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2018\/07\/ttk_images.png\" alt=\"\" width=\"694\" height=\"236\" srcset=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2018\/07\/ttk_images.png 694w, https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2018\/07\/ttk_images-320x109.png 320w\" sizes=\"auto, (max-width: 694px) 100vw, 694px\" \/><\/a><\/p>\n<p>To be continued&#8230; ?<\/p>\n\t<!----- pubblicit\u00e0-------- vedi h:\\ads\\codice_di_prima.txt per il codice che era qui --------------------->\r\n<script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\r\n<!-- Altervista-pythonprogramming-336X280 -->\r\n<ins class=\"adsbygoogle\"\r\n     style=\"display:block\"\r\n     data-ad-client=\"ca-pub-4189782812829764\"\r\n     data-ad-slot=\"2548661001\"\r\n     data-ad-format=\"auto\"><\/ins>\r\n<script>\r\n     (adsbygoogle = window.adsbygoogle || []).push({});\r\n<\/script>\r\n<h4>Tkinter test for students<\/h4>\r\n\r\n\r\n<script>\r\nvar title = \"Tkinter posts\";\r\n\t\tvar links = [\r\n[\"https:\/\/pythonprogramming.altervista.org\/tkinter-app-to-make-a-different-test-for-every-student-part-1\/\",\"Tk Test Marker I\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/tkinter-testmaker-part-ii\/\",\"Tk Test Maker II\"],\t\r\n[\"https:\/\/pythonprogramming.altervista.org\/tkinter-tests-app-part-3\/\",\"Tk test Maker III\"]\r\n];\r\n\t\t\r\n\t<\/script>\r\n<script>\r\n\t\r\nif (typeof next2 != \"undefined\"){let next2 = 0;}\r\n\t\r\nnext2 = 0;\r\n\thtml = \"\";\/\/<b style='color:coral;font-size:1.2em'>Other posts about \" + title + \"<\/b><br>\";\r\nfor (address of links) \r\n{\r\n\r\n\tif (next2 == 1){\r\n\t\thtml += \"<div style='background:coral'>\";\r\n\t\thtml += \"Next link => <a href='\" + address[0] + \"'>\" + address[1] + \"<\/a>\";\r\n\t\thtml += \"<\/div><br>\";\r\n\t\tnext2 = 0;\r\n\t}\r\n\tif (address[0] == document.URL) {\r\n\t\tnext2 = 1;\r\n\t}\r\n}\r\n\r\nif (typeof next != \"undefined\") {let next = 0;}\r\nif (typeof addressStart != \"undefined\") {let addressStart = \"\";}\r\nnext = 0;\r\naddressStart = \"<a href='\";\r\nfor (address of links) {\r\n\tif (next == 1){\r\n\t\thtml += \">>>\" + addressStart + address[0] + \"'>\" + address[1] + \"<\/a><br>\";\r\n\t\tnext = 0;\r\n\t}\r\n\telse if (addressStart + address[0] != document.URL)\r\n\t{\r\n\t\thtml += addressStart + address[0] + \"'>\" + address[1] + \"<\/a><br>\";\r\n\t}\r\n\telse\r\n\t{\r\n\t\tnext = 1;\r\n\t\tnext_address = address[0]\r\n\t\tnext_title = address[1]\r\n\t\thtml += \"<span style='color:gray'>\" + address[1] + \"<\/span><br>\";\r\n\t}\r\n\r\n}\r\n\r\n\thtml += `<span style=\"font-size:8px\">Powered by <a href=\"https:\/\/pythonprogramming.altervista.org\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2673\" src=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/06\/altervista2.png\" alt=\"\" width=\"70\" height=\"25\" srcset=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/06\/altervista2.png 156w, https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/06\/altervista2-150x56.png 150w\" sizes=\"auto, (max-width: 70px) 100vw, 70px\" \/>pythonprogramming.altervista.org<\/a><\/span>`\r\n\thtml = \"<div style='background:yellow'>\" + html + \"<\/div>\";\r\n\tdocument.write(html)\r\n<\/script>\r\n\t\r\n\r\n<h4>Tkinter articles<\/h4>\r\n<!-- calculator with memo -->\r\n<a href=\"https:\/\/pythonprogramming.altervista.org\/free-calculator-memo-with-tkinter-support-markdown-to-html-saving-too\/\">\r\n<img decoding=\"async\" src=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2020\/03\/calcmemopy_banner.png\" width=\"100%\"><\/a>\r\n<script>\r\nvar title = \"Tkinter posts\";\r\n\t\tvar links = [\r\n\t\t\t[\"https:\/\/pythonprogramming.altervista.org\/?p=5719&preview=true\",\"Presentation app with SVG files\"],\r\n\t\t\t[\"https:\/\/pythonprogramming.altervista.org\/png-joined-in-one-pdf-files\/\",\"Join png into pdf\"],\r\n\t\t\t[\"https:\/\/pythonprogramming.altervista.org\/free-app-imgslide-3-1-slide-images-and-join-them-into-a-pdf\/\",\"ImageSlider 3.1\"],\r\n\t\t\t[\"https:\/\/pythonprogramming.altervista.org\/tkinter-to-show-svg-files-svgslider-1-0\/\",\"SVGSlider 1.0\"],\r\n\t\t\t[\"https:\/\/pythonprogramming.altervista.org\/imageslider-3-0-tkinter-app-to-show-images-like-in-a-presentation\/\",\"ImageSlider 3.0\"],\r\n\t\t\t[\"https:\/\/pythonprogramming.altervista.org\/tkinter-shows-an-svg-file\/\",\"SVG in tkinter\"],\r\n\t\t\t[\"https:\/\/pythonprogramming.altervista.org\/tkinter-tests-maker-app-part-iv-add-a-menu-with-tkinter\/\",\"Add a menu with tkinter\"],\r\n\t\t\t[\"https:\/\/pythonprogramming.altervista.org\/free-pdf-maker-app-with-python\/\",\"tkinter make pdf\"],\r\n\t\t\t[\"https:\/\/pythonprogramming.altervista.org\/calcpy-2-0-the-second-and-final-part-of-calculator\/\",\"Live coding Calculator app part 2\"],\r\n\t\t\t[\"https:\/\/pythonprogramming.altervista.org\/split-every-page-in-a-pdf-i-a-different-pdf\/\",\"Split a pdf in different files\"],\r\n\t\t\t[\"https:\/\/pythonprogramming.altervista.org\/python-calculator-from-skratch-part-1-calcpy\/\",\"Calculator from skratch p.1\"], \r\n\t\t\t[\"https:\/\/pythonprogramming.altervista.org\/python-and-tkinter-fully-working-listbox-to-do-app-for-skratch\/\",\"Tkinter ToDo App\"],\r\n\t\t\t[\"https:\/\/pythonprogramming.altervista.org\/copy-and-paste-tkinter-widget-code-app\/\",\"Copy and paste app for tkinter widgets\"],\r\n\t\t\t[\"https:\/\/pythonprogramming.altervista.org\/calcdoc-py-a-tkinter-app-to-memorize-operations\/\",\"calcdoc.py: a great calculator memo app\"],\r\n\t\t\t[\"https:\/\/pythonprogramming.altervista.org\/tkinter-calculator-with-memo-of-operations\/\",\"Calculator + list of operations\"],\r\n\t\t\t[\"https:\/\/pythonprogramming.altervista.org\/tkinter-smallest-calculator-ever\/\", \"Smallest calculator\"],\r\n\t\t\t[\"https:\/\/pythonprogramming.altervista.org\/python-gui-with-tkinter-labels-with-text-and-images\/\",\"Labels with images and text\"],\r\n\t[\"https:\/\/pythonprogramming.altervista.org\/a-toolbar-for-python-with-tkinter\/\",\"Toolbar in tkinter\"],\r\n\t[\"https:\/\/pythonprogramming.altervista.org\/tkinter-grid-system-how-to-expand-a-button\/\",\"Fit Buttons to the Window\"],\r\n\t\t[\"https:\/\/pythonprogramming.altervista.org\/tkinter-application-launcher-python-gui\/\",\"Tkinter app Laucher\"],\r\n\t\t[\"https:\/\/pythonprogramming.altervista.org\/tkinter-and-how-to-add-an-image-to-a-button\/\", \"Image on a tkinter Button\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/tkinter-imagebrowser-2-with-canvas\/\", \"Tkinter image browser 2 (canvas)\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/tkinter-image-broswer\/\",\"Tkinter image browser (label)\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/tkinter-to-make-pdf-fast-and-free-with-text-or-html\/\",\"Create PDF with Tkinter Text widget\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/tkinter-app-to-evaluate-tests-part-1\/\",\"Tkinter App to Evaluate tests\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/simple-presentation-in-pure-python-while-you-learn-tkinter\/\",\"Presentation with Python\/tkinter\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/tkinter-entry-widgets-example-make-a-shuffler-app\/\",\"Tkinter example: entry to shuffle lists\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/move-a-rectangle-with-text-inside-of-it-with-tkinter\/\",\"Moving a text with tkinter\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/tkinter-and-ttk-the-option-menu-widget\/\",\"Tkinter's OptionMenu (and ttk)\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/tkinter-app-to-watch-videos-with-live-coding\/\",\t\t\t\t\t\"Tkinter to watch videos\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/type-reader-app-in-python-pc-read-the-letters-you-type-tkinter\/\",\t\"Type Reader App\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/create-a-new-tkinter-widget-inputbox\/\",\t\t\t\t\t\t\t\"Create your Inputbox\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/tkinter-open-a-new-window-and-just-one\/\", \t\t\t\t\t\t\"Open only one more window\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/a-simple-test-maker-with-python-and-tkinter\/\", \t\t\t\t\t\"Test maker with tkinter\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/my-personal-notepad-toggle-tkinter-fullscreen\/\",\t\t\t\t\t\"Ebook maker with tkinter\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/tkinter-and-listbox-1\/\", \t\t\t\t\t\t\t\t\t\t\t\"Tkinter & listbox 2019 - 1\"],\r\n['https:\/\/pythonprogramming.altervista.org\/tkinter-using-a-gui-graphic-user-interface-with-python-part-1\/', \t'Create a window'],\r\n['https:\/\/pythonprogramming.altervista.org\/tkinter-to-make-a-window-video-1\/', \t\t\t\t\t\t\t\t'Create a window part 2'],\r\n[\"https:\/\/pythonprogramming.altervista.org\/create-more-windows-with-tkinter\/\",\t\t\t\t\t\t\t\t\"More windows tkinter!\"],\r\n['https:\/\/pythonprogramming.altervista.org\/tkinter-part-2-binding\/', \t\t\t\t\t\t\t\t\t\t'Binding functions to key\/button '],\r\n\t\t\t[\"https:\/\/pythonprogramming.altervista.org\/all-tkinter-posts\/\",\">>>ALL TKINTER POSTS>>>\"]\r\n\t\t];\r\n\t\t\r\n\t<\/script>\r\n<script>\r\n\t\r\nif (typeof next2 != \"undefined\"){let next2 = 0;}\r\n\t\r\nnext2 = 0;\r\n\thtml = \"\";\/\/<b style='color:coral;font-size:1.2em'>Other posts about \" + title + \"<\/b><br>\";\r\nfor (address of links) \r\n{\r\n\r\n\tif (next2 == 1){\r\n\t\thtml += \"<div style='background:coral'>\";\r\n\t\thtml += \"Next link => <a href='\" + address[0] + \"'>\" + address[1] + \"<\/a>\";\r\n\t\thtml += \"<\/div><br>\";\r\n\t\tnext2 = 0;\r\n\t}\r\n\tif (address[0] == document.URL) {\r\n\t\tnext2 = 1;\r\n\t}\r\n}\r\n\r\nif (typeof next != \"undefined\") {let next = 0;}\r\nif (typeof addressStart != \"undefined\") {let addressStart = \"\";}\r\nnext = 0;\r\naddressStart = \"<a href='\";\r\nfor (address of links) {\r\n\tif (next == 1){\r\n\t\thtml += \">>>\" + addressStart + address[0] + \"'>\" + address[1] + \"<\/a><br>\";\r\n\t\tnext = 0;\r\n\t}\r\n\telse if (addressStart + address[0] != document.URL)\r\n\t{\r\n\t\thtml += addressStart + address[0] + \"'>\" + address[1] + \"<\/a><br>\";\r\n\t}\r\n\telse\r\n\t{\r\n\t\tnext = 1;\r\n\t\tnext_address = address[0]\r\n\t\tnext_title = address[1]\r\n\t\thtml += \"<span style='color:gray'>\" + address[1] + \"<\/span><br>\";\r\n\t}\r\n\r\n}\r\n\r\n\thtml += `<span style=\"font-size:8px\">Powered by <a href=\"https:\/\/pythonprogramming.altervista.org\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2673\" src=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/06\/altervista2.png\" alt=\"\" width=\"70\" height=\"25\" srcset=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/06\/altervista2.png 156w, https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/06\/altervista2-150x56.png 150w\" sizes=\"auto, (max-width: 70px) 100vw, 70px\" \/>pythonprogramming.altervista.org<\/a><\/span>`\r\n\thtml = \"<div style='background:yellow'>\" + html + \"<\/div>\";\r\n\tdocument.write(html)\r\n<\/script>\n","protected":false},"excerpt":{"rendered":"ttk submodule of tkinter to create nicer widgets\n<a class=\"moretag\" href=\"https:\/\/pythonprogramming.altervista.org\/707-2\/\"> [...]<\/a>","protected":false},"author":1,"featured_media":1350,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","footnotes":""},"categories":[131,49,50],"tags":[52,4,132,187,51,186],"class_list":["post-707","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-radiobutton","category-tkinter","category-video","tag-gui","tag-python","tag-radiobutton","tag-radiobuttons","tag-tkinter","tag-ttk"],"avopt_banners_inside_post":true,"avopt_banners_on_page":true,"av_copy_from":"","av_sharing_message":"","av_sharing_allowed":false,"av_sharing_on":{"fb":[],"tw":[]},"av_allow_affiliate_banner":false,"av_allow_affiliate_multi_banner":false,"av_show_affiliation_buy_button":false,"av_post_rating":true,"av_have_post_rating_value":false,"av_is_artificial_intelligence_content":false,"_links":{"self":[{"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/posts\/707","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/comments?post=707"}],"version-history":[{"count":9,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/posts\/707\/revisions"}],"predecessor-version":[{"id":3239,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/posts\/707\/revisions\/3239"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/media\/1350"}],"wp:attachment":[{"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/media?parent=707"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/categories?post=707"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/tags?post=707"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}