Modern Flat UI, Drop-down/Slider Menu, Side Menu, Responsive, Only Form - C#, WinForm

hi everyone welcome to my first video this time we will create this flat and modern user interface with side menu drop-down sub menus the option to open a single form in a panel and how to make a user interface responsive or adaptable to any size for example the logo always remains in the center of the panel despite resizing the form similarly with user controls such as data grid view text boxes buttons labels among others well to achieve a responsive user interface or adaptable to any size we simply need to set the anchor and dock property depending on the objective you want to achieve also the use of these properties is the trip to achieve deployable and adaptable sub menus while it is true that windows forum is very limited to these things but quiet everything is possible and today I will teach you the easiest and fastest way with a few lines of code applying logic and imagination well let's start with the tutorial we open visual studio in my case the 2015 version you can do it in any version of Visual Studio either 2008 2019 or other we create a new windows form application project we put a name for example media player first I will change the font size we establish a considerable size of the form well we create the side menu for this we add a panel we set a background color in my case our RGB color now in the dock property we set to the left that is we attach to the left we sent a width of 250 pixels we change the name to side menu panel we add a panel inside the side menu to add some logo or data in the dock property we change to top to attach to the top we add a button similarly we change the dock property to top to attach to the top we set the height of the button at 45 pixels this button will be used to open the playback media and will have a drop down submenu to do this we add a panel we change the background-color in the same way on the dock property we establish top to attach to the top we add a button in the submenu panel we set a height of 40 pixels and attach to the top through the dock property we add more three buttons or the necessary buttons we adjust the height of the submenu panel we changed the name of the button to media button we also change the name of the sub menu panel to media sub menu panel finally we customize the buttons we change the style to flat in appearance we remove the edge we change the color of the font we do the same for the sub menu buttons you can change the colors when the mouse passes over the button and clicks on the button select all the buttons and align the text to the left in the media button we added ten pixel panning to the left similarly for the submenu buttons we add a 35 pixel padding to the left I will add some buttons and submenus to avoid problems the order in which the controls are created is very important I [Music] will change the labels of the main buttons this will be the button to manage the playlist this one to open the equalizer we changed the name of this panel to playlist submenu panel we do the same for the other buttons and submenu panels [Music] breathe [Music] once finished placing the respective names and labels of the buttons and submenu panels select the main panel from the side menu and change the automatic scrolling property to true in this way you can navigate in all the menu components in case the form is small I worry sighs the forum to 950 wide and 600 high I will also set the minimum form size you can add values that you find convenient however is optional to do so well now we will code the form to do this right click view code we create a method with no name return customized design in this method we simply hide the submenu panels to do this we said the visible property to false for both the media submenu panel playlist submenu panel and tools submenu panel you can do this directly from the panel properties I do it this way so that it can be understandable and clear here you can have other ways to customize the design finally we invoke the method in the constructor it must be after the method of initializing components we create another empty type method to hide the submenu in this method we will hide the submenu panel that has been previously shown we add a condition if the media submenu panel is visible we hide it by setting the visible property to false in the same way for the playlist submenu panel and tools submenu panel we create another empty type method to display the submenu well.all submenus are panels therefore as a parameter we indicate that it is of type panel of submenu name we create a condition if submenu panel is hidden we show the submenu but first we must invoke the method of hiding submenu to hide if there is any open submenu then we show the submenu otherwise that is if the submenu is visible or open we hide the submenu again this will change the visibility of the current submenu or the sub menu shown above finally we invoke these methods from the respective buttons we turn to the design and create the click event of the media button here we invoke the method of show submenu as a parameter we send the media submenu panel we create the click event of each button of the submenu here you will obviously have some lines of code for example to show a form open a web link or open the Windows File Explorer under the codes we invoke the method of hiding submenu obviously after selecting some item from the submenu we must hide the submenu we do the same on all the submenu buttons let's test the application you works correctly we do the same with the missing sub menus and buttons we create the click event of the manage playlist button here we invoke the method of show submenu as a parameter we send a submenu playlist panel we create the click event each sub menu button and invoke the method of hiding submenu we create the click event of the equalizer button this button has no submenu therefore like the sub menus buttons we invoke the method of hiding submenu to close if there is any submenu open we create the click event of the tools button we invoke the method show submenu and as a parameter we send the sub menu panel tools we create the click event of each sub menu button and invoke the method of hiding submenu similarly for the Help button your dreams [Music] well let's try the application [Music] breathe [Music] works correctly I will create regions for each submenu that way have the codes organized this is optional [Music] now we create the functionality of opening child forms we turn to design for this case I will add a playback panel to add the playback bar volume pause etc in your case you can skip this step well we added a panel to contain the child forms I change the background-color we sent the dock property to fill in all the missing space I placed both panels of the same background color so I will change to a different color we change the name for example container panel or child form panel this other to play back panel we go to the code and create a method to open the child forms in the container panel as I said in the introduction of the video we will open a single form inside the container panel if you want to open several forms within the panel you can watch this video or you can modify this method according to your needs well to open a single form it is necessary to close the previous form to do this it is necessary to store the form that opens therefore we declare a private variable of type form of active form name as a value we said no we create a condition effective form is different from nil we close the active form that is if there is an open form we close it now we save the form that opens in the active form variable to do this we create a form type parameter of the child form name then active form will be equal to the child form parameter this way we store the active form and close the form when opening another form well now we indicate that the child form is not of a top-level that is it will behave like a control we remove the border of the form we set the dock property to fill to fill the entire container panel now we add the form to the lid to have controls in the container panel you we associate the form with the container panel in case you put a logo on the panel then we need to bring the form to the front finally we show the child form all right to use the method I will add some forms and insert a logo in the center of the form container panel to have a responsive user interface or adaptable to any size we only need to set the anchor or dock property as necessary in this case I want the logo to always be in the center of the panel to do this we go to the anchor property and deactivate all anchors we add a form you I recommend you create the form with the same size of the container panel without counting the edges of the form in this way we prevent the form from flickering when opening it in the panel I will add another form and we set the same size as the previous form you we add a datagridview in the Anker property we activate all anchors so that it adapts to the top left right and bottom that is responsive to all sides I will add buttons in the Anker property we sent to the bottom and right in this other button we set to the top and left in this way you can control the adaptability of the controls which many know as responsive although it would not be the concrete definition we create the function of closing the form we do the same on the other forum you now let's open the forms from the main menu form we open the click event of some button for example the first button of the media submenu we invoke the method of opening child form in the container panel now I will open the other form from the equalizer button you and that's it let's test the application [Music] [Music] the forms open and close correctly in the same way the controls adapt correctly when resizing the form that is our application is responsive as you want similarly the logo remains centered despite resizing or maximizing [Music] all right I will add the icons and labels each button in panels I have already customized the user interface of this media player maybe in a future tutorial add functionality to play and manage music and videos you can create the custom title bar using a panel in this case I changed the colors of the title bar from the Windows 10 customization alright that's all in this tutorial I hope you liked it and until next time

Channel: RJ Code Advance EN

Views: 598,944

Keywords: software, computer, technology, design of modern user interfaces, visual basic, php, java, c#, login, design flat login, computacion, software development, web programming, information systems development, JavaScript, Visual Basic, Software Patterns, Architecture Patterns, Design Patterns, Language Patterns, Software Engineering, Systems, Web pages, windows form, mvc, layers, objects, POO, object-oriented programming, mysql, mariadb

Id: JP5rgXO_5Sk

Length: 19min 46sec (1186 seconds)

Published: Mon Sep 16 2019