C#/ Modern Flat UI + Font Awesome Icons, Multicolor, Highlight button, WinForm

hi everyone today I bring you a new tutorial of user interface design modern and multicolored both on de Botton text and icons with the option to keep the button piloted and show the title an icon when the secondary form is open in addition to implementing all resizing options drag deform maximize restore minimize and close the form maybe you're asking how is it possible to change the color of the icons well this is thanks to font to--some in summary this tool allows you to create vector based icons to CSS from a text font format I'm sure many of you have used it when creating pages or web applications where it is really simple to place icons with the custom color and size there are other web fonts however all are only for inclusion and web pages and style sheets then one day it occurred to me why not integrate into desktop applications after all they are only web fonts and we can convert to image format but others had already thought about it well I found three results in the guy cloud repository the third is the one that met all my expectations even published the library indigent packages under the name of fog posted sharp the last update was seven months ago developed by Thomas and Christian with a total of fifteen thousand downloads this is open source you can download the source code from the repository the last change was two months ago but they haven't published it yet you can read all this for more information for windows form 6 classes are available which we can use according to needs the text box and the button are integrated into the visual studio toolbox we can also integrate WPF this is the web font file that contains all the icons well all the credits for these developers but what surprises me is that it only has 15,000 downloads in these two years maybe it's the reason why they don't publish more updates since farm to--some already has 1500 free icons and in this version of the package only 1300 icons are available I sincerely hope you do know abandoned the project because the truth is very interesting and I like the ease of adding icons with custom colors and sizes in our desktop applications and this avoids work tedious to download our design icons with a certain color and size well having said all of the above let's start with the tutorial first we will install the awesome font icons to do this we go to the project right-click and manage nougat packages we search for postal dodge sharp and install once the installation is finished a new tab will be added in the two controls a button in a picture box if these controls are not added automatically add the library manually through the toolbox well let's start designing the main form we add a panel for the side menu in the dock property replaced left to attach to the left we changed the web to 220 pixels finally we change the background color in this case RGB color we add another panel inside the menu to place a logo in the dock property we play stop to attach to the top I will place a height of 140 pixels well now let's add buttons with awesome font icon we attach to the upper part through the dog property we place a height for example 60 pixels in flat style we place flat in flats appearance we set the border size to 0 we look for the font OSEM 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 for example a statistical graphics icon well in the icon char property of the button replaced the name of the icon 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 and it is very difficult to find the icon in the 1,300 icons in this version so an update would be good where you can place the full name of the icon 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 change the color of the font in image alignment we place centered left in the same way for the text we align to the left in relation to texture and image we place image before text we duplicate these icons for example five more buttons we change the text and name of the remaining buttons once finished we select everything and apply a padding of 10 pixels to the left and 20 pixels to the right well now let's see how to change the icons more easily since that is really complicated to change from the designers properties well we go to the solution Explorer deploy the main form and open the form designer we locate the buttons for example the data panel button to this button we will assign any of these graphic icons well replace ourselves on the icon sharp property and place the name of the icon we want to use for example this the icon changed correctly in the same way for the order button we looked for a suitable icon for the use case for example a shopping cart icon we do the same for the missing buttons like a phoenix born from the ashes I'll take care of my own [Music] well we already have all the icons assigned on the buttons we save and close the designer code now we open the form code we import the fun postal dodge sharp library we declare fields privately to store the current button and a panel to apply left border to the button in the constructor we initialize the left edge panel of the button we assign a size for example seven pixels wide and sixty pixels high which is equivalent to the height of the button in the wet you can place the web that you want in this case I'm left with seven pixels finally we need to add the left edge panel of the button to the menu panel controls well now we create the following methods empty type-2 highly active button as parameters an object of the sending button in a caller we create a condition to verify that the button is different from null first we assign the current button with the sending button for this it is necessary to convert the object to the same type of button we change the background color of the button for example RGB color 37 36 81 we change the text color of the button to the color parameter we align the text towards the center we change the icon color to the color parameter we change the ratio text and image the text before image we align the icon to the right now in panel left edge of button we change the background color to the color parameter we assign a new location on the x-axis you can place any in my case 0 on the y-axis replace the current location of the y-axis of the button then we get the location of the y-axis of the current button we put visibility and true and finally we bring to the front well that's all about the button customization and the left edge of the button now we create another method to disable button highlighting we create a condition to verify that the current button is different from null here we simply return the button settings to the default values in background color replaced the original color of the button in the same way for text color we align the text to the left we assign the default color of the icon we show the icon before the text we align the icon to the left finally we invoked the method before highlighting the button and thus deactivate the previous button good and that's all in terms of many buttons now I will create a structure to store a quantity of RGB colors here I already have a list of selected colors this is totally optional you can sand a color directly by invoking the activate button method [Music] [Music] now we create the click events of each button and invoke the activate button method as the first parameter we send the sending object of the event as the second parameter we send a color in my case I will select a color from the caller structure we do the same for the remaining buttons [Music] well let's try the application the highlighting of the button works correctly the color the formats and the left border are applied in the same way the previous button returns to its original state when selecting another well now I will add a logo to restart everything [Music] in name I will play start button here we will simply create a restart method in this we invoke the deactivate button method and hide the visibility of the left edge of the button let's test the application works correctly now we will add the custom title bar to do this we add a panel I will name the title bar in the dark property we connect to the top we assign a height that we want finally we change the background-color well now we add an awesome font image box to show the icon of the current secondary forum or active button we change our name for example current child form icon we opened the forum design our code locate the current child form icon and changed the icon for example a house which means main start form you can change the size finally we change the icon color for example a purple color now we add a tag to show the title we change the text color we change the text home or start finally we change the name for example title of child form we go to the forum code and add the following lines of code in the activate button method be indicate that the icon of the child form is equal to the icon of the current button finally we changed the color of the icon to the color parameter we copy these lines and go to the restart method where we load the default values [Music] [Music] let's test the application works correctly now let's add the function of dragging the form from the title bar panel select the panel select the events tab locate the mouse down event and create the event I will copy the code so as not to lengthen the video we import the interoperability execution 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 now we invoke these two methods in the title bar panel event let's test the application works 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 application works correctly however by maximizing the form the form 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 form which will be equal to the work area of the desk let's test the application it works correctly only here it has a transparent border if you want you can remove the entire edge of the form as we did in other videos however the function of resizing the forum will be eliminated when anchoring towards the sides of the desktop or resizing from the edges of the forum so you would have to code everything again well now let's open secondary forms inside the main form and show the title of the current form we create a method of opening child form name as a parameter a field of type form we declare a forum type field to store the current child forum you we create a condition if child form is different from null we close the current form in this way we will only open a single form that is when opening a form we close the previous form if you want to open multiple forms simply delete these lines of code well we indicate that the child form is not top-level we remove the edge of the forum in the dark property be indicate that you filled the container we need all panel to contain the child form for this we place a panel but first I will place another panel to give a shot of effect [Music] under the title bar now we add a panel to contain the secondary forms name we'll put desktop panel in dog property we place fill to fill in all the remaining space optionally add a background color well in the code we add the child form to the controls on the desktop panel we associate the form data to the panel we bring the form to the front and show them finally we show the text of the form in the title tag well now let's add secondary forms and open in the desktop panel I added a form for each button in the menu panel let's invoke the method open child formed from the button click events as a parameter we send a form instance we do the same for each button and form don't know where I stopped you can't sir I have an object instance error well the error is because I place the form icon and not the current child form field let's test again the application works correctly well now we need to close the current secondary forum when we press the start button so here we simply close the child forum let's test the application works correctly however some controls of the secondary forms leave the area and do not fit the current size it is practically not responsive to solve the problem you must create the secondary forum with the same size of the desktop panel in addition to correctly setting the anchor and thought property according to criteria well here in the main forum you can add some basic elements for example a logo a watch some important data or notification messages as I said if you want your forum to be responsive you must set the anchor property correctly in this case I want the logo to always remain centered for this on the anchor property we place none in this way the logo remains centered even when resizing the forum or maximizing then you must do something similar with the anchor property of all controls on the forum well finally we add buttons to clothes maximize and minimize the form and a close button we simply accept 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 in the minimize button we simply minimize the form let's test the application you it works correctly however the buttons remain in their current position and do not fit the current size to solve the problem we turn to the anchor property again select the three buttons and anchor the controls to the top and right let's test again now everything is correct well that's all in this tutorial you can add more things or you can remove some elements for example if you like something simpler like this well I hope you liked it and until next time

Channel: RJ Code Advance EN

Views: 264,539

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: 5AsJJl7Bhvc

Length: 24min 45sec (1485 seconds)

Published: Sat Jan 04 2020