أنشئ مشروعا جديدا وسمه WpfLookup_VB ثم أضف مصدر بيانات جديد باستخدام المعالج وقاعدة البيانات التي استخدمناها في الموضوع الأول واختر الجدول Orders وسم الـ Dataset بالاسم OrdersDataSet ثم أضف مصدر بيانات جديد واختر الجدول Customer بحيث تحدد الحقول CustomerID و FirstName و LastName فقط وسم الـ DataSet بالاسم CustomerLookupDataSet
افتح CustomerLookupDataSet ثم انقر بزر الفأرة اليميني على CustomerTableAdapter ثم اختر Configure وأضف قسم Order By للاستعلام الموجود في الصفحة بحيث يصبح الاستعلام كما يلي
SELECT CustomerID, LastName, FirstName FROM Customer ORDER BY LastName, FirstName
ثم اضغط Finish
أغلق محرر مجموعة البيانات ثم اذهب إلى قائمة View ثم اختر إظهار نافذة Document Outline التي تساعدنا في الانتقال عبر xaml
عدل كود Grid في Xaml من أجل تقسيم الشبكة إلى اربعة أقسام بحيث يصبح كما يلي
<Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="110*" /> <ColumnDefinition Width="168*" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="222*" /> <RowDefinition Height="40*" /> </Grid.RowDefinitions> </Grid>
أدرج StackPanel في كل قسم من القسمين العلويين للشبكة واجعل كا واحد منهما يملأ كامل مساحة قسم من أقسام الشبكة ثم أضف زرين في القسم اليميني السفلي للشبكة بحيث تكون خاصية name لهما btnSave و btnAdd و خاصية Contenet لهما Add و Save ثم أضف أربعة تحكمات Label في الـ stackPanel العلوي اليميني واضبط خاصية Width لها إلى Auto ثم اضبط خاصية Contnt لها بحيث تكون من الأعلى للأسفل Order ID و Customer و Order Date و Ship Date
ادرج في الـ StackPanel العلوي اليميني تحكم TextBox ثم تحكم ComboBox ثم تحكمي TextBox ثم اضبط خاصية height لهذه التحكمات إلى 28 كي نضبط ارتفاعها بشكل موازي لارتفاع تحكمات Label في القسم المقابل واضبط خاصية Width لهذه التحكمات ايضا إلى Auto ثم اختر الـ Grid واضبط الخاصية Margin إلى 6 كما قم بضبط الخاصية Margin لجميع تحكمات Label و textbox و ComboBox إلى 3
عدل كود xaml لصندوق النصوص الأول كي يتم ربطه مع الحقل OrderID فيصبح كما يلي
<TextBox Height="28" Name="TextBox1" Width="Auto" Margin="3"
Text="{Binding Path=OrderID, Mode=OneWay}" IsReadOnly="True"/>ثم عدل كود xaml لصندوقي النصوص الآخرين كي يتم ربطهما مع الحقلين OrderDate و ShipDate فيصبح كما يلي
<TextBox Height="28" Name="TextBox2" Width="Auto" Margin="3"
Text="{Binding Path=OrderDate}"/>
<TextBox Height="28" Name="TextBox3" Width="Auto" Margin="3"
Text="{Binding Path=ShipDate}"/>اضبط خصائص الـ Combobox لربط قيمة الاظهار مع الحقل LastName و القيمة المختارة مع CustomerID
<ComboBox Height="28" Name="ComboBox1" Width="Auto" Margin="3"
DisplayMemberPath="LastName" SelectedValuePath="CustomerID"
SelectedValue="{Binding Path=CustomerID}"/>انتقل إلى محرر الكود الخاص بالنافذة وأضف المتغيرات التالية العامة على مستوى النموذج كي نستخدمها للتعامل مع قواعد البيانات
Private OrderData As New OrdersDataSet Private taOrder As New OrdersDataSetTableAdapters.OrdersTableAdapter Private taManager As New OrdersDataSetTableAdapters.TableAdapterManager Private CustomerLookup As New CustomerLookupDataSet.CustomerDataTable
أضف الكود التالي في الحدث loaded الخاص بالنافذة كي يتم ربط البيانات مع النموذج وإظهارها
Dim taCustomer As New CustomerLookupDataSetTableAdapters.CustomerTableAdapter taCustomer.Fill(Me.CustomerLookup) Me.taOrder.Fill(Me.OrderData.Orders) Me.taManager.OrdersTableAdapter = Me.taOrder Me.DataContext = Me.OrderData.Orders Me.ComboBox1.ItemsSource = Me.CustomerLookup
حيث قمنا بتعريف TableAdapterManager للجدول Customer واستخدمناه لملئ CustometLookup بالبيانات بواسطة الطريقة Fill وبنفس الأسلوب قمنا بملئ OdrerData بالبيانات باستخدام taOrder ثم قمنا بضبط OrdersTableAdapter العائد لـ taManager ليساوي taOrder ثم ربطنا الـ DataContext الخاصة بالنافذة مع الجدول orders كي نعلم جميع التحكمات الموجودة عليها بأن الخصائص المرتبطة بقاعدة البيانات هي عائدة للجدول Orders ثم ضبطنا خاصية itemsSource العائدة لـ ComboBox مع CustomerLookup من أجل إظهار البيانات بشكل صحيح فيه
عد إلى محرر النافذة وانقر نقرا مزدوجا على الزر Add ليتم إضافة معالج لحدث النقر على الزر ونقلك لمحرر الكود ثم أضف السطر التالي مع المتغيرات التي عرفناها في القسم العام للفئة
Private View As CollectionView
وفي نهاية الكود الموجود في الحدث Loaded للنافذة أضف الكود التالي
Me.View= CollectionViewSource.GetDefaultView(Me.OrderData.Orders)
ثم انتقل لحدث Click الخاص بالزر Add وأضف الكود التالي الذي يمثل كود إضافة سطر جديد
Dim row = Me.OrderData.Orders.NewOrdersRow row.CustomerID = 0 Me.OrderData.Orders.AddOrdersRow(row) Me.View.MoveCurrentToLast()
أنشئ معالج لحدث النقر على زر الحفظ وأدخل فيه الكود التالي
Try
If Me.OrderData.HasChanges Then
If Me.taManager.UpdateAll(Me.OrderData) > 0 Then
MsgBox("Saved")
End If
End If
Catch ex As Exception
MsgBox(ex.ToString)
End Tryانتقل إلى محرر xaml للنافذة واذهب إلى كود ComboBox الذي سنقوم بتعديله حتى يقوم بإظهار حقلي الاسم الأخير والاسم الأول بداية احذف الخاصية DisplayMemberPath="LastName" حيث سنضيف ItemsTemplate بدلا عنها التي تمكننا من إضافة التحكمات بداخله لإظهار الاسم الأخير والاسم الأول عدل كود الـ ComboBox ليصبح كما يلي
<ComboBox Height="28" Name="ComboBox1" Width="Auto" Margin="3"
SelectedValuePath="CustomerID"
SelectedValue="{Binding Path=CustomerID}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Name="LastName"
Text="{Binding Path=LastName}"/>
<TextBlock Width="5">,</TextBlock>
<TextBlock Name="FirstName"
Text="{Binding Path=FirstName}"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ComboBox>حيث أضفنا itemTemplate وحددنا أنها من نوع DataTemplate ثم أضفنا بداخلها تحكم StackPanel بترتيب أفقي الذي سيحتوي على تحكماتنا المضافة ويتحكم بترتيبها ثم أضفنا ثلاثة تحكمات TextBlock داخله الأول تم ربطه مع LastName و الأخير مع FirstName والوسطي وضعنا فيه فاصلة فقط وطريقة الربط هي باستخدام Binding بنفس الطريقة التي استخدمناها مع صناديق النصوص
شغل المشروع واختبره
