الإرشادات التفصيلية: الربط إلي بيانات في تطبيقات مختلطة

مقالة
11/01/2010

ربط مصدر بيانات إلي عنصر تحكم أساسي من أجل توفير للمستخدمين الوصول إلى البيانات الأساسية سواء كنت تستخدم Windows Forms أو WPF. تُظهر هذه الإرشادات التفصيلية كيفية استخدام ربط البيانات في التطبيقات المختلطة التي تتضمن كلا من عناصر تحكم Windows Forms و WPF.

تتضمن المهام الموضحة في هذه الإرشادات التفصيلية ما يلي:

إنشاء المشروع
تعريف قالب بيانات.
تحديد تخطيط النموذج.
تحديد روابط البيانات.
عرض البيانات باستخدام التشغيل التفاعلي.
إضافة مصدر بيانات جديد إلى المشروع
ربط لمصدر البيانات.

للحصول على قائمة كاملة للتعليمات البرمجية من المهام الموضحة في هذه الإرشادات التفصيلية, راجع ربط البيانات في نموذج التطبيقات المختلطة.

عند الانتهاء، سيمون لديك فهم لميزات ربط البيانات في التطبيقات المختلطة.

ملاحظة
قد تختلف مربعات الحوار و أوامر القائمة التى تشاهدها عن تلك الموصوفة في التعليمات ، و ذلك اعتماداً على إعداداتك النشطة أو الإصدار الخاص بك.لتغيير الإعدادات الخاصة بك, اختر إعدادات الاستيراد و التصدير ضمن القائمة أدوات .لمزيد من المعلومات، راجع العمل مع إعدادات.

قد تختلف مربعات الحوار و أوامر القائمة التى تشاهدها عن تلك الموصوفة في التعليمات ، و ذلك اعتماداً على إعداداتك النشطة أو الإصدار الخاص بك.لتغيير الإعدادات الخاصة بك, اختر إعدادات الاستيراد و التصدير ضمن القائمة أدوات .لمزيد من المعلومات، راجع العمل مع إعدادات.

المتطلبات الأساسية

تحتاج إلى المكونات التالية لاستكمال هذه الإرشادات التفصيلية:

Visual Studio 2008.
الوصول إلي قاعدة بيانات نموذج Northwind قيد التشغيل على ملقم Microsoft SQL.

إنشاء المشروع

لإنشاء وإعداد المشروع

أنشأ مشروع تطبيق WPF باسم WPFWithWFAndDatabinding.
في "مستكشف الحلول" قم بإضافة مرجع إلى تجميع WindowsFormsIntegration يسمى WindowsFormsIntegration.dll.
في "مستكشف الحلول" قم بإضافة مرجع إلى تجميع Windows Forms الذي يسمى System.Windows.Forms.dll.
قم بفتح Window1.xaml في ال مصمم WPF.

في بداية الملف قم بتعيين مساحات اسم Windows Forms مع التعليمات البرمجية التالية.

<Window x:Class="WPFWithWFAndDatabinding.Window1"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms" 
    Title="WPFWithWFAndDatabinding"
    Loaded="WindowLoaded"
    >

<Window x:Class="Window1"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms" 
    Title="WPFWithWFAndDatabinding"
    Loaded="WindowLoaded"
    >

قم بتسمية عنصر Grid الافتراضي mainGrid عن طريق تعيين خاصية Name.
```
    <Grid x:Name="mainGrid">
```
```
<Grid x:Name="mainGrid">
```

تعريف قالب بيانات.

يتم عرض القائمة الرئيسية من العملاء في عنصر تحكم ListBox. يعرّف مثال التعليمات البرمجية كائن DataTemplate باسم ListItemsTemplate الذي يتحكم في الشجرة المرئية لعنصر تحكم ListBox. هذا DataTemplate يتم تعيينه إلي خاصية ItemTemplate لعنصر تحكم ListBox.

لتعريف قالب بيانات

قم بنسخ التعليمات البرمجية التالية في تعريف عنصر Grid.

        <Grid.Resources>
            <DataTemplate x:Key="ListItemsTemplate">
                <TextBlock Text="{Binding Path=ContactName}"/>
            </DataTemplate>
        </Grid.Resources>

<Grid.Resources>
  <DataTemplate x:Key="ListItemsTemplate">
    <TextBlock Text="{Binding Path=ContactName}"/>
  </DataTemplate>
</Grid.Resources>

تحديد تخطيط النموذج.

تخطيط النموذج هو المعرفة بواسطة شبكة مع ثلاثة صفوف وثلاثة أعمدة. Labelتتوفر عناصر تحكم لتعريف كل عمود في جدول العملاء.

لإعداد تخطيط الشبكة

قم بنسخ التعليمات البرمجية التالية في تعريف عنصر Grid.

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>

<Grid.RowDefinitions>
  <RowDefinition Height="Auto"/>
  <RowDefinition Height="Auto"/>
  <RowDefinition Height="Auto"/>
</Grid.RowDefinitions>

<Grid.ColumnDefinitions>
  <ColumnDefinition Width="Auto"/>
  <ColumnDefinition Width="Auto"/>
  <ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>

لإعداد عناصر تحكم التسمية

قم بنسخ التعليمات البرمجية التالية في تعريف عنصر Grid.

        <StackPanel Orientation="Vertical" Grid.Row="0" Grid.Column="1">
            <Label Margin="20,38,5,2">First Name:</Label>
            <Label Margin="20,0,5,2">Company Name:</Label>
            <Label Margin="20,0,5,2">Phone:</Label>
            <Label Margin="20,0,5,2">Address:</Label>
            <Label Margin="20,0,5,2">City:</Label>
            <Label Margin="20,0,5,2">Region:</Label>
            <Label Margin="20,0,5,2">Postal Code:</Label>
        </StackPanel>

<StackPanel Orientation="Vertical" Grid.Row="0" Grid.Column="1">
  <Label Margin="20,38,5,2">First Name:</Label>
  <Label Margin="20,0,5,2">Company Name:</Label>
  <Label Margin="20,0,5,2">Phone:</Label>
  <Label Margin="20,0,5,2">Address:</Label>
  <Label Margin="20,0,5,2">City:</Label>
  <Label Margin="20,0,5,2">Region:</Label>
  <Label Margin="20,0,5,2">Postal Code:</Label>
</StackPanel>

تحديد روابط البيانات.

يتم عرض القائمة الرئيسية من العملاء في عنصر تحكم ListBox. ListItemsTemplate المرفق يربط عنصر تحكم TextBlock إلي حقل ContactName من قاعدة البيانات.

تفاصيل كل سجل عميل يتم عرضها في عدة عناصر تحكم TextBox.

لتحديد ربط البيانات

قم بنسخ التعليمات البرمجية التالية في تعريف عنصر Grid.

فئة Binding تربط عناصر تحكم TextBox إلي الحقول المناسبة في قاعدة البيانات.

        <StackPanel Orientation="Vertical" Grid.Row="0" Grid.Column="0">
            <Label Margin="20,5,5,0">List of Customers:</Label>
            <ListBox x:Name="listBox1" Height="200" Width="200" HorizontalAlignment="Left" 
               ItemTemplate="{StaticResource ListItemsTemplate}" IsSynchronizedWithCurrentItem="True" Margin="20,5,5,5"/>
        </StackPanel>

        <StackPanel Orientation="Vertical" Grid.Row="0" Grid.Column="2">
            <TextBox Margin="5,38,5,2" Width="200" Text="{Binding Path=ContactName}"/>
            <TextBox Margin="5,0,5,2" Width="200" Text="{Binding Path=CompanyName}"/>
            <TextBox Margin="5,0,5,2" Width="200" Text="{Binding Path=Phone}"/>
            <TextBox Margin="5,0,5,2" Width="200" Text="{Binding Path=Address}"/>
            <TextBox Margin="5,0,5,2" Width="200" Text="{Binding Path=City}"/>
            <TextBox Margin="5,0,5,2" Width="30" HorizontalAlignment="Left" Text="{Binding Path=Region}"/>
            <TextBox Margin="5,0,5,2" Width="50" HorizontalAlignment="Left" Text="{Binding Path=PostalCode}"/>
        </StackPanel>

    <StackPanel Orientation="Vertical" Grid.Row="0" Grid.Column="0">
      <Label Margin="20,5,5,0">List of Customers:</Label>
      <ListBox x:Name="listBox1" Height="200" Width="200" HorizontalAlignment="Left" 
               ItemTemplate="{StaticResource ListItemsTemplate}" IsSynchronizedWithCurrentItem="True" Margin="20,5,5,5"/>
    </StackPanel>

    <StackPanel Orientation="Vertical" Grid.Row="0" Grid.Column="2">
      <TextBox Margin="5,38,5,2" Width="200" Text="{Binding Path=ContactName}"/>
      <TextBox Margin="5,0,5,2" Width="200" Text="{Binding Path=CompanyName}"/>
      <TextBox Margin="5,0,5,2" Width="200" Text="{Binding Path=Phone}"/>
      <TextBox Margin="5,0,5,2" Width="200" Text="{Binding Path=Address}"/>
      <TextBox Margin="5,0,5,2" Width="200" Text="{Binding Path=City}"/>
      <TextBox Margin="5,0,5,2" Width="30" HorizontalAlignment="Left" Text="{Binding Path=Region}"/>
      <TextBox Margin="5,0,5,2" Width="50" HorizontalAlignment="Left" Text="{Binding Path=PostalCode}"/>
    </StackPanel>

عرض البيانات باستخدام التشغيل التفاعلي.

يتم عرض الطلبات المطابقة إلى العميل المحدد في عنصر تحكم System.Windows.Forms.DataGridView المسمى dataGridView1. عنصر تحكم dataGridView1 يرتبط بمصدر البيانات في ملف التعليمات البرمجية الخلفية. عنصر تحكم WindowsFormsHost هو أصل عنصر تحكم Windows Forms.

لعرض البيانات في عنصر تحكم DataGridView

قم بنسخ التعليمات البرمجية التالية في تعريف عنصر Grid.

        <WindowsFormsHost Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" Margin="20,5,5,5" Height="300">
            <wf:DataGridView x:Name="dataGridView1"/>
        </WindowsFormsHost>

<WindowsFormsHost Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" Margin="20,5,5,5" Height="300">
  <wf:DataGridView x:Name="dataGridView1"/>
</WindowsFormsHost>

إضافة مصدر بيانات إلى المشروع

مع Visual Studio، يمكنك بسهولة إضافة مصدر بيانات إلى المشروع الخاص بك. يضيف هذا الإجراء مجموعة بيانات مكتوبة بشدة إلى المشروع الخاص بك. يتم إضافة عدة فئات دعم أخرى, مثل محولات الجدول لكل من الجداول التي تم اختيارها.

لإضافة مصدر البيانات

من قائمة مشروع حدد إضافة مصدر بيانات جديد.
في معالج تكوين مصدر البيانات، انقر فوق اتصال جديد لإنشاء اتصال بقاعدة بيانات Northwind. لمزيد من المعلومات، راجع كيفية القيام بما يلي: يعيّن إلى البيانات في قاعدة بيانات.
عند مطالبتك بواسطة معالج تكوين مصدر البيانات, احفظ سلسلة الاتصال ك NorthwindConnectionString.
حدد جداول "عملاء" و "الطلبات" ، و قم بتسمية مجموعة البيانات المنشئة NorthwindDataSet.

ربط لمصدر البيانات.

مكون System.Windows.Forms.BindingSource يوفر واجهة موحدة لمصدر بيانات التطبيق. ربط إلي مصدر بيانات يتم تطبيقه في ملف التعليمات البرمجية الخلفية.

لربط مصدر بيانات

افتح ملف التعليمات البرمجية الخلفية المسمى Window1.xaml.cs أو Window1.xaml.vb.

قم بنسخ التعليمات البرمجية التالية في تعريف فئة Window1 .

يقوم هذا الرمز بتعريف مكون BindingSource و الفئات المساعدة المقترنة التي تتصل بقاعدة البيانات.

Private nwBindingSource As System.Windows.Forms.BindingSource
Private nwDataSet As NorthwindDataSet
Private customersTableAdapter As New NorthwindDataSetTableAdapters.CustomersTableAdapter()
Private ordersTableAdapter As New NorthwindDataSetTableAdapters.OrdersTableAdapter()

private System.Windows.Forms.BindingSource nwBindingSource;
private NorthwindDataSet nwDataSet;
private NorthwindDataSetTableAdapters.CustomersTableAdapter customersTableAdapter = 
    new NorthwindDataSetTableAdapters.CustomersTableAdapter();
private NorthwindDataSetTableAdapters.OrdersTableAdapter ordersTableAdapter = 
    new NorthwindDataSetTableAdapters.OrdersTableAdapter();

قم بنسخ التعليمات البرمجية التالية في الدالة الإنشائية Window1 , مباشرة بعد استدعاء أسلوب InitializeComponent.

هذه التعليمات البرمجية تنشئ و تهيئ مكون BindingSource.

Public Sub New()
    InitializeComponent()

    ' Create a DataSet for the Customers data.
    Me.nwDataSet = New NorthwindDataSet()
    Me.nwDataSet.DataSetName = "nwDataSet"

    ' Create a BindingSource for the Customers data.
    Me.nwBindingSource = New System.Windows.Forms.BindingSource()
    Me.nwBindingSource.DataMember = "Customers"
    Me.nwBindingSource.DataSource = Me.nwDataSet

End Sub

public Window1()
{
    InitializeComponent();

    // Create a DataSet for the Customers data.
    this.nwDataSet = new NorthwindDataSet();
    this.nwDataSet.DataSetName = "nwDataSet";

    // Create a BindingSource for the Customers data.
    this.nwBindingSource = new System.Windows.Forms.BindingSource();
    this.nwBindingSource.DataMember = "Customers";
    this.nwBindingSource.DataSource = this.nwDataSet;
}

انسخ التعليمات البرمجية التالية في تعريف فئة Window1بعد الدالة الإنشائية.

تعرّف هذه التعليمات البرمجية معالج حدث Loaded الذي يقوم بتعيين مكون BindingSource كسياق بيانات و قم بملء كائنات المحول Customers و Orders.

Private Sub WindowLoaded( _
ByVal sender As Object, _
ByVal e As RoutedEventArgs)

    ' Fill the Customers table adapter with data.
    Me.customersTableAdapter.ClearBeforeFill = True
    Me.customersTableAdapter.Fill(Me.nwDataSet.Customers)

    ' Fill the Orders table adapter with data.
    Me.ordersTableAdapter.Fill(Me.nwDataSet.Orders)

    ' Assign the BindingSource to 
    ' the data context of the main grid.
    Me.mainGrid.DataContext = Me.nwBindingSource

    ' Assign the BindingSource to 
    ' the data source of the list box.
    Me.listBox1.ItemsSource = Me.nwBindingSource

    ' Because this is a master/details form, the DataGridView
    ' requires the foreign key relating the tables.
    Me.dataGridView1.DataSource = Me.nwBindingSource
    Me.dataGridView1.DataMember = "FK_Orders_Customers"

    ' Handle the currency management aspect of the data models.
    ' Attach an event handler to detect when the current item 
    ' changes via the WPF ListBox. This event handler synchronizes
    ' the list collection with the BindingSource.
    '

    Dim cv As BindingListCollectionView = _
        CollectionViewSource.GetDefaultView(Me.nwBindingSource)

    AddHandler cv.CurrentChanged, AddressOf WPF_CurrentChanged

End Sub

private void WindowLoaded(object sender, RoutedEventArgs e)
{
    // Fill the Customers table adapter with data.
    this.customersTableAdapter.ClearBeforeFill = true;
    this.customersTableAdapter.Fill(this.nwDataSet.Customers);

    // Fill the Orders table adapter with data.
    this.ordersTableAdapter.Fill(this.nwDataSet.Orders);

    // Assign the BindingSource to 
    // the data context of the main grid.
    this.mainGrid.DataContext = this.nwBindingSource;

    // Assign the BindingSource to 
    // the data source of the list box.
    this.listBox1.ItemsSource = this.nwBindingSource;

    // Because this is a master/details form, the DataGridView
    // requires the foreign key relating the tables.
    this.dataGridView1.DataSource = this.nwBindingSource;
    this.dataGridView1.DataMember = "FK_Orders_Customers";

    // Handle the currency management aspect of the data models.
    // Attach an event handler to detect when the current item 
    // changes via the WPF ListBox. This event handler synchronizes
    // the list collection with the BindingSource.
    //

    BindingListCollectionView cv = CollectionViewSource.GetDefaultView(
        this.nwBindingSource) as BindingListCollectionView;

    cv.CurrentChanged += new EventHandler(WPF_CurrentChanged);
}

قم بنسخ التعليمات البرمجية التالية في تعريف فئة Window1, بعد أسلوب WindowLoaded .

يعالج هذا الأسلوب حدث CurrentChanged و يقوم بتحديث العنصر الحالي من ربط البيانات.

' This event handler updates the current item 
' of the data binding.
Private Sub WPF_CurrentChanged(ByVal sender As Object, ByVal e As EventArgs)
    Dim cv As BindingListCollectionView = sender
    Me.nwBindingSource.Position = cv.CurrentPosition
End Sub

// This event handler updates the current item 
// of the data binding.
void WPF_CurrentChanged(object sender, EventArgs e)
{
    BindingListCollectionView cv = sender as BindingListCollectionView;
    this.nwBindingSource.Position = cv.CurrentPosition;
}

اضغط F5 لإنشاء التطبيق وتشغيله.

راجع أيضًا:

مشاركة عبر

الإرشادات التفصيلية: الربط إلي بيانات في تطبيقات مختلطة

المتطلبات الأساسية

إنشاء المشروع

لإنشاء وإعداد المشروع

تعريف قالب بيانات.

لتعريف قالب بيانات

تحديد تخطيط النموذج.

لإعداد تخطيط الشبكة

لإعداد عناصر تحكم التسمية

تحديد روابط البيانات.

لتحديد ربط البيانات

عرض البيانات باستخدام التشغيل التفاعلي.

لعرض البيانات في عنصر تحكم DataGridView

إضافة مصدر بيانات إلى المشروع

لإضافة مصدر البيانات

ربط لمصدر البيانات.

لربط مصدر بيانات

راجع أيضًا:

المرجع

المبادئ

موارد أخرى

الموارد الإضافية