C# WPF Cara Membuat Content Dinamis Dengan User Control Step by Step

Halo programmer :). Di kesempatan kali ini saya akan mencoba menerangkan step by step cara untuk membuat User Control pada C# WPF Application.


User control berguna untuk menghemat Windows Form. Dengan User Control, kita tidak perlu membuka Windows Form baru pada saat kita (misalnya) memilih menu pada aplikasi yang kita buat. User Control dapat ditampilkan pada Windows Form yang sama.

Di Bawah sedikit ilustrasi bagaimana user control di tambahkan pada area {Content}.

 

Penjelasan : Pada saat menu login di klik, User Control yang berisi form login akan di masukkan ke area {Content}.

1. Membuat Windows Form

Langsung saja kita buat aplikasinya. Aplikasi yang saya gunakan adalah Microsoft Visual Studio 2013.

Pertama-tama buatlah sebuah project baru dengan klik menu File > New > Project.

Pilih Visual C# > Wpf Application. Kemudian beri nama untuk project anda. Contoh : Tutorial.

Untuk Location(tempat project anda disimpan setelah ini) anda dapat merubahnya dengan menekan tombol browse yang ada di sebelah kanan. Setelah itu tekan tombol OK untuk membuat project.

Setelah project selesai dibuat, pilih MainWindow.xaml. Tambahkan Button. Posisikan pada pojok kiri Windows Form. Button ini akan digunakan sebagai trigger untuk menampilkan User Control.

Sekarang marilah kita lihat code dari Windows Form yang sudah kita buat.

Button itu adalah Element Button yang di drag tadi. Hilangkan atribut HorizontalAlignment, VerticalAlignment dan Width. Kita akan membuat agar Button itu mengisi seluruh row grid (Button Container).

Langkah selanjutnya kita akan membuat container untuk Button dan Content untuk User Control menggunakan Grid RowDefinitions. Penjelasan tentang Grid RowDefinitions akan saya jelaskan di artikel berikutnya. Sekarang saya jelaskan secara umum saja.

Ubahlah code diatas sehingga menjadi :

Perhatikan Gambar diatas.

Code yang di blok adalah code yang sudah diedit.

Grid.RowDefinitions artinya kita akan membuat baris grid. Bisa dikatakan pembungkus baris-baris grid. Child nya yakni RowDefinition merupakan baris grid nya (Row).

Baris Pertama kita beri height 30 untuk Button.

Baris kedua kita beri height auto. Agar bisa menyesuaikan dengan content yang diisi nantinya.

Perhatikan yang dilingkari merah.

Atribut Click artinya kita men-set fungsi apa yang di panggil jika Button di klik, pada gambar diatas adalah fungsi ButtonClick ( tenang, fungsinya akan dijelaskan setelah ini ).

Wah StackPanel itu apa?

StackPanel adalah tempat UserControl dimasukkan. Atribut Name harus diisi, karena atribut ini akan dipakai acuan untuk menempatkan UserControl. 

StackPanel merupakan Element yang sangat berguna karena Element yang diisi di dalamnya akan diposisikan otomatis sesuai Atribut Orientation yang di set padanya.

Perhatikan atribut Grid.Row="" pada Button dan StackPanel.

Bagian inilah yang berfungsi untuk menempatkan Button dan StackPanel dimasukkan di Baris/Row yang mana. Dari gambar diatas, Ada 2 Grid Row ( lihat RowDefinition di dalaman element Grid.RowDefinitions ) yang kita buat. Yang pertama adalah Grid.Row 0, dan yang selanjutnya adalah Grid.Row 1. YA, dimulai dari 0, bukan 1. Button dimasukkan pada Grid.Row 0, StackPanel dimasukkan pada Grid.Row 1. 

Klik start untuk menjalankan aplikasinya. Jika semua berjalan lancar, harusnya anda akan melihat tampilan seperti berikut :

2. User Control dan Button Click Event

Jika anda sempat meng-klik tombol nya, tentu saja akan muncul error, karena fungsi yang dipanggil belum dibuat. Baiklah kita lanjut untuk membuat User Control.

Untuk menambahkan User Control, klik kanan pada nama project ( pada blog ini namanya Tutorial ) yang ada di panel Solution Explorer yang ada di sebelah kanan. Cari Add > User Control

Pilih User Control ( WPF ). Ingat, jangan salah pilih User Control, Carilah User Control ( WPF ) yang untuk aplikasi WPF. Beri nama UCLoginForm ( Jadilah programmer yang baik, beri tanda pada nama file sesuai dengan jenisnya ). Klik OK.

Selanjutnya, masukkan Textbox ke dalam user control. Caranya sama dengan memasukkan Button di awal. Cari Textbox di toolbox, drag ke dalam User Control yang sudah dibuat tadi.

Klik 2x pada textbox tadi untuk merubah text yang muncul menjadi username dan password. Kemudian save.

Selanjutnya yang kita nanti-nantikan, fungsi untuk menyambungkan Button click dan User Control :D,

Bukalah MainWindows.xaml.cs. Tambahkan code yang di blok berikut :

Perhatikan baris code di dalam fungsi ButtonClick :

Baris pertama kita membuat instansi object dari Class User Control UCLoginForm yang bernama ucLoginForm.

Baris kedua merupakan cara untuk menambahkan User Control ucLoginForm ke dalam StackPanel SPContent. SPContent adalah nama dari StackPanel yang sudah dibuat sebelumnya.

Run Program dengan meng-klik tombol start. Klik tombol dan lihatlah hasilnya.

Tambahan :

Jika ingin mengosongkan StackPanel dulu sebelum menambahkan User Control code nya di modif sedikit menjadi seperti berikut : 

private void ButtonClick(object sender, RoutedEventArgs e)
        {
            UCLoginForm ucLoginForm = new UCLoginForm();
            //membersihkan isi content Stack Panel SPContent
            SPContent.Children.Clear();
            SPContent.Children.Add(ucLoginForm);
        }

Karena jika tidak di kosongkan, isinya akan menumpuk saat Button di klik.

Untuk tutorial video, ada tutorial yang sangat bagus : https://www.youtube.com/watch?v=s49G6ph4XXA

Demikian, semoga dengan tutorial ini anda bisa paham cara menambahkan User Control pada aplikasi C# WPF. 

Semoga bermanfaat.

Terima Kasih.