How to create a Fully Responsive Form (Dashboard UI) - C# & WinForms

hello this time i will teach you how to create a completely responsive form in this case this dashboard form since many have been asking me well what we will do is the following keeping a component always centered resizing the panels proportionally together with the form stacking components in case the container size cannot accommodate them and the most complicated part how to dock the controls in the remaining spaces for the latter case it will be necessary a bit of code for the rest just set the properties appropriately all right let's start with the tutorial this i already mentioned in many comments and videos i will emphasize again for those who are just starting out well the simplest and most basic way to have a responsive form is to simply set the dock or anchor property of the controls appropriately to understand better i will add a button to the form for example if we want this button to always be centered on the form we simply need to set the anchor property appropriately by default the controls are anchored to the top and left so to always keep it centered we have to remove these anchors that is set the anchor to none in this way any control will remain centered or in the position that is established now if we want the button to always be in the bottom corner of the form we must anchor the control to the bottom and right [Music] [Music] in the same way we can also anchor the button to the four sides so that it is resized together with the form [Music] well then there is the dock property that lets you dock the control to the top left right bottom or fill the entire container you can combine the anchor and dock property in controls but it is not possible to use both properties in the same control basically with these two properties properly set in the controls you can create a responsive form however there are cases where you need to create more complex forms and these properties will not give you the solution for example a dashboard well in that case we must also resort to the use of panels there are three types of panels flow layout panel simple panel and table layout panel these three types of panel are containers that allow you to organize and group controls each type of panel has its own function flow layout panel allows you to dynamically order the controls that is we can add 10 buttons and indicate how it should flow whether they are stacked with each other vertically or horizontally standard panel acts simply as a container however we can add and move the controls freely which in the other panels have these limitations table layout panel allows you to create columns and rows to hold a single control per cell thus creating sections of proportional or absolute sizes all right with all of the above said let's start creating a responsive dashboard form first we will add a simple panel set the color and dock it to the top [Music] now we add a label for the title we set the size and color we want and remove the anchors to keep it always centered [Music] okay now we will add another panel for the components of the dashboard form similarly we set a color and we will dock it in all the remaining space of the form we also set a padding of 10 to all sides this so that the components are not glued to the border of the form and thus have an elegant design well now we will add a table layout panel to display the charts of the total number of the dashboard we indicate that it only has one row when we increase the number of columns to four we open the edit the rows and columns window since there are four columns we set a width of 25 for each one in this way the width of each column is proportional to the total width of the panel finally we dock the table panel to the top this space here is due to the padding that we set in the container panel now we will design the internal components of the table for this we add a panel we set a background color and we will dock it in the whole cell of the table [Music] a small space is displayed on the edges this is due to the margin property of the panel to remove it we set 0 to all sides then we just set a margin of 10 to the right and bottom now we add labels for the title total number and among others remember to properly set the anchor property for each control accordingly as shown below [Music] [Music] [Music] we remove the right margin of the last panel since it is not necessary [Music] [Music] great the components fit correctly proportionally to the width of the form okay now we will add another table layout panel with a row and two columns in the same way we dock the panel to the top [Music] next we set an absolute width of 350 for column 2 and the remainder for column 1. [Music] well now we will see how to create stackable controls with each other for this we add a flow layout panel in a similar way as previous cases we remove the margin and we will dock it in the whole cell of the table once done we add controls for example two chart controls we set a margin of 10 to the right and bottom [Music] if we decrease the width of the form the charts are stacked vertically down you can change that behavior from the properties in this case i will leave it that way however the control is no longer fully displayed to solve that we must set the auto size property to true of both container panels that is the table and flow panel all right in this fixed-width column i'll add another chart in the same way we set the dock and margin properties [Music] now we add a simple panel dock it to the right and do the same procedures as above [Music] [Music] finally we add the last simple panel dock it to the top and set the same height as the previous panel it should be mentioned that for the purpose of the tutorial docking the panel to fill the remaining space on the form is not going to work [Music] well here the separation between the components is missing for this we add a margin of 10 to the left however the margin property next to the dock property in a simple panel does not work so we must use the padding property of its container [Music] all right we finally add a title and a data grid view to the last panel [Music] [Music] when the charts are stacked the other components are no longer visible to solve the problem we must activate the scroll bar of the form in this case the main container [Music] panel well that's it for responsive design let's test the form [Music] the components adapt perfectly to the size of the form however if the form is much larger these spaces are left empty well that can be fixed by resizing and fit these components at runtime this requires a bit of coding [Music] we create a method to complete the responsive form we define a condition if the width of the form is less than or equal to 450 the width of column 2 of the panel must be equal to the absolute width established in the design so that the width is not very narrow when the width of the form is less i recommend set a fixed and appropriate size for the form also set a minimum size [Music] [Music] all right so let's set the absolute size of the second column of the table to panel when the width of the form is less than or equal to 450 we access position one of the column collection and we set the default absolute width that we set in the designer now if the width of the form is less than the width established in the designer we change the width of the second column of the table panel [Music] to set the proper width of the second column and take up all the remaining space we simply subtract the total width minus the width and right margin of chart 1. [Music] here i forgot to set an appropriate width of the form where the components fit perfectly [Music] finally if the conditions are not met that is the width of the form is greater than the width set in the designer similarly to the above we set the appropriate width of the second column and occupy all the remaining space to do this we subtract the total width minus the width and right margin of chart 1 and 2. [Music] here i made a little mistake in the operation i put the subtraction sign and they should be additions all right this method must be invoked from the form resize on event [Music] [Music] great the second column of the table panel docks properly into the remaining space now we do the same for this panel we set an exact height and set a minimum height of the panel and the form [Music] [Music] [Music] [Music] great the panel fits properly in the remaining space however maximizing or restoring the form doesn't work that's because the resize and the vent is not fired when maximizing or restoring the form from the buttons the quick solution that can be done is to invoke the method from the resize event however this method is executed every time the form is resized or dragged that is for each point of movement of the mouse pointer therefore it will be a lot of load for the form to perform the operations of the form at all times to solve we can define conditions for example execute the method only when the form is maximized however other conditions will be missing to execute the method only once when the form is in normal state [Music] in this way the components adjust to the form on each size change or each time the form is moved so i emphasize again that this presents a heavier work for the form however it is much more dynamic for the experience the user to be able to appreciate that the components are adjusted in real time well it is up to you which method to use whether adjust the components of the form every time the form is resized or only once when the form has finished resizing which is what i recommend so here i present a solution so that it works also when the form is maximized or restored for that we must intercept the windows messages declare the value for the system command maximized and minimized and if the window messages maximize or restore we execute the resize on event and finally run the method to finish adjusting the form components i also added data to the form charts well let's try this method great it works fine although the form got a little slow because i loaded thousands of data to the charts and data grid view well as i mentioned earlier this way the method to finish adapting the components is only executed once when the form has finished resizing therefore the form is much lighter although the user experience is not that good but it is up to you which way to use whether adjust the form components every time the form is resized or only once when the form has finished resizing well that's all in this tutorial i hope you liked it and helped with your doubts on this topic until the next video [Music] you

Channel: RJ Code Advance EN

Views: 79,758

Keywords: Windows Form, C#, VB, .NET, Software, HTML, Modern Forms, software, computer, technology, design of modern user interfaces, visual basic, php, java, design flat login, software development, web programming, information systems development, JavaScript, Visual Basic, Software Patterns, Architecture Patterns, Design Patterns, Language Patterns, Software Engineering, Systems, Web pages, mvc, layers, objects, POO, object-oriented programming, mysql, mariadb, .Net Framework, Custom Controls, SQL

Id: I8ZYsYrdeL4

Length: 23min 39sec (1419 seconds)

Published: Fri Oct 29 2021