Pembuatan DataTemplate pada Data Binding WPF

Data Binding merupakan teknik untuk menginteraksikan antara lapisan tampilan (presentation layer) dan lapisan data (database layer) sebuah aplikasi. Pada WPF, data binding biasa dilakukan untuk membuat sebuah tampilan sesuai dengan data yang sudah tersedia.

Data binding di WPF dapat dilakukan kostumisasi tampilan. Misalkan data yang ada memiliki tiga buah variable string, sebuah variable image, dan sebuah variable boolean. Dengan seperti itu, kita bisa membuat sebuah template tampilan, ada sebuah image, tiga buah textblock, dan sebuah checkbox. Kita tidak perlu membuat sejumlah data. Yang kita butuhkan adalah membuat sebuah tampilan yang selanjutnya menjadi contoh / template tampilan data.

Langkah – langkah

1. Buat sebuah project WPF, namai saja BelajarDataBinding

2. Buat sebuah folder, namai Images

3. Masukkan gambar – gambar ke folder tersebut. Mudahnya ambil di MyPicture/Sample Picture.

4. Buat class baru, beri nama Person

5. Tulis baris code berikut :

public class Person
{
    private string _name;
    private string _address;
    private string _phone;
    private bool _paid;
    private BitmapImage _photo;
    public Person(string name, string address, bool paid, string phone, BitmapImage photo)
    {
        _name = name;
        _photo = photo;
        _phone = phone;
        _paid = paid;
        _address = address;
    }

    public BitmapImage Photo
    {
        get { return _photo; }
    }

    public bool Paid
    {
        get { return _paid; }
    }

    public string Phone
    {
        get { return _phone; }
    }

    public string Address
    {
        get { return _address; }
    }

    public string Name
    {
        get { return _name; }
    }
}

6. Buat database dummy berupa list of Person. Namai class ListOfPerson

7. Masukan baris code berikut :

class ListOfPerson : List<Person>
{
    public ListOfPerson()
    {
        Add(new Person("Dewa", "Asrama PPSDMS", true, "085648092201", new BitmapImage(new Uri(@"Images/Desert.jpg",UriKind.Relative))));
        Add(new Person("Mocin", "Beijing", true, "044648092201", new BitmapImage(new Uri(@"Images/Koala.jpg", UriKind.Relative))));
        Add(new Person("Sandi", "Gresik", true, "085648462201", new BitmapImage(new Uri(@"Images/Pinguins.jpg", UriKind.Relative))));
        Add(new Person("Fariz", "Mekasan", true, "085468092201", new BitmapImage(new Uri(@"Images/Desert.jpg", UriKind.Relative))));
    }
}

8. Buat sebuah ListBox di MainPage.xaml

9. Klik kanan pada ListBox -> Edit Additional Template -> Item Template -> Create Empty

clip_image002

10. Beri Nama DataTemplate1

11. Pilih Grid, dan beri Width dan Height masing – masing 500px dan 200px

12. Desain Grid seperti gambar berikut :

clip_image003

13. Selanjutnya keluar dari mode editing DataTemplate

14. Klik ListBox, kemudian edit XAML

15. Deklarasi namesapce local terlebih dahulu :

xmlns:local=”clr-namespace:BelajarDataBinding”

16. Pada DataTemplate1, deklarasi class ListOfPerson

<ObjectDataProvider x:Key=”ListOfPerson” ObjectType=”{x:Type local:ListOfPerson}”/>

17. Pada object textBlock dan Image modifikasi nilai bindingnya. Dengan demikian code XAML dari DataTemplate1 adalah sebagai berikut :

<Window.Resources>
    <ObjectDataProvider x:Key="ListOfPerson" ObjectType="{x:Type local:ListOfPerson}"/>
    <DataTemplate x:Key="DataTemplate1">
        <Grid d:DesignWidth="362" d:DesignHeight="138.5" Width="300" Height="120">
            <Image HorizontalAlignment="Left" Margin="8.5,12,0,15" Width="100" Source="{Binding Path=Photo}"/>
            <TextBlock HorizontalAlignment="Stretch" Margin="112.5,12,33.22,0" TextWrapping="Wrap" Text="{Binding Path=Name}"  VerticalAlignment="Top" FontSize="16"/>
            <TextBlock HorizontalAlignment="Stretch" Margin="112.5,31.96,33.22,0" TextWrapping="Wrap" Text="{Binding Path=Address}"  VerticalAlignment="Top" FontSize="16"/>
            <TextBlock HorizontalAlignment="Stretch" Margin="112.5,51.92,33.22,47.8" TextWrapping="Wrap" Text="{Binding Path=Phone}" VerticalAlignment="Stretch" FontSize="16"/>
            <CheckBox Content="CheckBox" HorizontalAlignment="Stretch" Margin="112.5,0,33.22,17.84" FontSize="16" Width="Auto" Height="25.96" VerticalAlignment="Bottom"/>
        </Grid>
    </DataTemplate>
</Window.Resources>

18. Pada XAML ListBox tentukan ItemSource-nya

<ListBox Margin="69.5,70.5,287.5,109.5" ItemsSource="{Binding Source={StaticResource ListOfPerson}}" ItemTemplate="{DynamicResource DataTemplate1}"/>

Dengan menerapkan teknik binding seperti ini, untuk mengoneksikan antara data dan tampilan data akan lebih mudah. Semoga tutorial ini bermanfaat. Amin

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