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

Статья
02/20/2013

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

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

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

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

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

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

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

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

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

Предварительное ознакомление со следующими понятиями полезно, но не обязательно для выполнения пошагового руководства:

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

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

Создание нового проекта WPF.Проект отобразит записи о продуктах.

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

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

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

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

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

Для создания набора данных выполните следующие действия

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

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

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

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

Настройка заданного по умолчанию метода наполнения адаптера таблицы

Для наполнения набора данных данными используется метод Fill адаптера ProductTableAdapter.По умолчанию метод Fill наполняет ProductDataTable в AdventureWorksLTDataSet всеми строками данных в таблице "Product".Этот метод можно изменить, чтобы он возвращал только подмножество строк.Для этого руководства измените метод 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>

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

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

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

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

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

Щелкните раскрывающееся меню рядом с ThumbNailPhoto и выберите пункт Image.

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

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

Перетащите узел Product из окна Источники данных на строку сетки, расположенную под строкой, содержащей кнопки.

Visual Studio генерирует язык XAML, который определяет набор элементов управления, связанных с данными в таблице Products.Кроме того, генерируется код для загрузки этих данных.Дополнительные сведения о сгенерированном языке XAML и коде см. в разделе Привязка элементов управления WPF к данным в Visual Studio.
В конструкторе щелкните текстовое поле рядом с меткой ID продукта.
В окне Свойства установите флажок около свойства 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.

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

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

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

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

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

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

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

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

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