Пошаговое руководство. Привязка элементов управления 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. Этот проект будет отображать записи продуктов.
Создание проекта
Запустите 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"><</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>
Выполните построение проекта.
Создание элементов управления с привязкой к данным
Создайте элементы управления, отображающие записи клиентов, перетащив таблицу Продукт
из окна Источники данных в Конструктор 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
примерно следующим образом.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
Добавьте следующий код в обработчик событий
backButton_Click
.if (productViewSource.View.CurrentPosition > 0) { productViewSource.View.MoveCurrentToPrevious(); }
If ProductViewSource.View.CurrentPosition > 0 Then ProductViewSource.View.MoveCurrentToPrevious() End If
Вернитесь в конструктор и дважды щелкните кнопку >.
Добавьте следующий код в обработчик событий
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
Сохранение изменений в записях продуктов
Добавьте код, позволяющий пользователям сохранять изменения в записях продуктов с помощью кнопки Сохранить изменения.
Добавление возможности сохранения изменений в записях продуктов
В конструкторе дважды щелкните кнопку Сохранить изменения.
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 к данным в Visual Studio
Практическое руководство. Привязка элементов управления WPF к данным в Visual Studio
Работа с наборами данных в Visual Studio
Общие сведения о конструкторах WPF и Silverlight
Общие сведения о связывании данных