idcsLogo
idcsLogo2
idcsLogo2
  • Home
  • E-Learning
    • Visual Studio C#
    • C# Dasar
    • Windows Form C#
    • Golang
    • SQL Server
  • Tips and Trick
    • Console
    • Windows Form
  • Submit Artikel
  • Laporkan Masalah

Menggunakan Flow Layout pada Winform C#

Home » Menggunakan Flow Layout pada Winform C#
  • Daftar Materi

    • Apakah itu Windows Form ?
    • Apakah itu Visual Studio ?
    • Tampilan WinForm VS 2019
  • –

    • Apa itu Form ?
    • Apa itu WinForm Control ?
    • Control Properties
    • Membuat Aplikasi WinForm
    • Toolbar WinForm
    • Mnemonic
  • –

    • Docking dan Anchor
    • Container Control
    • Flow Layout
    • GroupBox
    • Panel
    • Split Container
    • TabControl
    • TableLayoutPanel
  • –

    • Apa itu Event ?
    • Apa itu Event Handler ?
    • Event Order
  • –

    • Mengenal GDI+
    • Menggambar Vektor
    • Cardinal Spline
    • Bezier Spline C#
  • –

  • 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 :

    1. Drag n Drop dari ToolBox
    2. 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 :

    Drag n Drop FlowLayoutPanel WinForm

    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.
    FlowBreak FlowLayout Panel Winform

    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.

    Padding dan Margin pada FlowLayout Panel

    Padding dan Margin memberimu kemampuan untuk mengatur jarak antar control didalam FlowLayout Panel.

    Kamu dapat leluasa mengatur padding dan margin control di Properties Control.

    Padding and Margin FlowLAyout Panel

    Mungkin sekian Penjelasan mengenai FlowLayout Panel pada Windows Form, selamat bereksperiment dan happy Coding.

    Angga Adji Surya
    26
    E-Learning, Windows Form
    Prev PostMembuat Desain UI pada aplikasi DesktopContainer Control pada Windows formJun 22, 2019
    Next PostMenggunakan GroupBox pada WinformJul 17, 2019GroupBox pada Winform C#
    idcsLogo
    IDCSharp menyediakan materi - materi bahasa pemrograman komputer dan informasi seputar dunia IT untuk kamu. Mari kita belajar membuat aplikasi bersama
    • Implementasi Media Video dan Audio pada HTML5 Part 2
    • Memahami 3 Jenis Api Model pada HTML5
    • Memahami 3 Api Model pada HTML5 Part 2
    • Memahami 3 Api Model pada HTML5 Part 3
    • Memahami 3 Api Model pada HTML5 Part 4
    • Home
    • E-Learning
      • Visual Studio C#
      • C# Dasar
      • Windows Form C#
      • Golang
      • SQL Server
    • Tips and Trick
      • Console
      • Windows Form
    • Submit Artikel
    • Laporkan Masalah
    Copyright © 2021 IDCSharp. All Rights Reserved