Form responsive dengan VB.net

 

Cara membuat Form responsive dengan VB.net

 

Di artikel ini kita akan belajar Cara membuat Form responsive di VB.net. responsive adalah sebuah teknik yang digunakan untuk membuat layout form menyesuaikan diri dengan tampilan device atau menyesuiakan sesuai dengan bentuk form.Yang akan kita bahas di artikel ini yaitu responsive berdasarkan location dan size.

Form resvonsive berdasarkan location

1. Buat project baru dengan nama project responsiveFormLocation
2. Jika sudah selesai membuat project maka kita akan langsung dialihkan ke editor form1 (yang menjadi main form).
3. Sebelum menambahkan komponen/toolbox di form1 seting terlebih dahulu properties form1 dengan setting properties sebagai berikut :
   

   Properties	Value
   size	Width 500 height 300

4. Tambahkan komponen/toolbox Button dan seting properties button sebagai berikut :
   

   Properties	Value
   location	X 397 Y 226

5. Untuk melihat perbedaan form responsive dan form tidak responsive kita coba menjalankan program yang kita buat tadi. (Untuk menjalankan program di VB.net kita kukup mengklik F5 ).
   
   gambar di atas adalah tampilan awal form, sekarang kita klik form tombol maximize maka kan terlihat seperti gambar berikut
   
   , sekarang kelihatan komponen/toolbox yang ada di form1 tidak responsive karena belum menyesuaikan atau belum mengikuti sesuai ukuran form. untuk melanjutkan tutorial stop terlebih dahulu program yang sedang berjalan.
6. Klik form1 di bagian event form1 pilih dan klik event Resize kemudian isikan kode berikut :

   Private Sub Form1_Resize(sender As Object, e As EventArgs) Handles MyBase.Resize
           Dim widthForm As Integer = Me.Width
           Dim heightForm As Integer = Me.Height
           Button1.Location = New Point(widthForm - 103, heightForm - 74)
   End Sub

   penjelasan kode :

   – baris 2 dan 3 : membuat variabel untuk menampung nilai dari lebar dan tinggi form.
   – baris 4 : kita lihat disana ada nilai 103 dan 74 itu didapat dari.
   – 103 hasil pengurangan Form1.width dikuragi  Button1.location.X .
   – 74  hasil pengurangan Form1.heigth dikurangi Button1.location.Y.

7. Untuk melihat hasilnya kita jalankan programnya.

Form resvonsive berdasarkan size

1. Buat project baru dengan nama project responsiveFormSize
2. Di form1 setting terlebih dahulu properties form1 dengan setting properties sebagai berikut :
   

   Properties	Value
   size	Width 600 height 300

3. Tambahkan komponen/toolbox DataGridView1 dan seting properties button sebagai berikut :
   

   Properties	Value
   size	width 560 height 176

4. Untuk melihat perbedaan form responsive dan form tidak responsive kita coba menjalankan program yang kita buat tadi. (Untuk menjalankan program di VB.net kita kukup mengklik F5 ).
   
   gambar di atas adalah tampilan awal form, sekarang kita klik form tombol maximize maka kan terlihat seperti gambar berikut
   
   , sekarang kelihatan komponen/toolbox yang ada di form1 tidak responsive karena belum menyesuaikan atau belum mengikuti sesuai ukuran form.
5. Klik form1 di bagian event form1 pilih dan klik event Resize kemudian isikan kode berikut :

   Private Sub Form1_Resize(sender As Object, e As EventArgs) Handles MyBase.Resize
           Dim widthForm As Integer = Me.Width
           Dim heightForm As Integer = Me.Height
           DataGridView1.Size = New Drawing.Size(widthForm - 40, heightForm - 124)
   End Sub

   penjelasan kode :

   – baris 2 dan 3 : membuat variabel untuk menampung nilai dari lebar dan tinggi form.
   – baris 4 : kita lihat disana ada nilai 40 dan 124 itu didapat dari.
   – 40 hasil pengurangan Form1.width dikuragi DataGridView1.Size.Width.
   – 124  hasil pengurangan Form1.heigth dikurangi DataGridView1.Size.Height.

6. Untuk melihat hasilnya kita jalankan programnya.