Membuat resizable GUI Application menggunakan C# WPF di Visual Studio 2010

Jika kita membuat aplikasi GUI menggunakan C# WPF secara default, maka GUI tersebut umumnya akan terlihat rusak jika mengalami perubahan ukuran, baik itu perubahan ukuran karena layar monitor yang digunakan mengalami perubahan ataupun karena di-resize oleh user. Nah pada postingan kali ini akan diperlihatkan cara sederhana untuk membuat GUI menggunakan C# WPF yang dapat diresize dengan kontrol-kontrol pada GUI tersebut juga ikut ter-resize sesuai dengan ukuran GUI aktualnya. Untuk itu langkah pertama, mari kita membuat new project di visual studio 2010. Settingan seperti terlihat:

Silahkan klik button "OK", kemudian kita akan masuk ke program utamanya,

Di sini warna background aplikasinya saya ganti aja biar tidak terlihat putih polos, Warnanya seperti terlihat di bawah :

Kemudian tambahkan beberapa kontrol pada GUI tersebut, kontrolnya boleh terserah saja, kalo Hisoka make beberapa kontrol Heehee... :-)

Kontrol paling bawah  yang warna putih itu "RichTextBox" yah. Ok, Jika aplikasinya kita running, hasilnya seperti terlihat

Nah jika GUI tersebut kita maximize, hasilnya :

Kemudian jika resize mengecil :

Terlihat bahwa jika GUI-nya diperbesar atau diperkecil, kontrol-kontrolnya tidak secara otomatis menyesuaikan diri dengan ukuran GUI aktualnya. Oleh sebab itu, untuk mencapai tujuan tersebut, silahkan ikuti langkah-langkah dibawah :

Pertama-tama, tambahkan kolom dan baris pada GUI-nya, cara yang sederhana yaitu arahkan mouse ke bagian atas GUI kemudian klik kiri aja, seperti terlihat di bawah :

Setelah kiri, akan terdapat 1 buah kolom pada GUI. Kemudian untuk menambahkan baris, caranya sama. Arahkan mouse ke sebelah kiri sampe barisnya keliatan, trs klik kiri :D

Terus, silahkan tambahkan jumlah kolom dan baris sesuai dengan kontrol-kontrol (toolbox) yang terdapat pada GUI. Untuk aplikasi ini hasilnya terlihat :

Jika bagian xml-nya kita perhatikan, akan terjadi penambahan kode secara otomatis yaitu :

Nah tanda bintang diatas masing-masing angka itu memperlihatkan ukurannya nanti dapat secara otomatis berubah. Tapi kode ini tidak usah diotak-atik, biarkan saja begitu adanya.. 

Ok, mari kita atur konfigurasi untuk kontrol pertama yaitu "combo-box"nya. Silahkan klik combo-box tersebut, untuk melihat konfigurasi "Layout"-nya :

Pada GUI diatas terlihat bahwa combobox tersebut terletak pada kolom 1 dan baris ke-1 (Ingat: Kolom dan baris start dari 0 bukan 1). Oleh sebab itu, Cocokkan posisinya dengan konfigurasi grid.coloum dan grid.row-nya :

Grid.Column tetap = 1, grid.columnSpan = 1 (Awalnya 2 yah). ColumnSpan itu menentukan seberapa jauh suatu kontrol dapat menduduki kolom dalam GUI, di sini dibutuhkan 1 kolom saja. Kemudian Grid.Row = 1(awalnya 0), Grid.RowSpan = 1 juga. Tapi ternyata combobox-nya jadi hilang,HoHoHo... Itu karena margin atasnya terlalu besar, untuk itu, Ubah aj marginnya ke 0, atau boleh juga 0,0,0,0 (kiri,atas,kanan,bawah). Sehingga akan diperoleh :

Kemudian, konfigurasi yang berikutnya diubah :

Width dan Height-nya masing-masing diubah ke-Auto, biar tar dapat secara otomatis berubah sendiri jika ukuran GUI-nya berubah. Terus HorizontalAlignment dan VerticalAlignment masing-masing diubah ke "Stretch" biar tar dapat dapat mengisi semua space yang tersedia dikolom dan barisnya dan untuk dapat meregang sesuai dengan ukuran kolom dan baris yang ditempatinya. Nah konfigurasi ini diaplikasikan ke semua kontrol-kontrol pada GUI. Di sini saya ada 9 kontrol, jadi yang perlihatkan yang combo-boxnya ajalah yah... :D. Sebagai catatan ,Yang untuk RichTextBox ini agak berbeda, soalnya dia menempati beberapa biji kolom, Jadi konfigurasi untuk ColomnSpannya sesuai dengan jumlah kolom yang terdapat pada GUI yang telah dibuat yaitu 8 untuk project ini. 

Jika telah selesai, Hasilnya seperti terlihat (tampilan normal)

Jika GUI-nya dimaximize :

Nah terlihat, kontrol-kontrolnya ikut membesar dan posisinya juga sudah automatis disesuaikan.

Namun jika GUI tersebut diperkecil sampe yang  kecil2nya,

Nah kembali, kontrol-kontrolnya agak rusak. Untuk mengatasi masalah ini, cara yang paling sederhana adalah membatasi jumlah ukuran minimum user untuk memperkecil ukuran GUI. Untuk itu ubah konfigurasi pada mainWindownya seperti terlihat dibawah :

Dengan konfigurasi tersebut maka GUInya hanya dapat diresize paling kecil sampai ke 595px x 366 px. 

--Sekian--