VB/ Modern Form + Font Awesome Icons, Multicolor, Highlight button, WinForm-Visual Basic .NET

hi everyone in the previous video was made this modern and multicolored user interface in the c-sharp language with the option to keep the button piloted and show the title an icon when his secondary form is open font Olson icons were used integrated into the font Olsen sharp dot library developed by Curtin and Thomas now we will do this same project in the visual basic language well let's start with the tutorial first we will install the font tous icons to do this in the project right-click and manage nougat packages we look for phonto soldad sharp and install once the installation is finished a new tab will be added in its two controls a button in a picture box in Visual Studio 2017 and 2019 these controls are added automatically in previous versions of Visual Studio you have to manually add these controls to the toolbox well let's start designing the main form we add a panel for the side menu in the dark property replaced left to attach to the left we changed the web to 220 pixels finally we change the background color in this case an RGB color we add another panel inside the menu to place a logo in the dark property replaced top to attach to the top I will place a height of 140 pixels we insert and picture box for the logo well now let's add buttons with font pulse icon in the dock property we play stop the couple to the top we adjust the height for example sixty pixels in flat style we place flat in flats appearance we set the border size to zero we change the color of the font we look for the font wholesome tab and assign an icon you can use any of these icons available in the library version you can use the search engine to find the name of the icon faster however only a small inconvenience it is very difficult to locate the icon since it only allows you to place a character for the search well for now I will leave it with this icon and later I will show you the fastest way to place the icons well we chose an icon color we change the size for example 32 pixels we align the text to the left in the same way for the icon we line up to the left in relation to texture and image we place image before text finally we apply a padding of 10 pixels to the left and 20 pixels to the right we add a number of necessary buttons for example five more buttons we change the text and name of the buttons well now let's see how to change the icons more easily since it is really difficult to choose an icon from the designers properties alright we open the designer code to do this we go to the solution Explorer display the form and select any of the methods we locate the buttons for example the data panel button we place ourselves on the icon sharp property and place the name of the icon we want to use for example a chart line the icon changed correctly in the same way for the order button we look for a suitable icon for the use case for example a shopping cart icon we place ourselves on the icon chart property and place the name of the icon we do the same for the remaining buttons [Music] well we already have all the icons assigned on two buttons now we will add the title bar for this we insert a panel I will name the title bar in the dark property be attached to the top we assign a height that we want finally we change the background-color well now we add a fond pulse icon picture box to show the icon of the current secondary form or active button we choose a default start icon we change the color for example purple now we add a label to show the title we change the text color we change the text finally we change the name for example form title in the same way we changed the name of the icon for example current form icon once the design is finished we opened the farm code we import the font post of Dodge sharp library we declare fields privately to store the current button and a panel to apply left border to the botton in the constructor we declare the constructor and initialize the left border of the button we assign a size for example seven pixels wide in height we place the height of the button that is sixty pixels or you can assign the height you want or the width you want finally we need to add the left border of the button to the menu panel controls well now we create the following methods of empty type to highlight the active button as parameters and object of this sending button in a custom color we create a condition to verify that the button is not null start customizing the button first we assign the sending button to the current button for this it is necessary to convert the object through the same type of button change the background color of the button for example RGB color 37 36 81 we change the text color of the button to custom color parameter we change the color of icon to custom color parameter we align the text to the center we align the icon to the right we change the ratio text and image to text before image now in the left border of the Baden we change the background color to custom color parameter we assign a new location on the x-axis you can place any in my case 0 on the y-axis replaced the current location of the y axis of the botton we put visibility and true and finally we bring to the front now we will change the icon of the title bar to the icon of the active button or current form finally we assign the current custom color well that's all in terms of button customization now we create another method to disable button highlighting we create a condition to verify that the current button is not nothing here we simply return the default values of the button configuration in background color we place the original color of the button in the same way for text color we assign the default color of the icon we align the text and icon to the left and show the icon before the text [Music] all right and that's it for many buttons now we create the click events of each button and invoke the activate button method as the first parameter we need to send the sender object and a custom color then we put the sender object of the event and a color for example a C green or you can assign an RGB color we can create a list or structure of custom colors however in case I want to use the colors with all forms it will be better to declare the colors in a separate file be it a class or a structure in my case I will create a structure to store a listing of RGB colors here I already have a list of selected colors this is totally optional you can send a color directly by invoking the method as indicated above [Music] well I have already created a list of colors now we can select the color from the structure for example the color one we do the same for the remaining buttons and select a different color [Music] well that's it I will increase the zoom of the text editor and be able to see the code better well let's test the application the button piloting runs correctly the color the formats the left border and the icon of the currently selected button are applied however the previous button does not return to its original state when selecting another to solve the problem we must invoke the disabled button method before highlighting the button let's test again runs correctly well now we will create a method to open secondary forms within the main form and show the title of the current open form to do this we add a panel named put desktop panel in dog property replace fill to fill in all the remaining space optionally we add a background color now let's add secondary forms and open them in the desktop panel I added a form for each button in the menu panel well we go back to the code and create a method of opening a child form name as a parameter a field of type form we declare a forum type field to store the current secondary forum we create a condition if current child forum is not empty we close the current forum and store the forum parameter in the current form field this will only open a single forum in the desktop panel that is when opening a forum we close the previous forum if you want to open multiple forms on the desktop panel simply delete these lines of code well we indicate that the child forum is not top level we remove the border of the form in the dark property we indicate that you filled the container now we add the child form to the of the desktop panel you we associate the form data to the panel we bring the form forward then we show the form finally we show the text of the form and the title label [Music] well now let's invoke the open forum method from the click events of each button as a parameter we send a form instance we do the same for each button and form [Music] the form opens in the desktop panel and the title is displayed correctly well now we close the secondary form open and we activate the button by clicking on the logo we create the logo click event and here we simply close the current secondary form provided that the current form field is not empty this to avoid instance errors now we create a method to reset all the default values first we disable the button we hide the visibility of the left border of the button we return to set the default icon of the current form icon in the same way we return the color of the icon finally we assign a default title of the main menu we invoke the method after closing the secondary forum let's test runs correctly we can add necessary elements to the main start form for example a logo or notification messages the elements are shown again when the forum is closed since these only overlap many times they comment how to make controls or forums responsive to the current size of the forum for example I want the logo to always remain centered when resizing or maximizing the forum to do this and as I have always told you we must simply adjust the anchor property in this case we deactivate all anchors in this way the logo will remain centered let's test runs correctly you must do something similar for all controls either by anchoring to the top left right or bottom or adjust the dog property as was done to design the form you must also create the secondary form with the same size of the desktop panel and use the same default font size in the forms well now let's add the function of dragging the form from the title bar panel well I will copy the code so as not to lengthen the video in the designer select the panel select the events tab locate the mouse down event and create the event now we invoke the two previous methods in the title bar event we import the runtime Interop services library this library allows us to use native libraries of the operating system in this case the user 32 library which allows you to move the form through the most event let's test the application the form can move correctly now we can remove the title bar for this we turn to the constructor in this forum text we place an empty string we remove the control box and activate double buffer to reduce the flickering in the forum graphics let's test the title bar has been removed correctly however the border of the forum are still maintained in this way we've maintained the functionalities of dividing or maximizing the forum by anchoring it to the top left or right of the desktop if you wish you can remove the border of the forum completely but these functionalities will be lost so you would have to code everything from not well here a small inconvenience by maximizing the forum the forum occupies the entire screen hiding the taskbar and that hurts if you want to work with several applications to solve the problem we must set the limits in the maximized forum which will be equal to the work area of the desktop let's test it runs correctly only here it has a transparent border that is not elegant and it is possible to resize the form from the borders in a maximized state to solve the problem we must eliminate the border of the form completely by maximizing the form to do this we go to the designer select the form and in the events tab we look for the resize event if the form is maximized we remove the border of the form otherwise we reestablish the border of the form let's test the forum is fully maximized in the work area of the desktop and it is no longer possible to resize the forum from the borders well finally add buttons to close maximize and minimize the forum in the close button we simply exit the entire application on the maximize button if the state of the window is normal we maximize the form otherwise we restore the size of the form you in the minimize button we simply minimize the form let's test it runs correctly however the buttons remain in their current position and do not fit the current size to solve the problem as I indicated we turn to the anchor property select the three buttons and anchor the controls to the top and right let's test again the buttons remain in the same position remember that to have a control or responsive form in this type of user interface we must create the secondary form with the same size of the desktop panel in addition to using the same type and default font size of the form as you notice the size of the form changed considerably it is for this reason that many times the controls of your secondary forms do not attach correctly to the desk top panel of the main form also remember that you must adjust the anchor property properly for example I want these two buttons to remain in the lower right part of the form then we simply anchor to the bottom and right runs correctly on the other hand we should optionally establish a minimum size of the main form for example the same default size or reduce a few pixels in this way we set the limit by shrinking the form and keeping a good view of the form well that's all in this tutorial you can add more things or you can remove some items I hope you enjoyed and see you again

Channel: RJ Code Advance EN

Views: 153,400

Keywords: Modern form, c#, vb, .net, windows form, ui, modern flat ui, user interface, font awesome, icons, colors, multicolored, highlight button, open form, panels, customize button, java, web pages, applications, css, web font, html, desktop, modeler

Id: tns3wzUDp9k

Length: 24min 16sec (1456 seconds)

Published: Tue Jan 14 2020