C# How to Auto Size Windows Forms & Controls

okay so welcome back today we're going to talk about a couple concepts related to your c-sharp Visual Studio Windows forms application and specifically we're going to talk about Auto sizing and auto scaling the forms as well as the controls inside of those forms as you can see here I've got an application with two forms one has got a text box and labels and some buttons the other one on top has basically got a chart and we're Gathering data and it is charting it in real time and what we're going to talk about is first how do we make sure that our forms each of these forms is the right size relative to the display the monitor that we're displaying it on so for example if I develop this application on a 1920x1080 monitor here you can see it's two forms that have Heights that are about 50 percent of that 1080 height of the Monitor and they'd fit nicely however what if I decide to run the same application on for example a laptop that's only a 1360 by 760 or whatever resolution display it's quite likely that these forms are not going to fit any longer so the first thing we're going to talk about is how we can make sure that our forms are Auto sized Auto scaled relative to the size of the display monitor that they are being displayed on the second thing we're going to talk about is okay once we've got our form sized correctly how do we make sure that the controls are sized Auto scaled correctly as we change the size of the form so for example let's say I've got this chart up here and I want to resize it so I go down to the corner and select the arrows and I can resize it you can see wow this chart is auto scaling Auto sizing to match the new size of the form as I make it bigger now one thing to keep in mind you can see that the chart is resizing however if you've noticed the fonts do not resize so this is one thing you're going to have to keep in mind that's one of the gotchas you may have to deal with if you really care so then I can resize it back to where it was and you can see the fonts stay the same size but the chart rescales down to the original size now I can also resize this by using the maximize button and you can see it very nicely rescales the chart to full screen so let's take a look at a simple c-sharp application and see how we can deal with those topics so here is a simple C sharp Visual Studio Windows forms application I developed and I dress through some text box some labels some buttons and a chart on here to help us understand how this all works but the first thing we're going to do is we want to make sure that the form itself ignore all these controls the form itself when we start it up how do we size it appropriately based on the display resolution well the first thing we need to do is we need to execute some code when this form is started up when it's loaded so how do we do that well we need to access the form load event handler so that we can put some code in that event handler to make sure we have the right size of the form so to do that let me get out of here and go to the designer and all we have to do is double click on the form not on these controls but on the form and you will get this event handler we can now add some code to size it appropriately now it turns out there's only two lines of code we need in order to do this the first one is we first have to figure out what is the display size what is the working area it's called of the monitor that is being displayed on to do that we have to use the system Windows Form screen green class and in this case we're going to access the primary screen which is our main Monitor and we have to get what's called The Working area which includes the area outside of the taskbar basically where the form can be shown and it tells us what is the present working area of that display so in our case it might be 1920 by 1080 minus the taskbar and that's going to give us a rectangle defining that area so once we have that we can now assign that to a systemdrawing.rectangle which is basically just four integers defining the location and size of the rectangle and we're going to call it working rectangle so once we have that now we know the display size we can now say okay we want to make our form in our case this form one we want to make our form a certain percentage of that width and height so what we can do is say this dot size and this refers to the form is a new system drawing dot size and what we're going to do is we're going to take that working rectangle.width and the workingrectangle dot height and in our case we're just going to say okay I want the width and height of the form to be 50 of the display so 0.5 times working rectangle.width and 0.5 times working rectangle down height and then we have to convert those to integers and this dot side is new system drawing dot size and that now gives us a size of the form that is always 50 percent of the screen size now we can also Define the location basically the upper left corner of that form as this dot location is a new system drawing dot point and I'm just going to say it starts at 10 comma 10 from the upper left corner so now I can run this and I've got a form that is starting at 10 10 it's not at the exact upper left but it's 10 pixels away and it is a height and width that are half the display height and width so that's the very simple way that you can set the form dimensions and location based on the particular display you're using so now that we've got that let's talk about how we can set these controls to also resize as we just the size of the form so now let's talk about how we can Auto scale and move the controls inside a form as we change the size of the form now I've got a simple application here I've just added a text box you see on the left a label a button a chart on the right and another button up here and what I want you to do is I as I move this form and resize the form I want you to look at the different controls and see how they respond so I'm going to grab the corner here and I'm resizing and first of all you can notice that the text box all sides of it are stretching and squishing as I move the form so as I move the form to the right the text box it's getting wider and as I move it down the text box is getting longer now notice that the label isn't changing its Dimensions it is just moving with the bottom of the form and the same with the button it's just moving with the bottom of the form the chart is moving with the right hand side of the form but it is also stretching as I move it up and down the top and bottom are stretching but the left and right aren't stretching right and the button on the top is just moving it's not stretching so the key thing you need to be aware of is that each control you see here and all the other controls have a property called an anchor and the anchor is what's going to allow you to Define how your controls respond as you move the form as you resize the form now what is an anchor well I want you to look at this chart here the right hand side of the chart the white relative to the right hand side of the form no matter how I move this form that distance never changes so the chart right hand Edge is anchored to the right hand edge of the form which means the distance between them never changes no matter what I do it's anchored and that distance will never change however the left hand side of the chart is not anchored to the left hand side of the form therefore as I move it left and right that distance constantly changes so it is not anchored to the left hand side now on the top and bottom are they anchored well as I move this it is stretching the chart which means it is anchored to the bottom the distance between the chart bottom and the form Bottom never changes all right so the anchor defines whether or not an edge of a control is locked in distance to the edge of a form now you can see that the text box all four sides are anchored to the corresponding sides of the form because no matter how I move it the distance between the edges always maintains the same which means it squishes and stretches as I move the form and it's the same things we saw with the chart in the other application as we increase the size it automatically scales to fit now the label you can see the distance between the bottom of the label and the bottom of the form is always the same and the distance between the left of the label and the left of the form is always the same but the distance between the right and the right of the form and the top and the top of the form are not anchored so we know that we have an anchor on the left hand side and the bottom now the buttons see if you can figure out what anchors we have on the buttons this button is anchored to the right hand side in the bottom this button is anchored to the right hand side and the top so anchors are what help you to make sure that your controls automatically scale as you want them to now keep in mind there are limits here so if I have my button on the bottom anchored to the bottom and the right hand side as I move this over it's going to go over the label so when you're doing this you need to be aware that you know the label font as we said before that's not changing the font and the button is not changing so you need to be aware of you know maybe you need to set minimum limits you can't make the form this width or you're going to have to change the fonts now another thing you can notice in the text box as I move it it automatically wraps the text depending on the width so they're all the text fits in the text box so we're going to have to look at anchors and we're going to have to look at how we can do this word wrap in the text box so now let's take a look at our simple C sharp Visual Studio Windows forms application where I've got a single form and I've drag and dropped a text box a label two buttons and a chart now let's see how do we access this anchor property so I'm going to select my text box and over here text box what I'm going to scroll up to the top and you can see here under a is Anchor and it's got a drop down if I select the drop down you can see that the way to select the anchor is to highlight these squares at this point when none of them are highlighted there is no anchor on the text box if I select this one it's anchored to the right hand side of the form this one is anchored to the Top This one is anchored to the left and this one is anchored to the bottom with all of these selected my text box is going to stretch as I increase the size of the form and it's going to get smaller proportionally as I decrease the size of the form now one of the great things about the designer here is you can watch the response without having to run the application just select the form and rescale it and you can see the responsible the controls as I rescale it now I can go back to my text box and change this and say take away the right hand side and I select the form and rescale it and you can see all three top bottom and left are anchored but there is no longer an anchor on the right hand side so you can do that with all of the forms you select the form you scroll up to Anchor hit the drop down and you can select now um the same thing goes for a chart here I've got the anchor set to top bottom and right now the thing about the labels and the buttons you need to be very careful about first of all the label does not stretch it does not change Dimensions it only gets anchored to two sides at the most so you can only select maximum of two sides non-oposing sides for the label so for the label I've got bottom and left but if I select for example if I select the label if I select all of them you're going to get some strange Behavior so I'm going to take the form and you can see the label is just going to sit there so I encourage you don't select more than two non-oposing sides for the label same thing for the button if I select the button I've got the bottom and the right so you can see they're not opposing if I select for example the right and the left and then resize you can see it scales the button but as I bring it back it doesn't reset so again the button and the label you have to be very careful don't select opposing sides for anchors now there's one control property that can be kind of confusing and might lead you in the wrong direction so I want to discuss that I want to select this button here and if you scroll up you can see that there is a property called Auto size and you can set that to true or false and you might think that that is involved with auto sizing the button for example as I change the size of the form well that's not what it does what it does is it allows the button to chain size automatically as you change the contents so what does that mean well here's my button what I'm going to do is I'm going to change the font size from 14 up to the maximum which is 72 and you can notice that the button has resized with this new font size that's what Auto size does and I think it does similar for the label whether you need that or not it's up to you but it's really not too relevant when you're talking about Auto sizing based on changing the form size so just so you know that so that's about it for this one if you like any of these videos I encourage you hit the like button subscribe hit the Bell notifications most of all please let others know that we're here so we get some views really appreciate it otherwise take care have a really good day thanks

Channel: EETechStuff

Views: 5,259

Keywords:

Id: bKnpxTulUIs

Length: 16min 21sec (981 seconds)

Published: Thu Sep 14 2023