Пошаговое руководство. Привязка к данным в гибридных приложениях

Привязка источника данных к элементу управления необходима для предоставления пользователям доступа к базовым данным независимо от того, используете ли вы Windows Forms или WPF. В этом пошаговом руководстве показано, как можно использовать привязку данных в гибридных приложениях, которые включают элементы управления Windows Forms и WPF.

В данном пошаговом руководстве представлены следующие задачи.

• Создание проекта.

• Определение шаблона данных.

• Задание макета формы.

• Задание привязок данных.

• Отображение данных с помощью взаимодействия.

• Добавление источника данных в проект.

• Подключение к источнику данных.

Полный пример кода для задач, приведенных в этом пошаговом руководстве, см. в разделе Пример привязки данных в гибридных приложениях.

Изучив этот раздел, вы будете иметь представление о функциях привязки данных в гибридных приложениях.

Необходимые компоненты

Для выполнения этого пошагового руководства требуются следующие компоненты:

• Visual Studio.

• Доступ к учебной базе данных "Борей" на Microsoft SQL Server.

Создание проекта

Создание и настройка проекта

1. Создайте проект приложения WPF с именем WPFWithWFAndDatabinding.

2. В обозревателе решений добавьте ссылки на следующие сборки.

   • WindowsFormsIntegration

   • System.Windows.Forms.

3. Откройте Файл MainWindow.xaml в конструкторе WPF.

4. В элемент Window добавьте следующее сопоставление пространства имен Windows Forms.

   xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms"
   

5. Присвойте элементу Grid по умолчанию имя mainGrid, используя свойство Name.

   <Grid x:Name="mainGrid">
   

Определение шаблона данных

Основной список клиентов отображается в элементе управления ListBox. В следующем примере кода определяется объект DataTemplate с именем ListItemsTemplate, который контролирует визуальное дерево элемента управления ListBox. Этот шаблон DataTemplate назначается свойству ListBox элемента управления ItemTemplate.

Чтобы определить шаблон данных, выполните следующие действия.

• Скопируйте следующий код XAML в объявление элемента Grid.

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

Задание макета формы

Макет формы определяется сеткой с тремя строками и тремя столбцами. Элементы управления Label идентифицируют каждый столбец в таблице "Клиенты".

Настройка макета сетки

• Скопируйте следующий код XAML в объявление элемента 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>
  

Чтобы настроить элементы управления Label, выполните следующие действия.

• Скопируйте следующий код XAML в объявление элемента 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>
  

Задание привязок данных

Основной список клиентов отображается в элементе управления ListBox. Прикрепленный шаблон ListItemsTemplate привязывает элемент управления TextBlock к полю ContactName из базы данных.

Подробные сведения о каждой записи клиента отображаются в нескольких элементах управления TextBox.

Чтобы задать привязки данных, выполните следующие действия.

• Скопируйте следующий код XAML в объявление элемента 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>
  

Отображение данных с помощью взаимодействия

Заказы, соответствующие выбранному клиенту, отображаются в элементе управления System.Windows.Forms.DataGridView с именем dataGridView1. Элемент управления dataGridView1 привязан к источнику данных в файле кода программной части. WindowsFormsHost является родительским для этого элемента управления Windows Forms.

Чтобы отобразить данные в элементе управления DataGridView, выполните следующие действия.

• Скопируйте следующий код XAML в объявление элемента Grid.

  <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 легко добавить в проект источник данных. Эта процедура добавляет строго типизированный набор данных в ваш проект. Также добавляется несколько других классов поддержки, таких как адаптеры таблиц для каждой из выбранных таблиц.

Добавление источника данных

1. В меню Данные выберите Добавить новый источник данных.

2. В мастере настройки источника данных создайте подключение к базе данных "Борей", используя набор данных. Дополнительные сведения см. в разделе How to: Connect to Data in a Database.

3. В ответ на запрос мастера конфигурации источника данных сохраните строку подключения как NorthwindConnectionString.

   Внимание

   Хранение конфиденциальных сведений (например, пароля) в строке подключения может повлиять на безопасность приложения. Использование проверки подлинности Windows (также называемой встроенными средствами безопасности) — более безопасный способ управления доступом к базе данных. Дополнительные сведения см. в разделе Защита сведений о подключении.

4. При появлении запроса на выбор объектов базы данных выберите таблицы Customers и Orders и назовите созданный набор данных NorthwindDataSet.

Подключение к источнику данных

Компонент System.Windows.Forms.BindingSource предоставляет единый интерфейс для источника данных приложения. Привязка к источнику данных реализована в файле кода программной части.

Чтобы создать привязку к источнику данных, выполните следующие действия.

1. Откройте файл кода программной части с именем MainWindow.xaml.vb или MainWindow.xaml.cs.

2. Скопируйте следующий код в определение класса MainWindow.

   Этот код объявляет компонент BindingSource и связывает вспомогательные классы, подключающиеся к базе данных.

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

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

3. Копируйте в конструктор следующий код.

   Данный код создает и инициализирует компонент BindingSource.

   public MainWindow()
   {
       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;
   }
   

   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
   

4. Откройте файл MainWindow.xaml.

5. В представлении конструирования или XAML выделите элемент Window.

6. В окне свойств щелкните вкладку События.

7. Дважды щелкните событие Loaded.

8. Скопируйте в обработчик события Loaded следующий код.

   Этот код присваивает компонентBindingSource в качестве контекста данных и заполняет объекты адаптера Customers и Orders.

   private void Window_Loaded(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);
   }
   

   Private Sub Window_Loaded( _
   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
   

9. Скопируйте следующий код в определение класса MainWindow.

   Этот метод обрабатывает событие CurrentChanged и обновляет текущий элемент привязки данных.

   // 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;
   }
   

   ' 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
   

10. Нажмите клавишу F5 для сборки и запуска приложения.

См. также

• ElementHost
• WindowsFormsHost
• Проектирование XAML в Visual Studio
• Пример привязки данных в гибридных приложениях
• Пошаговое руководство. Размещение составного элемента управления Windows Forms в приложении WPF
• Пошаговое руководство. Размещение составного элемента управления WPF в форме Windows Forms