Menggunakan Flow Layout pada Winform C#

Flow Layout Panel membantu kamu merapikan tata letak kontrol yang kamu gunakan secara Horizontal maupun Vertikal.

Kontrol yang berada di dalam Flow Layout di tata secara otomatis dengan jarak tertentu antar Kontrol.

FLow Layout Panel pada Windows Form C# — Flow Layout Panel pada Windows Form

Materi kali ini akan menjelaskan konsep dan teknik yang dapat kamu gunakan dalam memanfaatkan Flow Layour Panel.

Membuat Panel Flow Layout

Kamu dapat membuat Sebuah FlowLayout dengan 2 (dua) buah cara, yaitu melalui :

Drag n Drop dari ToolBox
Code.

Menggunakan Drag n Drop

Cara pertama adalah Drag n Drop, kamu hanya perlu memindahkan ikon Flow Layout pada ToolBox kedalam Form dengan cara menggesernya dengan cursor.

Perhatikan gambar dibawah ini :

Menggunakan Code C#

Selain dengan Drag n Drop, kamu dapat menambahkan Flow Layout langsung menggunakan Code pemrograman, pada materi ini kami menggunakan Bahasa Pemrograman C#.

Pertama, yang harus kamu lakukan adalah membuat instance dari Class flowLayoutPanel. berikut adalah kode untuk membuat instance FlowLayout.

Masuk ke bagian Form1.Designer.cs ( nb : Form1 menyesuaikan nama dari form kamu ), dan tambahkan kode berikut di bawah Method InitializeComponent().

baca : Parameter Method pada Bahasa Pemrograman C#

private System.Windows.Forms.FlowLayoutPanel flowLayoutPanel1;

catatan : flowLayoutPanel1 merupakan nama Flow Layout yang akan dibuat, bisa kamu ganti sesuai keinginan.

Kemudian tambahkan kode berikut di Kedalam Method InitializeComponent(): tepatnya di atas kode this.SuspendLayout();

this.flowLayoutPanel1 = new System.Windows.Forms.FlowLayoutPanel();

Catatan : flowLayoutPanel1 mengikuti nama Flow Layout sebelumnya.

setelah itu tambahkan kode berikut di bawah kode this.SuspendLayout(); :

this.flowLayoutPanel1.Location = new System.Drawing.Point(138, 160);
this.flowLayoutPanel1.Name = "flowLayoutPanel1";
this.flowLayoutPanel1.Size = new System.Drawing.Size(200, 100);
this.flowLayoutPanel1.TabIndex = 0;
this.Controls.Add(this.flowLayoutPanel1);

Catatan :

Location : lokasi dari Flow Layout yang akan dibuat ( menggunakan koordinat x dan y ).
Name : nama dari FlowLayout yang dibuat.
Size : Ukuran Panjang dan lebar Flow Layout.
Tabindex : Tab Order dari Flow Layout.
Add(….) : Menambahkan FlowLayout kedalam form saat ini.

Flow Layout Selesai dibuat dan dapat kamu lihat pada bagian designer.

Menambahkan Control kedalam FlowLayout

Setelah kamu selesai membuat sebuah FlowLayout, kamu dapat menambahakan beberapa control kedalamnya. Untuk menambahakan Control kamu dapat melakukannya dengan cara Drag n Drop dari ToolBox kedalam Flow Layout.

perhatikan gambar di bawah ini :

Drag n Drop Control kedalam FlowLayoutPanel WinForm

kamu dapat memasukan lebih dari satu control kedalam flowlayout..

Mengatur Urutan Control dalam FlowLayout ( Flow Direction)

Flow Direction dapat membantu kamu mengubah pengurutan Control yang berada di dalam Flow Layout Panel, baik dari kanan ke kiri, atas ke bawah dan lain sebagainya.

Kamu dapat melihat pengaturan Flow Direction pada bagian Layout di Properties FlowLayout Panel.

Flow Break : Membatasi Jumlah urutan Control pada Flow Layout

FlowLayout Panel memberikan tambahan properties kepada control yang berada di dalamnya. Properties tersebut bernama Flow Break.

Flow Break memberimu kemampuan untuk membatasi jumlah tatanan pada Flow Layout.

Bagaimana cara menggunakan Flow Break ?

Kamu dapat mengaktifkan FlowBreak dengan cara :

Pertama, pastikan control mana yang akan kamu implementasikan Flow Break.
kemudian, masuk kedalam properties, dan ubah nilai FlowBreak menjadi true.

Gambar di atas adalah contoh implementasi Flow Break, kami menggunakan Flow Break pada button 7, 8, 10, 12,dan 15.

Docking dan Anchor pada FlowLayout Panel

Bicara mengenai anchor dan Dock, sebenarnya apasih ?

Baca : Docking dan Anchor pada Windows Form

Kamu juga dapat melakukan docking dan anchoring pada FlowLayout Panel bahkan control didalamnya, agar lebih tertata rapi dan responsive ketika terjadi resizing form ketika runtime.

Bagaimana menggunkan Dock dan Anchor ? kamu dapat mendalaminya dengan membaca artikel pada link di atas.