Menggunakan Split Container pada WinForm

Ketika membuat aplikasi Windows Forms (WinForms), kita sering kali ingin membagi tampilan menjadi beberapa bagian yang dapat diubah ukurannya secara dinamis. Salah satu kontrol terbaik untuk ini adalah SplitContainer.

SplitContainer adalah kontrol di WinForms yang memungkinkan kita membagi form menjadi dua panel yang dapat disesuaikan ukurannya dengan drag. Ini sangat berguna untuk layout fleksibel, seperti membuat sidebar navigasi, tampilan editor, atau file explorer.

Artikel ini akan membahas apa itu SplitContainer, bagaimana cara menggunakannya, serta contoh implementasi dalam C#.

1. Apa Itu SplitContainer dalam WinForms?

SplitContainer adalah kontrol yang terdiri dari dua panel yang dipisahkan oleh splitter bar, yang dapat digeser oleh pengguna untuk mengatur ukuran masing-masing panel.

✅ Membagi form menjadi dua area yang dapat diubah ukurannya.
✅ Mendukung orientasi vertikal (kiri-kanan) dan horizontal (atas-bawah).
✅ Cocok untuk sidebar, tampilan editor, atau daftar file.

📌 Contoh Penggunaan SplitContainer

• Sidebar navigasi di aplikasi desktop.
• Editor kode dengan panel preview.
• File Explorer dengan daftar folder di satu sisi dan isi file di sisi lainnya.

2. Cara Menambahkan SplitContainer dalam WinForms

📌 A. Menggunakan Drag & Drop (Visual Studio Designer)

1. Buka Visual Studio → Buat proyek Windows Forms App (.NET Framework).
2. Buka ToolBox → Cari SplitContainer.
3. Seret dan letakkan SplitContainer di dalam Form.
4. Atur properti SplitContainer, seperti orientasi (Orientation → Vertical/Horizontal) dan ukuran panel (Panel1MinSize & Panel2MinSize).
5. Tambahkan kontrol lain ke dalam Panel1 dan Panel2, seperti Button, Label, atau DataGridView.

📌 B. Menambahkan SplitContainer dengan Kode C#

Kita juga bisa menambahkan SplitContainer secara dinamis melalui kode C#.

using System;
using System.Windows.Forms;

public class MainForm : Form {
    public MainForm() {
        this.Text = "Contoh SplitContainer di WinForms";
        this.Size = new System.Drawing.Size(500, 300);

        // Membuat SplitContainer
        SplitContainer splitContainer = new SplitContainer();
        splitContainer.Dock = DockStyle.Fill; // Memenuhi seluruh form
        splitContainer.Orientation = Orientation.Vertical; // Panel kiri-kanan
        splitContainer.SplitterDistance = 200; // Ukuran awal panel kiri

        // Membuat Panel Kiri
        Label label1 = new Label();
        label1.Text = "Panel Kiri";
        label1.Dock = DockStyle.Fill;
        splitContainer.Panel1.Controls.Add(label1);

        // Membuat Panel Kanan
        Label label2 = new Label();
        label2.Text = "Panel Kanan";
        label2.Dock = DockStyle.Fill;
        splitContainer.Panel2.Controls.Add(label2);

        // Menambahkan SplitContainer ke dalam Form
        this.Controls.Add(splitContainer);
    }

    public static void Main() {
        Application.Run(new MainForm());
    }
}

📌 Penjelasan Kode

• Membuat objek SplitContainer dan mengaturnya agar mengisi seluruh form (DockStyle.Fill).
• Mengatur orientasi SplitContainer menjadi vertikal, sehingga membagi form menjadi dua panel kiri-kanan.
• Menambahkan Label ke masing-masing panel untuk menampilkan teks.
• Menambahkan SplitContainer ke dalam Form menggunakan this.Controls.Add(splitContainer);.

🛠️ Output Program:

• Form akan ditampilkan dengan dua panel.
• Pengguna bisa menyesuaikan ukuran kedua panel dengan menggeser splitter.

3. Properti Penting dalam SplitContainer

📌 Contoh Penggunaan Properti FixedPanel

splitContainer.FixedPanel = FixedPanel.Panel1; // Panel1 ukurannya tetap

Dengan properti ini, hanya Panel2 yang bisa berubah ukurannya, sementara Panel1 tetap.

4. Kapan Harus Menggunakan SplitContainer?

✅ Gunakan SplitContainer jika:

• Ingin membagi tampilan menjadi dua bagian yang bisa diubah ukurannya.
• Membutuhkan sidebar navigasi atau tampilan editor dengan preview.
• Menginginkan layout yang fleksibel dan responsif.

❌ Jangan gunakan SplitContainer jika:

• Tidak ada kebutuhan layout dinamis.
• Menggunakan container lain seperti Panel atau TableLayoutPanel lebih cocok.

5. Kesimpulan

• SplitContainer adalah kontrol WinForms yang membagi form menjadi dua bagian dengan pembatas yang bisa digeser.
• Mendukung orientasi vertikal (kiri-kanan) dan horizontal (atas-bawah).
• Dapat digunakan untuk sidebar, tampilan editor, atau file explorer.
• Bisa ditambahkan menggunakan drag & drop atau dengan kode C#.
• Memiliki properti seperti SplitterDistance, FixedPanel, dan IsSplitterFixed untuk kontrol penuh atas layout.

Dengan memahami cara menggunakan SplitContainer dalam WinForms, kamu bisa membuat UI yang lebih fleksibel dan interaktif untuk aplikasi desktop kamu!