Switch Multiple Pages in Tkinter Modern Window | Modern Toggle Menu | Tkinter Modern GUI | Part 1

hello everyone welcome to the teiner Hub in this video we will build a teiner program which will allow us to switch multiple pages in the teiner window by clicking these toggle menu options and if you notice when I am clicking these toggle menu options then here this indicator is switching to the clicked page option so in this video we will create this modern looking toggle menu and also we will create the switch multiple Pages functionality which will allow us to switch multiple frames like switching multiple pages and also if you notice when I am clicking this toggle menu button then this toggle menu bar is extending sliding l means it's extending in a smooth continuous motion so this video is included in two parts of the videos and you are watching the first part of the video and the second part of the video link will be available in the descript description box and also in the pin comment section below so without wasting any time let's start to create this program here is the basic code of teiner here you can see the teiner basic window appears so first we will create this menu bar this menu bar is a frame which we will resize and we will will set the background color to this Frame and we will pack this frame in the root window and we will set the frame side in the left and also we will fill this frame in the Y AIS which means we will fill this Frame from top to the bottom and also we will set the frame width to make this frame in a side menu bar shape to set the menu bar frame width we need to use the frame pack uncore propagate method because by default a packed frame automatically adjusts its size to accommodate their child widgets within it basically the pack uncore propagate method is used to control that how a frame recy is itself in relation to its packed child widgets by passing The False value to the pack underscore propagate method flag argument the menu bar frame will not automatically resize itself the menu bar frame will resize in a fixed size which we will specify here I will configure the width to the menu bar frame here I will set the menu bar frame with 45 and also we will set the menu bar frame background color here in this variable I will store the menu bar color hex code because we will use this color many times here I will set the background color to the menu bar frame here you can see the menu bar frame is created and it's filled from top to bottom and the frame width is 45 but also we need to add the spaces between the window and the menu bar frame from the top and the left and the bottom to add the spaces between the window in the menu bar frame simply we just need to add pad Y and Pad X in the menu bar frame now here you can see the spaces are added between the window and the menu bar frame and also this menu bar frame is height-wise responsive because we have filled this Frame from top to the bottom and now we will add these Pages icons in the menu bar frame basically these icons are images which we will display as pages option button so first we will create the toggle menu button here I will open the toggle menu button image using the teiner photo image class here is the all images which we will use in this program these all images download link will be available in the description box now let's see how we will create the toggle menu button here I am creating a button the toggle menu button we will put in the menu bar frame and here I will set the toggle menu button image to the toggle menu button and also here we will set the background color to the toggle menu button which color we have set to the menu bar frame basically the menu bar frame matching background color will hide the toggle menu button button white background which will disturb the toggle menu button image to appear and we will place the toggle menu button in the menu bar frame and here we will set the X and Y position of the toggle menu button here you can see the toggle menu button created and all Al we need to remove this border and you can notice when I am clicking the toggle menu button then the button background is highlighted in white color which is not looking good so let's fix it to remove the button border we need to set the BD value zero BD means border to change the Highlight background color when the button is clicked then here we need to set the active back ground value to the menu bar frame matching background color now you can see the button border is removed and also the highlighted white background is not showing when I am clicking the button and similarly we will create these Pages buttons as we have created this toggle menu button so we will start by creating the homepage button here I will open the homepage button image using the teiner photo image class and now here we will create a button and then we will add the homepage button image to this button here I will set the homepage button image to the homepage button and here I will copy these toggle menu button modifications and here I will apply these modifications to the homepage button and also we will place the homepage button in the menu bar frame and here we will set the X and Y position of the homepage button and also we will set the width and the height to the homepage button and notice setting the width and height to the homepage button will not affect to the homepage button image size it will just increase the size of the actual button here you can see we have created the homepage button and similarly we will create the other Pages options buttons as we have created this homepage button similarly here we will open the Service page button image using the photo image class and here I will copy the code of the homepage button to create the service page button the X position value will be constant for all these buttons but the position value will be different for all these buttons each button will have a 60 plus difference in the Y position and also the width and height will be constant for these all buttons and also we will set the service page button image to the service page button here you can see the service page button is created and similarly we will create other Pages option buttons e e e so we have created the pages option buttons now press subscribe subcribe button if you have not subscribed teiner Hub and now we will start to create the indicator for these Pages options basically this indicator will be a label which we will place with each page option button each page option button will have a separate indicator label so these indicators are labels which we will resize in a small vertical line shape now let's see how we will create these indicators using the label so here first we will create the indicator for the homepage option button to create an indicator we will use the label widget and we will not add any text to the label and we will put this label in the menu bar frame and we will set the background color to this label and the background color will be the color of the indicator and also we will place this label in the menu bar frame and here I will set the exposition value three and this Exposition value will be constant for all these indicators labels and we are creating this indicator label for the homepage option button so here we will set the indicator label WIP position value which is the homepage option button wi position value now let's run this program here you can see the indicator label is created but we need to set this indicator label in a little vertical line shape by setting the width and height to this label we can resize this label in a little vertical line shape so here I will set the height 40 and the width three to this label by setting the height 40 and the width three to this label the label will resize in a little vertical line shape here you can see now it looks perfect now press subscribe button if you have not subscribed teiner Hub so we have created the indicator label for the homepage option button and similarly we will create the indicator labels for these other Pages options buttons here I will copy the code of the homepage option indicator label to create the indicator label for the service page option button here I am creating this indicator label for the service page option button so here I will set this indicator label y position value which is the service page option button wi position value you can see the indicator label is created and similarly we will create the indicator label for other Pages opt options buttons e so we have created the indicator labels for these all pages options buttons and now I will tell you how we will show and hide these indicators by clicking these Pages options buttons basically we will create functionality which will show only the click page option button indicator and other indicators will be hidden but before I will tell you how we will hide these indicators labels by setting the menu bar background color to these indicator labels you can hide these indicator labels in the menu bar frame so let's see how we will hide these indicator labels here is the homepage option indicator label so here simply by setting the background color to the indicator label which is the background color of the menu bar frame the homepage option indicator label will be invisible in the menu bar frame here you can see the homepage option indicator label is hidden here is actually the homepage option indicator label is present but it's hidden because setting the background color of the menu bar frame to indicator label makes the homage option indicator label invisible and similarly we will hide these other indicator labels similarly here we will set the menu bar frame background color to the indicator labels which will make the indicator labels invisible here you can see all the indicator labels are hidden and initially we will show the homepage option indicator label means when this program will start then the homepage option indicator label will be pre- indicated here is the homepage option indicator label to show the homepage option indicator label simply here I will set the background color white of the indicator label which will make the indicator label visible in the menu bar frame now here you can see the homepage option indicator label is showing and now we will start to create functionality which will show only the clicked page option indicator label so when I will click a page option button then only the clicked page option indicator label will show let's see how we will create this function functionality here in the switch indication function we will create functionality which will show The Click page option indicator label in the switch indication function we will take a argument in the indicator lb argument we will take a indicator label object which indicator label we want to show basically in the indicator lb argument we will pass these indicator labels as argument in the switch indication function we will show the given indicator label to show the given indic Ator label simply here we will set the white background color to the given indicator label object simply using the config method here we will set the white background color to the given indicator label object which will make the given indicator label visible in the menu bar frame and now let's see how we will use the switch indication function to show the clicked page option indicator label basically we will add the switch indication function to these Pages option buttons as buttons command so if a page option button will be clicked then using the switch indication function we will show The Click page option indicator label so first I will add the switch indication function to the homage option button here I will use the Lambda function to add the switch indication function so if the homepage option button will be clicked then we will show the homepage option indicator label then here in the switch indication function of the indicator lb argument we will need to pass the homepage indicator label object to show the homepage option indicator label simply here we will pass the indicator label variable name which is a label object now if the homepage option button will be clicked then the homepage option indicator label will show and similarly we will add the switch indication function to the other Pages option buttons here is the service page option button so if the service page option button will be clicked then we will show the service page option indicator label then simply here we will pass the service page option indicator label object in the indicator lb argument and here is the update page option button and similarly we will add the switch indication function to this button e now let's test the function here the homepage option indicator label is already showing so here I will click to the service page option button here you can see the service page option indicator label is showing when I click the page button let's click to the other Pages option buttons you can see the clicked page option button indicator is showing and also we need to show only the clicked page option indicator label so when I click the page option button then only the clicked page option indicator should be shown and other showing indicators should be hidden let's see how we will show only the clicked page option indicator label to show only the click page option indicator label here in the switch indication function before showing the given indicator label object we will hide all indicator labels so here we will hide all indicator labels before showing the clicked page option indicator label simply by setting the menu bar frame background color to the indicator labels the indicator labels will be invisible in the menu bar frame here we will hide all indicator labels so here all indicator labels will be hidden and then the clicked page option indicator label will show now you can see only the clicked page option indicator is showing now press subscribe button if you have not subscribed teiner Hub so we have created the switch indication functionality and that's for this video in the next part of video we will complete this program thanks for watching this video see you in the next part of the video

Channel: Tkinter Hub

Views: 2,363

Keywords: TkinterHub, tkinter, tkinter new video, Tkinter Hub new video, tkinter toggle bar, tkinter toggle button

Id: hnZqntUpAc4

Length: 27min 29sec (1649 seconds)

Published: Fri May 10 2024