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

Статья
06/10/2015

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

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

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

Примечание

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

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

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

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

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

Наборы данных и адаптеры таблицы. Дополнительные сведения см. в разделах Работа с наборами данных в Visual Studio и Общие сведения об адаптере таблиц.
Работа с Конструктором WPF. Для получения дополнительной информации см. WPF Designer Overview.
Привязка данных WPF. Для получения дополнительной информации см. Общие сведения о связывании данных.

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

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

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

Запустите Visual Studio.
В меню Файл выберите пункт Создать, а затем команду Проект.
Разверните Visual Basic или Visual C# и выберите Windows.
Выберите шаблон проекта Приложение WPF.
В поле Имя введите AdventureWorksProductsEditor и нажмите кнопку ОК.

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

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

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

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

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

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

Появится мастер настройки источника данных.
На странице Выбор типа источника данных выберите База данных и нажмите кнопку Далее.
На странице Выбор модели базы данных выберите Набор данных и нажмите кнопку Далее.
На странице Выбор подключения к базе данных выберите один из следующих параметров.
- Если подключение к учебной базе данных AdventureWorksLT доступно в раскрывающемся списке, то выберите его и нажмите кнопку Далее.
  
  -или-
- Щелкните Создать подключение и создайте подключение к базе данных AdventureWorksLT.
На странице Сохранение подключения в файле конфигурации приложения установите флажок Да, сохранить подключение как и нажмите кнопку Далее.
На странице Выбор объектов базы данных разверните узел Таблицы и выберите таблицу Продукт (SalesLT).
Нажмите кнопку Готово.

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

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

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

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

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

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

Открывается Мастер настройки адаптера таблицы.
На странице Введите инструкцию SQL добавьте следующее предложение WHERE после инструкции SELECT в текстовом поле.
```
WHERE ThumbnailPhotoFileName <> 'no_image_available_small.gif'
```
Нажмите кнопку Готово.

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

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

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

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

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

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

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

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

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

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

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

В окне Источники данных щелкните раскрывающееся меню для узла Продукт и выберите команду Сведения.
Разверните узел Продукт.
Для данного примера некоторые поля не отображаются, поэтому щелкните раскрывающееся меню рядом со следующими узлами и выберите Нет.
- ProductCategoryID
- ProductModelID
- ThumbnailPhotoFileName
- rowguid
- ModifiedDate
Щелкните раскрывающееся меню рядом с узлом ThumbNailPhoto и выберите Изображение.

Примечание

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Visual Studio открывает файл кода программной части и создает новый обработчик событий saveButton_Click для события Click.
Добавьте следующий код в обработчик событий saveButton_Click.
```
AdventureWorksLTDataSetProductTableAdapter.Update(AdventureWorksLTDataSet.Product)
```
```
adventureWorksLTDataSetProductTableAdapter.Update(AdventureWorksLTDataSet.Product);
```
Примечание

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

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

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

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

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

Выполняется сборка и запуск приложения. Проверьте следующее.
- Текстовые поля отображают данные из первой записи продукта с фотографией. Этот продукт имеет идентификатор 713 и имя Long-Sleeve Logo Jersey, S.
- Вы можете нажать кнопку > или < для перехода по другим записям продуктов.
В одной из записей продуктов измените значение Размер, а затем нажмите кнопку Сохранить изменения.
Закройте приложение и перезапустите его, нажав клавишу F5 в Visual Studio.
Перейдите к измененной записи продукта и убедитесь, что изменения сохранены.
Закройте приложение.

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

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

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

См. также

Поделиться через

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

См. также

Задачи

Основные понятия

Другие ресурсы

Дополнительные ресурсы