WPF Basic – Memanfaatkan Stack Panel sebagai List Box Dinamis

Pada tutorial WPF sederahana, saya ingin berbagi cara mengakali pembuatan list box dengan memanfaatkan sifat fungsionalitas Stack Panel. Terkadang kita bingung untuk menerapkan teknik data binding dalam pemanfaatan controller Listbox WPF. Hal ini dikarenakan oleh kita belum terbiasa untuk memodifikasi code XAML. Padahal, dalam pembuatan atau pemanfaatan beberapa controller WPF, kita butuh teknik yang seperti itu. Hal ini bisa “diakali” dengan cara intansiasi usercontrol yang telah kita modifikasi. Kemudian, kita menaruh usercontol – usercontol tersebut pada sebuah stackpanel. Terlihatlah seakan – akan kita menggunakan listbox.

Masih abstrak, baik, agar lebih jelas, silakan mempraktikkan beberapa langkah pembuatan daftar nama pada aplikasi buku telepon berikut.

    1. Buka Microsoft Expression Blend 4
    2. Buat project WPF baru
    3. Pada MainPage.xaml buatlah sebuah StackPanel dan berinama StackPanelList dengan ukuran 350 x 360.
    4. Setelah itu, group StackPanel tersebut ke dalam Scroll Viewer, seperti pada gambar 3.
    5. Buat class baru, beri nama User
    6. Buat property – property penting yang dimiliki oleh class User. Misalkan seperti penggalan code berikut :
public class User
{
	private string _name;
	private string _address;
	private string _phoneNumber;
	private BitmapImage _image;

	public User(string name, string phoneNumber, string address, BitmapImage image = null)
	{
		_name = name;
		_phoneNumber = phoneNumber;
		_address = address;
		_image = image;
	}
}
    1. Pada sidebar Project, buat usercontrol baru. Beri nama “MyListBox” seperti yang dijelaskan pada gambar 7.
    2. Atur ukuran usercontrol sesuai dengan keinginan kita. Misal ukurannya 350 x 120, seperti pada gambar 8.
    3. Setelah itu, kita men-desain usercontrol baru itu sesuai dengan gambar 9.
    4. Masuk ke MyListBox.xaml.cs, buat method Constructor baru. Method contructor baru ini kita maksudkan untuk menjadikan intansiasi MyListBox lebih dinamis dan sesuai dengan keinginan kita.
public MyListBox(User user)
{
	this.InitializeComponent();
	TextBoxName.Text = user.Name;
	TextBoxAddress.Text = user.Address;
	TextBoxPhoneNumber.Text = user.PhoneNumber;
	ImageFoto.Source = user.Image;
}
    1. Pada MainPage.xaml.cs buat object ListUser seperti potongan code berikut :
public partial class MainWindow : Window
{
        private List ListUser = new List();
    1. Buat method InitializeUsers(). Method ini berfungsi untuk membuat object user sesuai dengan keinginan kita dan memasukkan ke dalam ListUser. Pastikan pada alamat D:/misc terdapat foto1, foto2, dan foto3.
public void InitializeUsers()
{
	ListUser.Add(new User("Dewandono", "085648092201", "Jalan Empunala\nGg Gotong Royong\nKota Mojokerto",
       	new BitmapImage(new Uri(@"D:/misc/foto1.jpg", UriKind.Absolute))));
	ListUser.Add(new User("Mocin Sugiharta", "085648125648", "Gresik gang 4 no 1\nKota Gresik",
       	new BitmapImage(new Uri(@"D:/misc/foto2.jpg", UriKind.Absolute))));
	ListUser.Add(new User("Sandi Pintar", "085489254568", "Gedung Teknik Informatika ITS\nlt 3 Laboratorium Pemrograman\nITS Surabya",
       	new BitmapImage(new Uri(@"D:/misc/foto3.jpg",UriKind.Absolute))));
}
    1. Buat method InitializeListBoxes(). Method ini berfungsi untuk menjadikan StackPanelList sebagai induk dari MyListBox – MyListBox kecil yang kita ciptakan.
public void InitializeListBoxes()
{
	foreach (User i in ListUser)
	{
		MyListBox myListBox = new MyListBox(i);
		StackPanelList.Children.Add(myListBox);
	}
}
  1. Run dengan menekan F5. ListBox yang terbuat dari StackPanel sudah kita ciptakan. Program kita akan tampil seperti gambar 10.

Penjelasan Gambar:

gmb 3

Gambar 3

gmb 8

gmb 10

Semoga tutorial ini bermanfaat. Selamat mencoba.

Tinggalkan Jejak

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s