انشئ مشروعا جديدا من النوع WPF Application وسمه ListBoxData
أضف قاعدة البيانات المرفقة مع الدرس رقم 1 إلى المشروع وفي معالج إنشاء مجموعة البيانات اختر الجدول Products وسم مجموعة البيانات ProductDataSet
انتقل إلى محرر الكود الخاص بالنافذة وأدخل في الفئة الخاصة بالنافذة الكود التالي من أجل تحميل البيانات
Private taProduct As New ProductDataSetTableAdapters.ProductTableAdapter Private dsProduct As New ProductDataSet Private Sub Window1_Loaded(ByVal sender As System.Object, _ ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded Me.taProduct.Fill(Me.dsProduct.Product) End Sub
عد إلى محرر النافذة وأضف ListBox إلى سطحها ثم عد على محرر الكود وأضف السطر التالي في بعد السطر الموجود في حدث Loaded للنموذج حيث نقوم بضبط قيمة الخاصية ItemsSourc e لصندوق القائمة إلى الجدول Product
Me.ListBox1.ItemsSource=Me.dsProduct.Product
ونقوم بضبط قيمة الخاصية DisplayMemberPath على name من أجل تحديد اسم العمود الذي نريد أن نظهر بياناته ولعمل ذلك أضف السطر التالي بعد السطر السابق
Me.ListBox1.DisplayMemberPath = "Name"
شغل التطبيق ولاحظ البيانات في صندوق القائمة
ومن أجل ترتيب البيانات الظاهرة في صندوق القائمة يمكننا استبدال قيمة الخاصية ItemsSource باستعلام لينك ولعمل ذلك استبدل السطر
Me.ListBox1.ItemsSource = Me.dsProduct.Product
بالسطر
Me.ListBox1.ItemsSource = From p In Me.dsProduct.Product Order By p.Name
انتقل إلى محرر النافذة وأضف صندوق نصوص أسفل صندوق القائمة حيث سنستخدمه لإظهار وصف المنتج ولعمل ذلك سنحتاج لربط كلا التحكمين مع جدول البيانات وأسهل طريقة في WPF لربط عدة تحكمات هي ضبط ما يسمى بـ DataContext للنافذة بحيث تستخدمها التحكمات افتراضيا
انتقل على محرر الكود واستبدل كافة الكود الخاص بالحدث Loaded للنافذة بالكود التالي
Me.taProduct.Fill(Me.dsProduct.Product) Me.DataContext = From p In Me.dsProduct.Product Order By p.Name
عد إلى محرر xaml الخاص بالنافذة حيث سنقوم بربط البيانات من هناك حيث سنقوم بتعديل الكود الخاص بصندوق القائمة ليضبط قيمة الخاصيتين ItemsSource و DisplayMemberPath حيث سيصبح كود xaml الخاص بـ ListBox كما يلي مع العلم أن الخاصية IsSynchronizedWithCurrnetItem تتيح مزامنة القيمة المختارة في صندوق القائمة مع السجل الحالي بحيث تتيح إظهار الوصف المناسب للمنتج المختار في صندوق النصوص
<ListBox Margin="12,12,12,120" Name="ListBox1"
ItemsSource="{Binding Path={}}"
DisplayMemberPath="Name"
IsSynchronizedWithCurrentItem="True"/>واستبدل كود صندوق النصوص بالكود التالي من أجل ربطه مع الحقل Description
<TextBox Text="{Binding Path=Description}" Height="95"
Margin="16,0,14,12" Name="TextBox1" VerticalAlignment="Bottom" />يمكننا الاستفادة أيضا من ميزة في WPF هي امكانية صنع قوالب للتحكمات Templates ولتجربة ذلك أزل صندوق النصوص من على النافذة حيث سنجعله يظهر داخل صندوق القائمة وسع الآن صندوق القائمة ليملأ النموذج ثم عدل كود xaml لصندوق القائمة ليصبح كالتالي حتى يمكننا إضافة التحكمات داخل صندوق القائمة لاحظ حذف الخاصية DisplayMemberPath
<ListBox Margin="12" Name="ListBox1"
ItemsSource="{Binding Path={}}"
IsSynchronizedWithCurrentItem="True">
</ListBox>داخل كود صندوق القائمة وقبل قسم إغلاقها </ListBox> أضف الكود التالي الذي يعرف قالب بيانات DataTemplate داخل صندوق القائمة ونضيف بداخله StackPanel باتجها افقي كي يساعدنا في ترتيب التحكمات بداخل صندوق القائمة لاحظ هنا أن جميع التحكمات في WPF هي مستوعبات Containers يمكن وضع تحكمات بداخلها
<ListBox.ItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal"> </StackPanel> </DataTemplate> </ListBox.ItemTemplate>
ضع داخل الـ StackPanel تحكمان Label بحيث يكونان مربوطين مع العمودين name و Description كما يلي
<Label Width="100" Content="{Binding Path=Name}"></Label>
<Label Width="200" Content="{Binding Path=Description}"></Label>شغل المشروع واختبره – لاحظ ظهور عمودين للبيانات بداخل صندوق القائمة وفي الحقيقة بشكل عام يمكنك وضع أي تحكم بداخل صندوق القائمة مثل الأزرار أو صناديق النصوص أو مربعات الاختيار ... الخ
تم بعون الله