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

Статья
08/11/2011

В данном пошаговом руководстве показано, как использовать образцы данных в Конструктор WPF для Visual Studio для создания привязки данных во время разработки. Отображение образцов данных во время разработки помогает убедиться, что макет будет правильно работать во время выполнения. Для того чтобы образцы данных были доступны элементам управления в конструкторе, вы применяете действие при построении DesignData к файлу данных образца и указываете этот файл в атрибуте времени разработки DesignData.

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

Создание проекта.
Создание бизнес-объекта класса Customer.
Создание файлов XAML для хранения образцов данных.
Привяжите элементы управления TextBox и DataGrid к образцу данных.

Когда вы закончите, у вас будут элементы управления TextBox и DataGrid, привязанные к образцу данных во время разработки. Привязка данных задается в сред. Конструктор WPF.

Примечание

Отображаемые диалоговые окна и команды меню могут отличаться от описанных в справке в зависимости от текущих настроек или выпуска.Чтобы изменить параметры, выберите в меню Сервис пункт Импорт и экспорт параметров.Дополнительные сведения см. в разделе Работа с параметрами.

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

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

Visual Studio 2010.

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

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

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

Создайте в Visual C# новый проект приложения WPF с именем DesignDataDemo. Дополнительные сведения см. в разделе Практическое руководство. Создание нового проекта приложения WPF.

Файл MainWindow.xaml будет открыт в сред. Конструктор WPF.
В конструкторе щелкните тег root size () в правом нижнем углу окна MainWindow, чтобы установить root size равным auto size.

В представлении XAML конструктор добавляет сопоставление пространства имен d, обеспечивающее возможность доступа к таким свойствам времени разработки, как DesignInstance и DataContext.

Создание бизнес-объекта

Теперь создайте бизнес-объект. Бизнес-объект – это просто класс Customer, который имеет свойства FirstName, LastName и CustomerID.

Создание бизнес-объекта

Добавьте в проект новый класс с именем Customer.

Замените автоматически создаваемый код на следующий код.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace DesignDataDemo
{
    // The Customer class defines a simple Customer business object.
    class Customer
    {
        // Default constructor is required for usage as sample data 
        // in the WPF and Silverlight Designer.
        public Customer() {}

        public string FirstName { get; set; }
        public string LastName { get; set; }
        public Guid CustomerID { get; set; }
        public int Age { get; set; }
    }

    // The CustomerCollection class defines a simple collection
    // for Customer business objects.
    class CustomerCollection : List<Customer>
    {
        // Default constructor is required for usage in the WPF Designer.
        public CustomerCollection() {}
    }
}

Создание файлов данных времени разработки

Определите образец данных времени разработки, создав экземпляры бизнес-объектов в файле XAML. Можно указать, что файл XAML содержит образцы данных, задав для параметра Действие построения значение DesignData.

Конструктор заменяет экземпляры, объявленные в XAML-файле, автоматически созданными типами времени разработки, которые имеют те же свойства, что и образцы типов. Это устраняет поведения во время выполнения, такие как запросы к базе данных, которые могут конфликтовать с конструктором. Эти свойства доступны только для чтения, и они задаются в примере файла данных.

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

Создание файлов данных времени разработки

В обозревателе решений добавьте в проект новую папку с именем DesignData.
В папку DesignData добавьте новый текстовый файл с именем SampleCustomer.xaml.

Файл SampleCustomer.xaml откроется в представлении XAML.

Примечание

Можно также использовать словарь ресурсов.

Добавьте следующий код XAML.

<local:Customer 
    xmlns:local="clr-namespace:DesignDataDemo" 
    FirstName="Syed" LastName="Abbas" Age="23" CustomerID="E7181DC6-3F9E-45A4-A5F7-AC0B119D1FD8" />

В папку DesignData добавьте новый текстовый файл с именем SampleCustomers.xaml.

Файл SampleCustomers.xaml откроется в представлении XAML.

Добавьте следующий код XAML.

    <local:CustomerCollection 
    xmlns:local="clr-namespace:DesignDataDemo" >

    <local:Customer FirstName="Syed" LastName="Abbas" Age="23" CustomerID="E7181DC6-3F9E-45A4-A5F7-AC0B119D1FD8" />
    <local:Customer FirstName="Brenda" LastName="Diaz" Age="55" CustomerID="BB638D72-8B72-495A-B0F9-79F37964BBAE" />
    <local:Customer FirstName="Lori" LastName="Kane" Age="17" CustomerID="B168D811-5548-4D28-8171-318F9A4D7219" />

</local:CustomerCollection>

В обозревателе решений выберите оба файла образцов данных.
В окне "Свойства" задайте для параметра Действие построения значение DesignData, убедитесь, что для параметра Копировать в выходной каталог задано значение Не копировать и очистите поле Пользовательский инструмент.

Примечание

Для действия построения можно также выбрать значение DesignDataWithDesignTimeCreatableTypes.

Установка контекста данных времени разработки

Для создания контекста данных времени разработки, предоставляющего образцы данных, используется атрибут времени разработки d:DataContext с расширением разметки d:DesignData.

Установка контекста данных времени разработки

Откройте файл MainWindow.xaml в сред. Конструктор WPF.
В представлении XAML добавьте следующее сопоставление пространств имен в начальный тег Window. Дополнительные сведения см. в разделе Практическое руководство. Импорт пространства имен в XAML.
```
xmlns:local="clr-namespace:DesignDataDemo"
```
Выполните построение решения.
В представлении конструирования добавьте горизонтальную линию сетки вблизи центра элемента управления Grid, чтобы определить две строки. Дополнительные сведения см. в разделе Практическое руководство. Добавление строк и столбцов в таблицу.
Перетащите элемент управления StackPanel из панели элементов в верхнюю строку.
В представлении XAML замените элемент StackPanel следующим кодом XAML.
```
<StackPanel d:DataContext="{d:DesignData Source=./DesignData/SampleCustomer.xaml}" Grid.Row="0"></StackPanel>
```
Этот код XAML устанавливает контекст данных времени разработки для StackPanel и его дочерних элементов управления. Кроме того, он делает образец данных доступным для привязки данных.

Привязка к одному экземпляру образца данных

Можно выполнить привязку к любому свойству экземпляра Customer в файле SampleCustomer.xaml. В следующей процедуре показано, как привязать свойство FirstName к элементу управления TextBox с использованием построителя привязки данных. Дополнительные сведения см. в разделе Пошаговое руководство. Создание привязки данных с помощью конструктора WPF.

Привязка элемента управления TextBox к образцу данных

Перетащите элемент управления TextBox с панели элементов в элемент управления StackPanel.
В окне "Свойства" найдите свойство Text.
На границе левого столбца щелкните метку свойства ().

Появится меню.

Совет

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

Отобразится построитель привязки данных, в котором открыта область Путь.
Щелкните свойство FirstName.
В конструкторе обратите внимание, что элемент управления TextBox отображает значение FirstName, заданное в файле SampleCustomer.xaml.

Привязка коллекции к образцу данных

В следующей процедуре показано, как привязать элемент управления DataGrid к коллекции объектов Customer в файле SampleCustomers.xaml.

Привязка элемента управления DataGrid к коллекции образцов данных

Перетащите элемент управления DataGrid из панели элементов во вторую строку сетки и измените его размер, так чтобы он заполнял строку.
В представлении XAML замените элемент DataGrid следующим кодом XAML.
```
<DataGrid Grid.Row="1" d:DataContext="{d:DesignData Source=./DesignData/SampleCustomers.xaml}" />
```
Этот код XAML устанавливает контекст данных времени разработки для DataGrid и делает образцы данных доступными для связывания данных.
Выберите DataGrid.
В окне "Свойства" найдите свойство ItemsSource.
На границе левого столбца щелкните метку свойства ().
Щелкните Применить привязку данных.

Отобразится построитель привязки данных, в котором открыта область Путь.
В конструкторе обратите внимание, что элемент управления DataGrid заполнен экземплярами Customer в файле SampleCustomers.xaml.