Resolution Dependent Resizing

We must have observed many web sites where the sizes of the web pages are automatically adjusted according to the screen resolution they are being displayed on. In this blog, we would be discussing how the same feature can be implemented in a Windows Forms Application and also with a Grid control.

YES!!! Whatever be the resolution of the screen, the application will get resized according to it.

While resizing the Form, the Grid will also get resized along with its Rows and Columns and the Font of the text displayed in the grid.

Implementation

Basically, the idea is to use the ratio of the bounds of the screen on which the application is running and bounds of the screen on which the application is developed and resize the components accordingly. The approach includes the following steps. Step 1. To find the ratio, ‘Screen’ class is used to find the bounds of the screen on which the application is running and the bounds of the screen on which the application is developed. The bounds on which the application is developed are to be used as constant and that is to be set by the developer as per the screen on which the application is being developed. Here we have used 1024 X 768 screen resolution to fulfil the purpose. Here is the code snippet for implementing the same:

Dim widthRatio As Single = Screen.PrimaryScreen.Bounds.Width / 1024  
Dim heightRatio As Single = Screen.PrimaryScreen.Bounds.Height / 768  

Step 2. After retrieving the ratio, the Form is scaled and the Font size of the text in the grid is changed according to the ratio calculated.

Dim scale As New SizeF(widthRatio, heightRatio)  
Me.Scale(scale)  
C1TrueDBGrid1.Font = New Font("Verdana", C1TrueDBGrid1.Font.SizeInPoints * heightRatio * widthRatio)  

Step 3. As the font size will increase, the rows and columns in the grid also need to be resized. Therefore, AutoSize method is called for all the rows of the grid such that the rows adjust there size according to the Font size of the text and Width of the Columns is adjusted according to the width ratio. It includes all the rows and columns of the grid including the GridCaptionRow and the ColumnCaptionRow.

For j As Integer = 0 To C1TrueDBGrid1.Splits(0).Rows.Count - 1  
    C1TrueDBGrid1.Splits(0).Rows(j).AutoSize()  
Next  
For j As Integer = 0 To C1TrueDBGrid1.Splits(0).DisplayColumns.Count - 1  
    C1TrueDBGrid1.Splits(0).DisplayColumns(j).Width = C1TrueDBGrid1.Splits(0).DisplayColumns(j).Width * widthRatio  
Next  
C1TrueDBGrid1.Splits(0).ColumnCaptionHeight = C1TrueDBGrid1.RowHeight  
C1TrueDBGrid1.CaptionHeight = C1TrueDBGrid1.RowHeight  

Step 4. To make it more compact and handy, this feature can be implemented in the KeyDown event of the Grid. In this event, check if the (say) F2 key is pressed and resize the Grid in case it is. In addition to this, the grid can be resized to its original bounds back when (say) F3 key is pressed. For this, use the KeyCode property of KeyEventArgs class in the KeyDown event.

Private Sub C1TrueDBGrid1_KeyDown(sender As Object, e As KeyEventArgs) Handles C1TrueDBGrid1.KeyDown  
    If e.KeyCode = Keys.F2 And f2_Pressed = False Then  
        f2_Pressed = True  
        Dim widthRatio As Single = Screen.PrimaryScreen.Bounds.Width / 1024  
        Dim heightRatio As Single = Screen.PrimaryScreen.Bounds.Height / 768  
        Dim scale As New SizeF(widthRatio, heightRatio)  
        Me.Scale(scale)  
        C1TrueDBGrid1.Font = New Font("Verdana", C1TrueDBGrid1.Font.SizeInPoints * heightRatio * widthRatio)  

        For j As Integer = 0 To C1TrueDBGrid1.Splits(0).Rows.Count - 1  
            C1TrueDBGrid1.Splits(0).Rows(j).AutoSize()  
        Next  
        C1TrueDBGrid1.Splits(0).ColumnCaptionHeight = C1TrueDBGrid1.RowHeight  
        C1TrueDBGrid1.CaptionHeight = C1TrueDBGrid1.RowHeight  
        e.SuppressKeyPress = True  

    ElseIf e.KeyCode = Keys.F3 And f2_Pressed = True Then  
        f2_Pressed = False  
        C1TrueDBGrid1.Size = tdb_Size  
        Me.Size = frm_Size  
        C1TrueDBGrid1.RowHeight = row_Size  
        C1TrueDBGrid1.Font = font_Tdb  
        C1TrueDBGrid1.Splits(0).ColumnCaptionHeight = C1TrueDBGrid1.RowHeight  
        C1TrueDBGrid1.CaptionHeight = captionheight  
        For j As Integer = 0 To C1TrueDBGrid1.Splits(0).DisplayColumns.Count - 1  
            C1TrueDBGrid1.Splits(0).DisplayColumns(j).Width = col_Size  
        Next  
        e.SuppressKeyPress = True  
    End If  
End Sub  

Step 5. To get the application back to its original bounds, it is required to store the original sizes of all the components of the application into some variables (which can be done in the Form's Load event). Therefore, those variables can be used while restoring the application to its original size.

tdb_Size = C1TrueDBGrid1.Size  
frm_Size = Me.Size  
row_Size = C1TrueDBGrid1.RowHeight  
col_Size = C1TrueDBGrid1.Splits(0).DisplayColumns(0).Width  
font_Tdb = C1TrueDBGrid1.Font  
captionheight = C1TrueDBGrid1.CaptionHeight  

And, we are done with a full-fledged resolution dependent WinForms Application ;-) Download Sample