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

Опубликовано: Апрель 2016

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

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

• Создание приложения WPF и набора данных, сформированного из данных в учебной базе данных AdventureWorksLT.

• Создание набора привязанных к данным элементов управления посредством перетаскивания таблицы данных из окна Источники данных в окно в конструкторе WPF.

• Создание кнопок для перехода вперед и назад по записям продуктов.

• Создание кнопки для сохранения изменений, вносимых пользователем в записи продуктов, в таблице данных и базовом источнике данных.

  Примечание

  Отображаемые на компьютере имена или расположения некоторых элементов пользовательского интерфейса Visual Studio могут отличаться от указанных в следующих инструкциях. Это зависит от имеющегося выпуска Visual Studio и используемых параметров. Дополнительные сведения см. в разделе Персонализация среды IDE.

Обязательные компоненты

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

• Visual Studio

• Доступ к запущенному экземпляру SQL Server или SQL Server Express с подключенной учебной базой данных AdventureWorksLT. Вы можете загрузить базу данных AdventureWorksLT с веб-сайта CodePlex.

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

• Наборы данных и адаптеры таблицы. Дополнительные сведения см. в разделах Работа с наборами данных в Visual Studio и Общие сведения об адаптере таблиц.

• Работа с Конструктором WPF. Для получения дополнительной информации см. Общие сведения о конструкторах WPF и Silverlight.

• Привязка данных WPF. Для получения дополнительной информации см. Общие сведения о связывании данных.

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

Создайте новый проект WPF. Этот проект будет отображать записи продуктов.

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

1. Запустите Visual Studio.

2. В меню Файл выберите пункт Создать, а затем команду Проект.

3. Разверните Visual Basic или Visual C# и выберите Windows.

4. Выберите шаблон проекта Приложение WPF.

5. В поле Имя введите AdventureWorksProductsEditor и нажмите кнопку ОК.

   Visual Studio создает проект AdventureWorksProductsEditor.

Создание набора данных для приложения

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

Создание набора данных

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

   Открывается окно Источники данных.

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

   Появится мастер настройки источника данных.

3. На странице Выбор типа источника данных выберите База данных и нажмите кнопку Далее.

4. На странице Выбор модели базы данных выберите Набор данных и нажмите кнопку Далее.

5. На странице Выбор подключения к базе данных выберите один из следующих параметров.

   • Если подключение к учебной базе данных AdventureWorksLT доступно в раскрывающемся списке, то выберите его и нажмите кнопку Далее.

     -или-

   • Щелкните Создать подключение и создайте подключение к базе данных AdventureWorksLT.

6. На странице Сохранение подключения в файле конфигурации приложения установите флажок Да, сохранить подключение как и нажмите кнопку Далее.

7. На странице Выбор объектов базы данных разверните узел Таблицы и выберите таблицу Продукт (SalesLT).

8. Нажмите кнопку Готово.

   Visual Studio добавляет в проект новый файл AdventureWorksLTDataSet.xsd, а также добавляет соответствующий элемент AdventureWorksLTDataSet в окно Источники данных. Файл AdventureWorksLTDataSet.xsd определяет типизированный набор данных с именем AdventureWorksLTDataSet и адаптер таблицы с именем ProductTableAdapter. Позднее в рамках данного пошагового руководства вы воспользуетесь ProductTableAdapter для заполнения набора данных данными и сохранения изменений в базу данных.

9. Выполните построение проекта.

Изменение метода заполнения по умолчанию для адаптера таблицы

Чтобы заполнить набор данных данными, используйте метод Fill объекта ProductTableAdapter. По умолчанию метод Fill заполняет ProductDataTable в AdventureWorksLTDataSet со всеми строками данных из таблицы продукта. Вы можете изменить этот метод, чтобы он возвращал только подмножество строк. В рамках данного руководства измените метод Fill для возврата только строк для продуктов с фотографиями.

Загрузка строк продуктов с фотографиями

1. В Обозревателе решений дважды щелкните файл AdventureWorksLTDataSet.xsd.

   Открывается Конструктор наборов данных.

2. В этом конструкторе щелкните запрос Fill,GetData() правой кнопкой мыши и выберите пункт Настроить.

   Открывается Мастер настройки адаптера таблицы.

3. На странице Введите инструкцию SQL добавьте следующее предложение WHERE после инструкции SELECT в текстовом поле.

   WHERE ThumbnailPhotoFileName <> 'no_image_available_small.gif'  
   

4. Нажмите кнопку Готово.

Определение пользовательского интерфейса

Добавьте несколько кнопок в окно, изменив в XAML в Конструкторе WPF. Позднее в рамках данного пошагового руководства вы добавите код, позволяющий пользователям выполнять прокрутку и сохранять изменения записей продуктов с помощью этих кнопок.

Определение пользовательского интерфейса окна

1. В Обозревателе решений дважды щелкните файл MainWindow.xaml.

   Открывается окно в Конструкторе WPF.

2. В представлении XAML конструктора добавьте следующий код между тегами <Grid>:

   <Grid.RowDefinitions>  
       <RowDefinition Height="75" />  
       <RowDefinition Height="625" />  
   </Grid.RowDefinitions>  
   <Button HorizontalAlignment="Left" Margin="22,20,0,24" Name="backButton" Width="75"><</Button>  
   <Button HorizontalAlignment="Left" Margin="116,20,0,24" Name="nextButton" Width="75">></Button>  
   <Button HorizontalAlignment="Right" Margin="0,21,46,24" Name="saveButton" Width="110">Save changes</Button>  
   

3. Выполните построение проекта.

Создание элементов управления с привязкой к данным

Создайте элементы управления, отображающие записи клиентов, перетащив таблицу Продукт из окна Источники данных в Конструктор WPF.

Порядок создания элементов управления с привязкой к данным

1. В окне Источники данных щелкните раскрывающееся меню для узла Продукт и выберите команду Сведения.

2. Разверните узел Продукт.

3. Для данного примера некоторые поля не отображаются, поэтому щелкните раскрывающееся меню рядом со следующими узлами и выберите Нет.

   • ProductCategoryID

   • ProductModelID

   • ThumbnailPhotoFileName

   • rowguid

   • ModifiedDate

4. Щелкните раскрывающееся меню рядом с узлом ThumbNailPhoto и выберите Изображение.

   Примечание

   По умолчанию у элементов в окне Источники данных, представляющих изображения, для элемента управления по умолчанию задано значение Нет. Это вызвано тем, что изображения хранятся в базах данных в виде байтовых массивов, которые могут содержать все — от простого массива байтов до исполняемого файла или большого приложения.

5. Из окна Источники данных перетащите узел Продукт на строку сетки под строкой с кнопками.

   Visual Studio создает XAML, который определяет набор элементов управления, привязанных к данным в таблице Продукты. Также создается код, который загружает эти данные. Дополнительные сведения о созданном XAML и коде см. в разделе Привязка элементов управления WPF к данным в Visual Studio.

6. Щелкните в конструкторе текстовое поле рядом с меткой Идентификатор продукта.

7. В окне Свойства установите флажок рядом со свойством IsReadOnly.

Навигация по записям продуктов

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

Предоставление пользователям возможности навигации по записям продуктов

1. В конструкторе дважды щелкните кнопку < на поверхности окна.

   Visual Studio открывает файл кода программной части и создает новый обработчик событий backButton_Click для события Click.

2. Измените обработчик событий Window_Loaded, чтобы ProductViewSource, AdventureWorksLTDataSet и AdventureWorksLTDataSetProductTableAdapter находились за рамками метода и были доступны всей форме. Объявите их глобальными только для формы и назначьте их в обработчике событий Window_Loaded примерно следующим образом.

           private AdventureWorksProductsEditor.AdventureWorksLTDataSet AdventureWorksLTDataSet;
           private AdventureWorksProductsEditor.AdventureWorksLTDataSetTableAdapters.ProductTableAdapter adventureWorksLTDataSetProductTableAdapter;
           private System.Windows.Data.CollectionViewSource productViewSource;
   
           private void Window_Loaded(object sender, RoutedEventArgs e)
           {
               AdventureWorksLTDataSet = ((AdventureWorksProductsEditor.AdventureWorksLTDataSet)(this.FindResource("adventureWorksLTDataSet")));
               // Load data into the table Product. You can modify this code as needed.
               adventureWorksLTDataSetProductTableAdapter = new AdventureWorksProductsEditor.AdventureWorksLTDataSetTableAdapters.ProductTableAdapter();
               adventureWorksLTDataSetProductTableAdapter.Fill(AdventureWorksLTDataSet.Product);
               productViewSource = ((System.Windows.Data.CollectionViewSource)(this.FindResource("productViewSource")));
               productViewSource.View.MoveCurrentToFirst();
           }
   

       Dim ProductViewSource As System.Windows.Data.CollectionViewSource
       Dim AdventureWorksLTDataSet As AdventureWorksProductsEditor.AdventureWorksLTDataSet
       Dim AdventureWorksLTDataSetProductTableAdapter As AdventureWorksProductsEditor.AdventureWorksLTDataSetTableAdapters.ProductTableAdapter
   
       Private Sub Window_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded
           AdventureWorksLTDataSet = CType(Me.FindResource("AdventureWorksLTDataSet"), AdventureWorksProductsEditor.AdventureWorksLTDataSet)
           'Load data into the table Product. You can modify this code as needed.
           AdventureWorksLTDataSetProductTableAdapter = New AdventureWorksProductsEditor.AdventureWorksLTDataSetTableAdapters.ProductTableAdapter()
           AdventureWorksLTDataSetProductTableAdapter.Fill(AdventureWorksLTDataSet.Product)
           ProductViewSource = CType(Me.FindResource("ProductViewSource"), System.Windows.Data.CollectionViewSource)
           ProductViewSource.View.MoveCurrentToFirst()
       End Sub
   

3. Добавьте следующий код в обработчик событий backButton_Click.

               if (productViewSource.View.CurrentPosition > 0)
               {
                   productViewSource.View.MoveCurrentToPrevious();
               }
   

           If ProductViewSource.View.CurrentPosition > 0 Then
               ProductViewSource.View.MoveCurrentToPrevious()
           End If
   

4. Вернитесь в конструктор и дважды щелкните кнопку >.

5. Добавьте следующий код в обработчик событий nextButton_Click.

               if (productViewSource.View.CurrentPosition < ((CollectionView)productViewSource.View).Count - 1)
               {
                   productViewSource.View.MoveCurrentToNext();
               }
   

           If ProductViewSource.View.CurrentPosition < CType(ProductViewSource.View, CollectionView).Count - 1 Then
               ProductViewSource.View.MoveCurrentToNext()
           End If
   

Сохранение изменений в записях продуктов

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

Добавление возможности сохранения изменений в записях продуктов

1. В конструкторе дважды щелкните кнопку Сохранить изменения.

   Visual Studio открывает файл кода программной части и создает новый обработчик событий saveButton_Click для события Click.

2. Добавьте следующий код в обработчик событий saveButton_Click.

               adventureWorksLTDataSetProductTableAdapter.Update(AdventureWorksLTDataSet.Product);
   

           AdventureWorksLTDataSetProductTableAdapter.Update(AdventureWorksLTDataSet.Product)
   

   Примечание

   В этом примере для сохранения изменений используется метод Save объекта TableAdapter. В данном пошаговом руководстве это целесообразно, так как изменяется только одна таблица данных. Если необходимо сохранить изменения нескольких таблиц, можно воспользоваться методом UpdateAll объекта TableAdapterManager, который Visual Studio создает вместе с вашим набором данных. Для получения дополнительной информации см. Общие сведения о компоненте TableAdapterManager.

Тестирование приложения

Выполните сборку и запуск приложения. Убедитесь, что вы можете просмотреть и обновить записи продуктов.

Тестирование приложения

1. Нажмите клавишу F5.

   Выполняется сборка и запуск приложения. Проверьте следующее.

   • Текстовые поля отображают данные из первой записи продукта с фотографией. Этот продукт имеет идентификатор 713 и имя Long-Sleeve Logo Jersey, S.

   • Вы можете нажать кнопку > или < для перехода по другим записям продуктов.

2. В одной из записей продуктов измените значение Размер, а затем нажмите кнопку Сохранить изменения.

3. Закройте приложение и перезапустите его, нажав клавишу F5 в Visual Studio.

4. Перейдите к измененной записи продукта и убедитесь, что изменения сохранены.

5. Закройте приложение.

Следующие действия

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

• Узнайте, как использовать окно Источники данных в Visual Studio для привязки элементов управления WPF к другим типам источников данных. Для получения дополнительной информации см. Пошаговое руководство. Привязка элементов управления WPF к службе данных WCF.

• Узнайте, как использовать окно Источники данных в Visual Studio для отображения связанных данных (то есть данных в отношении "родитель — потомок") в элементах управления WPF. Для получения дополнительной информации см. Пошаговое руководство. Отображение связанных данных в приложении WPF.

См. также

Привязка элементов управления WPF к данным в Visual Studio
Практическое руководство. Привязка элементов управления WPF к данным в Visual Studio
Работа с наборами данных в Visual Studio
Общие сведения о конструкторах WPF и Silverlight
Общие сведения о связывании данных