This article discuss the methodology that makes “Classic Window Form Application” responsive with custom coding. Before going forward, we must understand what is responsiveness, why responsive behaviour is so important and why responsiveness is such a “big thing”. A short and crisp definition of responsiveness would be the ability to scale the controls and images of an application to make it look good on all devices(desktop, tablets, and mobiles). With responsive approach of designing websites and applications gaining such popularity that developers of application and websites are much more bound to follow responsive patterns. As we know that by default classic window form applications does not support responsive behaviour as it lacks Html and CSS. This lacking makes it difficult for window form applications to compete against tablet applications designed on android or on IOS. Though window form application suffer with this problem. But, there are ways with which we can achieve optimum level of responsiveness. This could be done if we define the position and size of our controls as a certain percentage of our application window size.
Why bother about making window forms application responsive when we have alternative options like WPF and Universal window applications?
Well in most of the cases we can opt for other options. But when our application needs to do work in conjunction with some sort of external devices like scanners or printers. There are very strong possibilities that SDK’s of those hardware may not be compatible with these newer alternatives like (WPF, Universal Window Applications).
Also, there may be cases where client want to use “Window Surface”(touch screen) to support windows version of the application. And just like any other tablet application based on Android or IOS, your application too, is expected to be responsive. This article provides you an approach to find a solution to such specified problems.
Step One :
Open Visual Studio, navigate to File menu, select New and click on Project and Choose “Window Form Application ” template.
Step Two :
Once the solution is ready add a user control to the solution. Each user control will act as a new page and every user control will be rendered onto a single window form.
Next add a control to User Control (screen). In my case I will add a label. So I will drag and drop a label onto this user control. Now change the text of the label added.
Step Three :
In this step we discuss the approach which will transform the position, size of control, font size of our control according to the changing size of our application window. This step itself consist of three sections.
Section a) Manipulate starting position of a control on application window.
X = this.Location.X ( x-axis starting point of application window)
Y = this.Location.Y ( y-axis starting point of application window)
app_win_Width = this.Width (Application window’s width)
app_win_Height = this.Height (Application window’s height)
- For manipulating horizontal position of the control:Suppose we want our control to always maintain a distance “K” from horizontal starting point of our application window such that “K” is some percentage of “app_win_Width” (i.e 1/3rd of app_win_Width) then our control’s X-axis starting point “M” will be –
M = X + (1 * app_win_Width ) / 3
- For manipulating vertical position of the control:Similarly if we want our control to always maintain a distance “L” from vertical starting point of our application window such that “L” is some percentage of “app_win_Height” (i.e 1/3rd of app_win_Height) then our control’s Y-axis starting point “N” will be-
N = Y + (1 * app_win_Height)/3
Therefore in order to maintain relatively constant position of a control on application window we need to always keep the value of
(M,N) = ( X + K , Y + L)
Section b) Manipulate size(height, width) of our control according to changing size of application window.
In order to maintain the size of a control relatively constant according to changing size of application window, we need to keep height of the control relatively constant to the height of application window and width of the control should be relatively constant to the width of application window. This could be done if we keep “const_Width_Control” as a certain percentage of “app_win_Width” and “const_Height_Control” as a percentage of “app_win_Height”.
Section c) Manipulate font size of a control according to the changing size of the application window.
For this part we need to manipulate our control’s font size w.r.t changing width of application window “app_win_Width”. I have done something similar in the last line of function
“CustomResponsiveLayout”(see code snippet below) , Over there I have maintained my control’s font size to be always 1/100 of my application window’s width.
Step Four :
Since we have already added control (label) on the user control UserControl1 and now we know how to transform x,y (starting coordinates) of label1 w.r.t changing application window’s dimensions. So the questions arises what all are the events where we need to use this transformation code. All the events are in the form where we are rendering our user control UserControl1 and their list are as follows.
- I. ControlAdded
- II. ResizeEnd
- III. SizeChanged
- IV. Load
As we have already discussed the process of making our control responsive in the “Step 3” and now we know the code that makes our control responsive(see code snippet 1.6) therefore we will call the function “CustomResponsiveLayout” in the above mentioned list of events (see code snippet 1.7) .
This function above checks which user control is loaded into the form right now and accordingly it calls the function responsible to make all the controls of current user control responsive.
So after we will call the method LoadedPage() in all of the above events we will run our project by clicking green color “Start” button and then try to resize the window and you shall see the responsive behavior of the label.