Bu yazımızda WPF Formda oluşturmuş olduğumuz Listbox kontrolünde ItemTemplate Kullanımını göreceğiz. Daha sonra Entity Framework ile SQL veritabanındaki verilerin Listbox içinde görüntülenmesini sağlayacağız. Bu işlemleri “kutuphane” veritabanında bulunan “Ogrenci” tablosunu kullanarak gerçekleştireceğiz.
Örneğimizde Listbox kontrolünde sadece öğrenciye ait ad ve soyad bilgisini görüntüleyeceğiz. Listbox üzerinde tıklanan öğrenciye göre diğer bilgilerin Listbox’ ın sağ tarafında oluşturmuş olduğumuz TextBlock kontrolleri ile öğrenciye ait diğer bilgilerin görüntülenmesini sağlayacak Binding işlemini gerçekleştireceğiz.
Yeni proje oluşturduktan sonra Entity Framework bağlantılarını gerçekleştirerek başlıyoruz.
WPF Form tasarımına ait XAML kodlarımız şu şekilde olacaktır.
Solution Explorer üzerinde sağ tıklayara Add-NewItem diyoruz ve
Data sekmesinde ADO.NET Entity Data Model seçiyoruz. Bu işlemlerin daha detaylı anlatımını daha önceki örneklerimizde ve videolu örneğimizde anlatmıştık. Dilerseniz buradaki linkten ulaşabilirsiniz.
Bağlantı işlemlerini tamamladıktan sonra Solution Explorer pencerinde Modelimizin oluştuğunu göreceğiz.
WPF Projemize ait XAML kodlarını aşağıdaki şekilde oluşturuyoruz. Bazı önemli detayları yazının devamında göreceksiniz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <Window x:Class="Listbox_ItemTemplate.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="www.yazilimkodlama.com" Height="600" Width="800" Loaded="Window_Loaded"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="250"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <ListBox Name="lstOgrenci"> <ListBox.ItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal"> <TextBlock Text="{Binding ograd}" Margin="0,0,10,0" /> <TextBlock Text="{Binding ogrsoyad}" /> </StackPanel> </DataTemplate> </ListBox.ItemTemplate> </ListBox> <StackPanel Grid.Column="1" Margin="60,19,226,296"> <TextBlock Grid.Column="1" TextWrapping="Wrap" FontWeight="Bold" FontSize="20" Text="{Binding ElementName=lstOgrenci, Path=SelectedItem.ogrno}" VerticalAlignment="Top"/> <TextBlock Grid.Column="1" TextWrapping="Wrap" FontWeight="Bold" FontSize="20" Text="{Binding ElementName=lstOgrenci, Path=SelectedItem.ograd}" VerticalAlignment="Top" /> <TextBlock Grid.Column="1" TextWrapping="Wrap" FontWeight="Bold" FontSize="20" Text="{Binding ElementName=lstOgrenci, Path=SelectedItem.ogrsoyad}" VerticalAlignment="Top" /> <TextBlock Grid.Column="1" TextWrapping="Wrap" FontWeight="Bold" FontSize="20" Text="{Binding ElementName=lstOgrenci, Path=SelectedItem.dtarih, StringFormat=dd-MM-yyyy}" VerticalAlignment="Top"/> <TextBlock Grid.Column="1" TextWrapping="Wrap" FontWeight="Bold" FontSize="20" Text="{Binding ElementName=lstOgrenci, Path=SelectedItem.sinif}" VerticalAlignment="Top" /> </StackPanel> </Grid> </Window> |
Kodlarımızı incelediğimizde Grid‘ in 2 sütuna ayrıldığını görmekteyiz. Sol tarafta Listbox kontrolünün ItemTemplate kullanılarak öğrenciye ait ad ve soyad bilgilerinin textBlock‘ lar içerisinde görüntülenmesi sağlanmakta.
1 2 3 4 5 6 7 8 9 10 11 12 | <ListBox Name="lstOgrenci"> <ListBox.ItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal"> <TextBlock Text="{Binding ograd}" Margin="0,0,10,0" /> <TextBlock Text="{Binding ogrsoyad}" /> </StackPanel> </DataTemplate> </ListBox.ItemTemplate> </ListBox> |
Sağ tarafta ise StackPanel içerisine aldığımız TextBlock‘ lar ile listbox içinde tıklanan öğrenciye ait diğer bilgilerin görüntülenmesi için Binding işleminin yapıldığını görüyoruz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <StackPanel Grid.Column="1" Margin="60,19,226,296"> <TextBlock Grid.Column="1" TextWrapping="Wrap" FontWeight="Bold" FontSize="20" Text="{Binding ElementName=lstOgrenci, Path=SelectedItem.ogrno}" VerticalAlignment="Top"/> <TextBlock Grid.Column="1" TextWrapping="Wrap" FontWeight="Bold" FontSize="20" Text="{Binding ElementName=lstOgrenci, Path=SelectedItem.ograd}" VerticalAlignment="Top" /> <TextBlock Grid.Column="1" TextWrapping="Wrap" FontWeight="Bold" FontSize="20" Text="{Binding ElementName=lstOgrenci, Path=SelectedItem.ogrsoyad}" VerticalAlignment="Top" /> <TextBlock Grid.Column="1" TextWrapping="Wrap" FontWeight="Bold" FontSize="20" Text="{Binding ElementName=lstOgrenci, Path=SelectedItem.dtarih, StringFormat=dd-MM-yyyy}" VerticalAlignment="Top"/> <TextBlock Grid.Column="1" TextWrapping="Wrap" FontWeight="Bold" FontSize="20" Text="{Binding ElementName=lstOgrenci, Path=SelectedItem.sinif}" VerticalAlignment="Top" /> </StackPanel> |
Burada ayrıca şunuda belirtelim. Öğrencinin doğum tarihinin görüntüleneceği TextBlock içerisinde Doğum Tarihinin formatı StringFormat ile Gün-Ay-Yıl şeklinde ayarlanarak “1998-04-08 00:00:00.000” şeklinde görünmesi yerine aşağıda da son ekran görüntüsünden de göreceğiniz hale getirilmiştir.
1 2 3 4 | <TextBlock Grid.Column="1" TextWrapping="Wrap" FontWeight="Bold" FontSize="20" Text="{Binding ElementName=lstOgrenci, Path=SelectedItem.dtarih, StringFormat=dd-MM-yyyy}" VerticalAlignment="Top"/> |
Sıra C# kodlarında. Bu kısım oldukça basit.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Navigation; using System.Windows.Shapes; namespace Listbox_ItemTemplate { /// <summary> /// Interaction logic for MainWindow.xaml /// </summary> public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); } kutuphaneEntities db; private void Window_Loaded(object sender, RoutedEventArgs e) { db = new kutuphaneEntities(); lstOgrenci.ItemsSource = db.ogrencis.ToList(); } } } |
Form_Load Event’ i için Name özelliğini lstOgrenci olarak ayarladığımız listbox kontrolünün ItemsSource özelliğine Ogrenci tablosunu bağlıyoruz.
Kodlarımızı açıkladıktan sonra test edebiliriz. Projemizi çalıştıralım.
Konuyla ilgili sorularınızı Yorumlar kısmından iletebilir isterseniz Facebook Sayfamızı beğenerek yeni örnekler ve farklı konulara da ulaşabilirsiniz.
