{"id":33401,"date":"2022-08-27T19:37:46","date_gmt":"2022-08-27T19:37:46","guid":{"rendered":"https:\/\/www.askpython.com\/?p=33401"},"modified":"2022-09-27T11:12:29","modified_gmt":"2022-09-27T11:12:29","slug":"wxpython","status":"publish","type":"post","link":"https:\/\/www.askpython.com\/python-modules\/wxpython","title":{"rendered":"wxPython: Creating GUIs with Python"},"content":{"rendered":"\n<p><strong>wxPython<\/strong> is a cross-platform GUI toolkit for Python programming language. It was developed by Robin Dunn along with Harri Pasanen and Edward Zimmerman in 1995. wxPython helps to create robust graphical user interfaces which can be customized depending upon the use case. Its easy, user-friendly, and simple to understand.<\/p>\n\n\n\n<p>It is implemented as a set of Python extension modules that wrap the GUI components of the popular&nbsp;<a href=\"https:\/\/wxwidgets.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">wxWidgets<\/a>&nbsp;cross-platform library, which is written in C++. It is one of the alternatives to the Tkinter framework that comes built into the Python standard library.<\/p>\n\n\n\n<p>It\u2019s free and <strong>Open Source<\/strong>. wxPython is cross-platform which means the program can run on several platforms without changing the source code of the original program. Currently, supported platforms include Microsoft Windows, Mac OS X, and macOS, and Linux or other UNIX-like systems with GTK2 or GTK3 libraries.<\/p>\n\n\n\n<p><strong><em>Also Read: <a href=\"https:\/\/www.askpython.com\/python-modules\/tkinter\/drawing-a-line-tkinter-canvas\" target=\"_blank\" rel=\"noreferrer noopener\">Tkinter Tutorial &#8211; Drawing a Line Using Tkinter Canvas<\/a><\/em><\/strong> <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Creating a Keypad GUI application with wxPython<\/h2>\n\n\n\n<p>To understand it better, let\u2019s try to create a small application using wxPython. The code for this application is very easy to read. The application uses wxObject Classes that serve as the base classes for all the classes in the WxPython API.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Content Structure<\/h2>\n\n\n\n<ol class=\"wp-block-list\" type=\"1\"><li>Application Code Breakdown<\/li><li>The Complete Application<\/li><li>Output<\/li><li>Conclusion<\/li><\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Creating GUI with wxPython &#8211; Step-By-Step<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>Installing wxPython<\/li><\/ul>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: python; title: ; notranslate\" title=\"\">\npip install wxPython\n<\/pre><\/div>\n\n\n<ul class=\"wp-block-list\"><li>Importing wxPython<\/li><\/ul>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: python; title: ; notranslate\" title=\"\">\nimport wx\n<\/pre><\/div>\n\n\n<ul class=\"wp-block-list\"><li>Creating a wxPython Application and assigning it to the variable \u201capp\u201d<\/li><\/ul>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: python; title: ; notranslate\" title=\"\">\napp = wx.App()\n<\/pre><\/div>\n\n\n<ul class=\"wp-block-list\"><li>Creating a Class <strong>\u201cWindow\u201d<\/strong> containing which would inherit all the properties and methods of the<strong> wx.Frame<\/strong> object coming from the wxPython API<\/li><\/ul>\n\n\n\n<p>Code:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: python; title: ; notranslate\" title=\"\">\nclass Window(wx.Frame):\n<\/pre><\/div>\n\n\n<p>Explanation:<\/p>\n\n\n\n<p>A frame is a window whose size and position can be changed by the user. It is to be used as an input form. It usually consists of a title bar and has thick borders. It can optionally contain a menu bar, toolbar, and status bar as per the application requirement. It is by default resizable. Any controls for the application should not be created as its children since the controls will be handled by using <strong>wx.Panel <\/strong>in the following code.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>__init__ ()<\/strong> Constructor Function<\/li><\/ul>\n\n\n\n<p>Code:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: python; title: ; notranslate\" title=\"\">\n# Defining the default Constructor function\n    def __init__(self, title):\n        super().__init__(parent=None, title=title)\n\n        # Create a panel\n        self.panel = wx.Panel(self)\n<\/pre><\/div>\n\n\n<p><strong>Explanation:<\/strong><\/p>\n\n\n\n<p>First, we define our constructor function. The only default parameter defined for the init function is the <strong>title<\/strong> for our application window which would accept an argument later in the code. <strong>wx.Panel<\/strong> contains all the controls for our application window. It should be created as the sole child of the frame, and it serves as the parent of the actual controls. The frame will size the panel so that it always fills the client area.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>wx.GridBagSizer()<\/strong><\/li><\/ul>\n\n\n\n<p>Code:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: python; title: ; notranslate\" title=\"\">\n# Define the grid sizer for our layout\n        sizer = wx.GridBagSizer(4, 3)\n<\/pre><\/div>\n\n\n<p>Explanation:<\/p>\n\n\n\n<p>Next, we are defining a sizer for our window layout using <strong>wx.GridBagSizer(4,3)<\/strong>. It can lay out items in a virtual grid and takes optional arguments specifying the gap between rows and columns in pixels. The total size of the virtual grid is determined by the largest row and column that items are positioned at, adjusted for spanning.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>sizer.Add()<\/strong><\/li><\/ul>\n\n\n\n<p>Code:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: python; title: ; notranslate\" title=\"\">\n# Defining layout components\n        sizer.Add(\n            wx.StaticText(self.panel, label=&quot;My Keypad&quot;),\n            pos=(0, 1),\n            flag=wx.ALIGN_CENTER,\n        )\n\n        sizer.Add(wx.Button(self.panel, label=&quot;1&quot;), pos=(1, 0), flag=wx.EXPAND)\n        sizer.Add(wx.Button(self.panel, label=&quot;2&quot;), pos=(1, 1), flag=wx.EXPAND)\n        sizer.Add(wx.Button(self.panel, label=&quot;3&quot;), pos=(1, 2), flag=wx.EXPAND)\n        sizer.Add(wx.Button(self.panel, label=&quot;4&quot;), pos=(2, 0), flag=wx.EXPAND)\n        sizer.Add(wx.Button(self.panel, label=&quot;5&quot;), pos=(2, 1), flag=wx.EXPAND)\n        sizer.Add(wx.Button(self.panel, label=&quot;6&quot;), pos=(2, 2), flag=wx.EXPAND)\n        sizer.Add(wx.Button(self.panel, label=&quot;7&quot;), pos=(3, 0), flag=wx.EXPAND)\n        sizer.Add(wx.Button(self.panel, label=&quot;8&quot;), pos=(3, 1), flag=wx.EXPAND)\n        sizer.Add(wx.Button(self.panel, label=&quot;9&quot;), pos=(3, 2), flag=wx.EXPAND)\n\n        sizer.Add(wx.Button(self.panel, label=&quot;*&quot;), pos=(4, 0), flag=wx.EXPAND)\n        sizer.Add(wx.Button(self.panel, label=&quot;0&quot;), pos=(4, 1), flag=wx.EXPAND)\n        sizer.Add(wx.Button(self.panel, label=&quot;#&quot;), pos=(4, 2), flag=wx.EXPAND)\n\n<\/pre><\/div>\n\n\n<p>Explanation:<\/p>\n\n\n\n<p>Further in the code, we start adding content to our application using the <strong>sizer<\/strong> variable that we defined earlier. <strong>sizer.Add()<\/strong><strong> <\/strong>adds an item to the sizer at the grid cell with<strong> <\/strong>pos=(0, 1) specifying the row and column position to define the label <strong>\u201cMy Keypad\u201d<\/strong> for our panel using the <strong>wx.StaticText<\/strong> Constructor. <strong>wx.ALIGN_CENTER <\/strong>is the alignment enumeration centring our label text as a flag.<\/p>\n\n\n\n<p>Next, we are adding buttons to the layout of our application with all the texts as a calculator using the <strong>wx.Button<\/strong> Constructor. The row and column position for each of the buttons has to be specified too like above. And finally the <strong>wx.EXPAND <\/strong>ensures the expansion of the individual elements taking the entire space available for the layout.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>sizer.AddGrowableRow(), sizer.AddGrowableCol(), SetSizer(sizer)<\/strong><\/li><\/ul>\n\n\n\n<p>Code:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: python; title: ; notranslate\" title=\"\">\n        sizer.AddGrowableRow(0)\n        sizer.AddGrowableRow(1)\n        sizer.AddGrowableRow(2)\n        sizer.AddGrowableRow(3)\n        sizer.AddGrowableRow(4)\n\n        sizer.AddGrowableCol(0)\n        sizer.AddGrowableCol(1)\n        sizer.AddGrowableCol(2)\n\n         self.panel.SetSizer(sizer)\n<\/pre><\/div>\n\n\n<p>Explanation:<\/p>\n\n\n\n<p><strong>sizer.AddGrowableRow()<\/strong> specifies that the row index (starting from zero) should be grown if there is extra space available to the sizer and <strong>sizer.AddGrowableCol()<\/strong> specifies that the column index (starting from zero) should be grown if there is extra space available to the sizer.<\/p>\n\n\n\n<p>Then, the <strong>&nbsp;SetSizer(sizer)<\/strong> is set to the panel window, with all the layout details and specifications.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Center(), Show(), Window()<\/strong> and <strong>app.MainLoop()<\/strong><\/li><\/ul>\n\n\n\n<p>Code:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: python; title: ; notranslate\" title=\"\">\nself.Center()  \nself.Show()  \n\nwindow = Window(&quot;WxPython GUI Application Demo&quot;)\n  \napp.MainLoop()\n<\/pre><\/div>\n\n\n<p>Explanation:<\/p>\n\n\n\n<p><strong>Center()<\/strong> displays the window to the screen\u2019s center, <strong>Show()<\/strong> shows the constructed frame, <strong>Window()<\/strong> sets the title for the application and the <strong>app.MainLoop()<\/strong> triggers the application initializing the GUI event loop for the program.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Complete Code For Creating GUI with the wxPython Module<\/h2>\n\n\n\n<p>Code:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: python; title: ; notranslate\" title=\"\">\n# Create wxPython Application\napp = wx.App()\n\nclass Window(wx.Frame):\n    # Defining the Default Constructor function\n    def __init__(self, title):\n        super().__init__(parent=None, title=title)\n\n        # Create a panel\n        self.panel = wx.Panel(self)\n\n        # Define Grid\n        sizer = wx.GridBagSizer(4, 3)\n\n        sizer.Add(\n            wx.StaticText(self.panel, label=&quot;My Keypad&quot;),\n            pos=(0, 1),\n            flag=wx.ALIGN_CENTER,\n        )\n\n        sizer.Add(wx.Button(self.panel, label=&quot;1&quot;), pos=(1, 0), flag=wx.EXPAND)\n        sizer.Add(wx.Button(self.panel, label=&quot;2&quot;), pos=(1, 1), flag=wx.EXPAND)\n        sizer.Add(wx.Button(self.panel, label=&quot;3&quot;), pos=(1, 2), flag=wx.EXPAND)\n        sizer.Add(wx.Button(self.panel, label=&quot;4&quot;), pos=(2, 0), flag=wx.EXPAND)\n        sizer.Add(wx.Button(self.panel, label=&quot;5&quot;), pos=(2, 1), flag=wx.EXPAND)\n        sizer.Add(wx.Button(self.panel, label=&quot;6&quot;), pos=(2, 2), flag=wx.EXPAND)\n        sizer.Add(wx.Button(self.panel, label=&quot;7&quot;), pos=(3, 0), flag=wx.EXPAND)\n        sizer.Add(wx.Button(self.panel, label=&quot;8&quot;), pos=(3, 1), flag=wx.EXPAND)\n        sizer.Add(wx.Button(self.panel, label=&quot;9&quot;), pos=(3, 2), flag=wx.EXPAND)\n\n        sizer.Add(wx.Button(self.panel, label=&quot;*&quot;), pos=(4, 0), flag=wx.EXPAND)\n        sizer.Add(wx.Button(self.panel, label=&quot;0&quot;), pos=(4, 1), flag=wx.EXPAND)\n        sizer.Add(wx.Button(self.panel, label=&quot;#&quot;), pos=(4, 2), flag=wx.EXPAND)\n\n        sizer.AddGrowableRow(0)\n        sizer.AddGrowableRow(1)\n        sizer.AddGrowableRow(2)\n        sizer.AddGrowableRow(3)\n        sizer.AddGrowableRow(4)\n\n        sizer.AddGrowableCol(0)\n        sizer.AddGrowableCol(1)\n        sizer.AddGrowableCol(2)\n\n        self.panel.SetSizer(sizer)\n\n        self.Center()  # Displays the window to the screen\u2019s center\n        self.Show()  # Shows the Frame\n\n# Create Window\nwindow = Window(&quot;WxPython GUI Application Demo&quot;)\n\n# Execute the main GUI event loop\napp.MainLoop()\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\">Output<\/h2>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"513\" height=\"358\" src=\"https:\/\/www.askpython.com\/wp-content\/uploads\/2022\/08\/wxPython.jpg\" alt=\"WxPython\" class=\"wp-image-33404\" srcset=\"https:\/\/www.askpython.com\/wp-content\/uploads\/2022\/08\/wxPython.jpg 513w, https:\/\/www.askpython.com\/wp-content\/uploads\/2022\/08\/wxPython-300x209.jpg 300w\" sizes=\"auto, (max-width: 513px) 100vw, 513px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Summary<\/h2>\n\n\n\n<p>In this article, we used wxPython to create a simple GUI application. wxPython toolkit can be used to create all sorts of GUI with numerous functionalities. The code itself is very simple and verbose. I hope this article helped to understand the key terms used in wxPython and also get an overview of structural hierarchy for the same.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Reference<\/h2>\n\n\n\n<p><a href=\"https:\/\/www.wxpython.org\/pages\/overview\/\" target=\"_blank\" rel=\"noreferrer noopener\">wxPython: The GUI Toolkit for Python<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Additional Reads<\/h2>\n\n\n\n<p><a href=\"https:\/\/www.askpython.com\/python-modules\/pysimplegui\" target=\"_blank\" rel=\"noreferrer noopener\">PySimpleGUI: An easy way to create GUIs in Python<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>wxPython is a cross-platform GUI toolkit for Python programming language. It was developed by Robin Dunn along with Harri Pasanen and Edward Zimmerman in 1995. wxPython helps to create robust graphical user interfaces which can be customized depending upon the use case. Its easy, user-friendly, and simple to understand. It is implemented as a set [&hellip;]<\/p>\n","protected":false},"author":43,"featured_media":33411,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-33401","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-python-modules"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/www.askpython.com\/wp-json\/wp\/v2\/posts\/33401","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.askpython.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.askpython.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.askpython.com\/wp-json\/wp\/v2\/users\/43"}],"replies":[{"embeddable":true,"href":"https:\/\/www.askpython.com\/wp-json\/wp\/v2\/comments?post=33401"}],"version-history":[{"count":0,"href":"https:\/\/www.askpython.com\/wp-json\/wp\/v2\/posts\/33401\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.askpython.com\/wp-json\/wp\/v2\/media\/33411"}],"wp:attachment":[{"href":"https:\/\/www.askpython.com\/wp-json\/wp\/v2\/media?parent=33401"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.askpython.com\/wp-json\/wp\/v2\/categories?post=33401"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.askpython.com\/wp-json\/wp\/v2\/tags?post=33401"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}