Assalamualaikum,,
Ngantuk berat, sebelum tidur posting blog dulu, biar tidurnya nyenyak,, hehehe,, ^-^ ,, oke langsung saja, kali ini kita akan membahas mengenai databinding pada komponent listbox, pada contoh kali ini kita menggunakan windows phone 8, oke langsung saja.
1. Buatlah project baru dengan nama databinding.
2. kemudian tambahkan polder image pada projectnya. untuk menambahkan polder, tinggal klik kanan pada project -> add -> New Polder -> namakan images. pada polder images ini tempat kita akan menyimpan gambar-gambar yang akan ditampilkan pada listbox. (lihat gambar) untuk melihat strukturnya.
3. Sekarang kita tambahkan class baru, caranya sama dengan seperti tadi. klik kanan pada project -> add - > class -> namakan classvariabel.
4. kemudian tambahakn source berikut pada class yang tadi kita buat.
class classvariabel
{
public string nama { get; set; }
public string pesan { get; set; }
public string gambar { get; set; }
}
5. oke, selanjutnya tambahkan listbox pada MainPage.xaml , listbox ini fungsinya untuk menampilkan data. untuk menambahkan listbox masukkan source dibawah ini pada MainPage.xaml.
<ListBox Height="601" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="6,6,-36,0" Width="486" Name="listboxsample"></ListBox>
6. Sekarang pada menu properties, masu ke menu event, kemudian double klik pada event loaded kemudian tambahkan source dibawah ini.
7. Oke sekarang untuk bisa menampilkan data-data ke listbox, kita perlu modifikasi listbox yang di MainPage.xaml tadi menjadi seperti ini.
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<ListBox Height="601" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="6,6,-36,0" Width="486" Name="listboxsample" Loaded="listboxsample_Loaded" SelectionChanged="listboxsample_SelectionChanged_1">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding gambar}" Height="72" Width="72" VerticalAlignment="Top" Margin="0,8,8,0"/>
<StackPanel Width="350">
<TextBlock Text="{Binding nama}" FontSize="28" Foreground="White"/>
<TextBlock Text="{Binding pesan}" FontSize="24" TextWrapping="Wrap" Foreground="Orange"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
Ngantuk berat, sebelum tidur posting blog dulu, biar tidurnya nyenyak,, hehehe,, ^-^ ,, oke langsung saja, kali ini kita akan membahas mengenai databinding pada komponent listbox, pada contoh kali ini kita menggunakan windows phone 8, oke langsung saja.
1. Buatlah project baru dengan nama databinding.
2. kemudian tambahkan polder image pada projectnya. untuk menambahkan polder, tinggal klik kanan pada project -> add -> New Polder -> namakan images. pada polder images ini tempat kita akan menyimpan gambar-gambar yang akan ditampilkan pada listbox. (lihat gambar) untuk melihat strukturnya.
3. Sekarang kita tambahkan class baru, caranya sama dengan seperti tadi. klik kanan pada project -> add - > class -> namakan classvariabel.
4. kemudian tambahakn source berikut pada class yang tadi kita buat.
class classvariabel
{
public string nama { get; set; }
public string pesan { get; set; }
public string gambar { get; set; }
}
5. oke, selanjutnya tambahkan listbox pada MainPage.xaml , listbox ini fungsinya untuk menampilkan data. untuk menambahkan listbox masukkan source dibawah ini pada MainPage.xaml.
<ListBox Height="601" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="6,6,-36,0" Width="486" Name="listboxsample"></ListBox>
6. Sekarang pada menu properties, masu ke menu event, kemudian double klik pada event loaded kemudian tambahkan source dibawah ini.
private void listboxsample_Loaded(object sender, RoutedEventArgs e)
{
List<classvariabel> classtampil = new List<classvariabel>();
classtampil.Add(new classvariabel { nama = "Bahtiar Imran", pesan = "Ini adalah contoh penggunaan dari data binding pada komponent listbox, ini adalah contoh sederhana saja", gambar = "images/tiar.png" });
classtampil.Add(new classvariabel { nama = "Baiq Irma", pesan = "Ini adalah contoh penggunaan dari data binding pada komponent listbox, ini adalah contoh sederhana saja", gambar = "images/irm.png" });
classtampil.Add(new classvariabel { nama = "Love", pesan = "Ini adalah contoh penggunaan dari data binding pada komponent listbox, ini adalah contoh sederhana saja", gambar = "images/tiar1.png" });
listboxsample.ItemsSource = classtampil;
}
7. Oke sekarang untuk bisa menampilkan data-data ke listbox, kita perlu modifikasi listbox yang di MainPage.xaml tadi menjadi seperti ini.
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<ListBox Height="601" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="6,6,-36,0" Width="486" Name="listboxsample" Loaded="listboxsample_Loaded" SelectionChanged="listboxsample_SelectionChanged_1">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding gambar}" Height="72" Width="72" VerticalAlignment="Top" Margin="0,8,8,0"/>
<StackPanel Width="350">
<TextBlock Text="{Binding nama}" FontSize="28" Foreground="White"/>
<TextBlock Text="{Binding pesan}" FontSize="24" TextWrapping="Wrap" Foreground="Orange"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
Nah,, gimana gampang kan, sekarang kita coba jalankan, gimana sih hasilnya .
Pada contoh ini masih bersipat statis, kalau ada waktu nanti saya akan lanjutkan dengan contoh yang dinamis, dari contoh diatas silahkan anda kembangkan dan lanjutkan dengan konsep yang lebih terarah . untuk projectnya silahkan Download Disini
Sekian dulu tutorial kali ini..
Tag :
Windows Phone
0 Komentar untuk "Mekanisme databinding pada komponent listbox"