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

Статья
08/11/2011

В этом пошаговом руководстве описывается создание приложения Silverlight, которое содержит связанные с данными элементы управления. Элементы управления привязаны к 2 связанным бизнес-объектам, которые были определены пользователями.

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

Создание приложения Silverlight.
Создание 2 связанных пользовательских объектов для привязки к пользовательскому интерфейсу.
Выполнение мастера настройки источника данных для подключения к пользовательскому объекту, который заполняет окно Источники данных.
Создание набора элементов управления с привязкой к данным путем перетаскивания элементов из окна Источники данных в Конструктор Silverlight.

Примечание

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

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

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

Visual Studio 2010.

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

Работа с Конструктор Silverlight. Дополнительные сведения см. на странице Silverlight.
Привязка данных Silverlight. Дополнительные сведения см. в разделе Привязка данных.
Работа с библиотеками XAML. Дополнительные сведения см. в разделе XAML.

Создание приложения Silverlight

Начните выполнение этого пошагового руководства с создания приложения Silverlight.

Чтобы создать проект Silverlight

В меню Файл создайте новый проект.
В узле Visual C# или Visual Basic последовательно щелкните Silverlight и Приложение Silverlight.
В поле Имя введите SilverlightObjectBinding и нажмите кнопку ОК.
Не изменяйте параметры по умолчанию в диалоговом окне Создать приложение Silverlight и нажмите кнопку ОК.

Приложение Silverlight будет создано как решение с двумя проектами: проект SilverlightObjectBinding и проект SilverlightObjectBinding.Web, который используется для размещения проекта SilverlightObjectBinding.

Создание пользовательских объектов для привязки

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

Чтобы создать объекты Customer

В обозревателе решений щелкните правой кнопкой мыши проект SilverlightObjectBinding, щелкните "Добавить", затем — Новый элемент.
В диалоговом окне Добавление нового элемента выберите элемент Класс.
Измените имя на Customer и нажмите кнопку Добавить.

В файле кода Customer замените класс Customer на следующий код.

''' <summary>
''' A single customer
''' </summary>
Public Class Customer

    Public Sub New()
    End Sub

    ''' <summary>
    ''' Creates a new customer
    ''' </summary>
    ''' <param name="customerId">The ID that uniquely identifies this customer</param>
    ''' <param name="companyName">The name for this customer</param>
    ''' <param name="city">The city for this customer</param>
    Public Sub New(ByVal customerId As String,
                   ByVal companyName As String,
                   ByVal city As String)
        customerIDValue = customerId
        companyNameValue = companyName
        cityValue = city
    End Sub

    Private customerIDValue As String
    ''' <summary>
    ''' The ID that uniquely identifies this customer
    ''' </summary>
    Public Property CustomerID() As String
        Get
            Return customerIDValue
        End Get
        Set(ByVal value As String)
            customerIDValue = value
        End Set
    End Property

    Private companyNameValue As String
    ''' <summary>
    ''' The name for this customer
    ''' </summary>
    Public Property CompanyName() As String
        Get
            Return companyNameValue
        End Get
        Set(ByVal Value As String)
            companyNameValue = Value
        End Set
    End Property

    Private cityValue As String
    ''' <summary>
    ''' The city for this customer
    ''' </summary>
    Public Property City() As String
        Get
            Return cityValue
        End Get
        Set(ByVal Value As String)
            cityValue = Value
        End Set
    End Property

    Private ordersValue As Orders
    ''' <summary>
    ''' The orders for this customer
    ''' </summary>
    Public Property Orders As Orders
        Get
            Return ordersValue
        End Get
        Set(ByVal value As Orders)
            ordersValue = value
        End Set
    End Property


    Public Overrides Function ToString() As String
        Return Me.CompanyName & " (" & Me.CustomerID & ")"
    End Function
End Class


''' <summary>
''' A collection of Customer objects.
''' </summary>
''' <remarks></remarks>
Public Class Customers
    Inherits System.Collections.Generic.List(Of Customer)

End Class

/// <summary>
/// A single customer
/// </summary>
public class Customer
{
    /// <summary>
    /// Creates a new customer
    /// </summary>
    public Customer()
    {
    }

    /// <summary>
    /// Creates a new customer
    /// </summary>
    /// <param name="customerID"></param>
    /// <param name="companyName"></param>
    /// <param name="city"></param>
    public Customer(string customerID, string companyName,
       string city)
    {
        customerIDValue = customerID;
        companyNameValue = companyName;
        cityValue = city;
    }

    private string customerIDValue;
    /// <summary>
    /// The ID that uniquely identifies this customer
    /// </summary>
    public string CustomerID
    {
        get { return customerIDValue; }
        set { customerIDValue = value; }
    }

    private string companyNameValue;
    /// <summary>
    /// The name for this customer
    /// </summary>
    public string CompanyName
    {
        get { return companyNameValue; }
        set { companyNameValue = value; }
    }

    private string cityValue;
    /// <summary>
    /// The city for this customer
    /// </summary>
    public string City
    {
        get { return cityValue; }
        set { cityValue = value; }
    }

    private Orders ordersValue;
    /// <summary>
    /// The orders for this customer
    /// </summary>
    public Orders Orders
    {
        get { return ordersValue; }
        set { ordersValue = value; }
    }

    public override string ToString()
    {
        return this.CompanyName + " (" + this.CustomerID + ")";
    }
}

/// <summary>
/// A collection of Customer objects
/// </summary>
public class Customers : System.Collections.Generic.List<Customer>
{

}

Чтобы создать объекты Orders

В обозревателе решений щелкните правой кнопкой мыши проект SilverlightObjectBinding, щелкните Добавить, затем — Новый элемент.
В диалоговом окне Добавление нового элемента выберите элемент Класс.
Измените имя на Order и нажмите кнопку Добавить.

В файле кода Order замените класс Order на следующий код.

''' <summary>
''' A single order
''' </summary>
Public Class Order

    Public Sub New()
    End Sub

    ''' <summary>
    ''' Creates a new order
    ''' </summary>
    ''' <param name="orderid">The identifier for this order</param>
    ''' <param name="customerID">The customer who placed this order</param>
    Public Sub New(ByVal orderid As Integer,
                   ByVal customerID As String)
        orderIDValue = orderid
        customerIDValue = customerID
    End Sub

    Private orderIDValue As Integer
    ''' <summary>
    ''' Identifier for this order
    ''' </summary>
    Public Property OrderID() As Integer
        Get
            Return orderIDValue
        End Get
        Set(ByVal value As Integer)
            orderIDValue = value
        End Set
    End Property

    Private customerIDValue As String
    ''' <summary>
    ''' The customer who placed this order
    ''' </summary>
    Public Property CustomerID() As String
        Get
            Return customerIDValue
        End Get
        Set(ByVal Value As String)
            customerIDValue = Value
        End Set
    End Property
End Class

''' <summary>
''' A collection of Orders
''' </summary>
Public Class Orders
    Inherits System.Collections.Generic.List(Of Order)

End Class

/// <summary>
/// A single order
/// </summary>
public class Order
{
    /// <summary>
    /// Creates a new order
    /// </summary>
    /// <param name="orderid"></param>
    /// <param name="customerID"></param>
    public Order(int orderid, string customerID)
    {
        orderIDValue = orderid;
        customerIDValue = customerID;
    }

    private int orderIDValue;
    /// <summary>
    /// The ID that uniquely identifies this order
    /// </summary>
    public int OrderID
    {
        get { return orderIDValue; }
        set { orderIDValue = value; }
    }

    private string customerIDValue;
    /// <summary>
    /// The customer who placed this order
    /// </summary>
    public string CustomerID
    {
        get { return customerIDValue; }
        set { customerIDValue = value; }
    }
}

/// <summary>
/// A collection of Order objects
/// </summary>
public class Orders : System.Collections.Generic.List<Order>
{

}

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

Создание источника данных объекта

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

Чтобы создать источник данных объекта

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

Запустится Мастер настройки источника данных.
На странице Выбор типа источника данных выберите Объект и нажмите кнопку Далее.
На странице Выбор объектов данных дважды разверните представление в виде дерева и установите флажок рядом с пунктом Customers.

Примечание

Убедитесь, что выбран пункт Customers, а не пункт Customer.Если объект Customers недоступен, закройте мастер и повторно постройте решение.
Нажмите кнопку Готово.

Окно Источники данных будет заполнено на основе источника данных объектов.

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

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

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

Откройте в представлении конструктора MainPage.xaml.
Из окна Источники данных перетащите узел Customers в конструктор.
Из окнаИсточники данных перетащите узел Orders в конструктор под сетку клиентов.

Заполнение объектов данными и привязка их к созданному объекту CollectionViewSource

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

После перетаскивания источника данных объектов из окна Источники данных создается комментарий к коду, который способствует настройке привязки источника данных к пользовательскому объекту. Удалите созданный комментарий к коду и привяжите источник данных [System.Windows.Data.CollectionViewSource.Source] (myCollectionViewSource) к коллекции объектов данных. В следующей процедуре показано, как изменить созданный код для его привязки к созданным элементам управления.

Каждый раз при перетаскивании элементов из окна Источники данных в конструктор на странице Silverlight создается объект [System.Windows.Data.CollectionViewSource]. Его имя основано на используемом источнике данных. Замените комментарий 'Resource Key for CollectionViewSource' на CustomersViewSource или customerViewSource в зависимости от используемого языка программирования.

Чтобы заполнить объекты дынными и привязать элементы управления к объектам

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

В фале кода (MainPage.xaml.vb или MainPage.xaml.cs) добавьте следующий метод в класс MainPage:

' Create sample data.
Private Function GetCustomers() As Customers

    Dim customers As New Customers

    ' Create 3 sample customers,
    ' each with 3 sample orders.
    Dim cust1 As New Customer("1", "A Bike Store", "Seattle")
    Dim cust1Orders As New Orders
    cust1Orders.Add(New Order(1, cust1.CustomerID))
    cust1Orders.Add(New Order(2, cust1.CustomerID))
    cust1Orders.Add(New Order(3, cust1.CustomerID))
    cust1.Orders = cust1Orders

    Dim cust2 As New Customer("2", "Progressive Sports", "Renton")
    Dim cust2Orders As New Orders
    cust2Orders.Add(New Order(4, cust2.CustomerID))
    cust2Orders.Add(New Order(5, cust2.CustomerID))
    cust2Orders.Add(New Order(6, cust2.CustomerID))
    cust2.Orders = cust2Orders

    Dim cust3 As New Customer("3", "Advanced Bike Components", "Irving")
    Dim cust3Orders As New Orders
    cust3Orders.Add(New Order(7, cust3.CustomerID))
    cust3Orders.Add(New Order(8, cust3.CustomerID))
    cust3Orders.Add(New Order(9, cust3.CustomerID))
    cust3.Orders = cust3Orders

    ' Add the sample customer objects to the 
    ' Customers collection.
    customers.Add(cust1)
    customers.Add(cust2)
    customers.Add(cust3)

    Return customers
End Function

// Create sample data.
private Customers GetCustomers()
{
    Customers customers = new Customers();

    // Create 3 sample customers,
    // each with 3 sample orders.
    Customer cust1 = new Customer("1", "A Bike Store", "Seattle");
    Orders cust1Orders = new Orders();
    cust1Orders.Add(new Order(1, cust1.CustomerID));
    cust1Orders.Add(new Order(2, cust1.CustomerID));
    cust1Orders.Add(new Order(3, cust1.CustomerID));
    cust1.Orders = cust1Orders;

    Customer cust2 = new Customer("2", "Progressive Sports", "Renton");
    Orders cust2Orders = new Orders();
    cust2Orders.Add(new Order(4, cust2.CustomerID));
    cust2Orders.Add(new Order(5, cust2.CustomerID));
    cust2Orders.Add(new Order(6, cust2.CustomerID));
    cust2.Orders = cust2Orders;

    Customer cust3 = new Customer("3", "Advanced Bike Components", "Irving");
    Orders cust3Orders = new Orders();
    cust3Orders.Add(new Order(7, cust3.CustomerID));
    cust3Orders.Add(new Order(8, cust3.CustomerID));
    cust3Orders.Add(new Order(9, cust3.CustomerID));
    cust3.Orders = cust3Orders;

    // Add the sample customer objects to the 
    // Customers collection.
    customers.Add(cust1);
    customers.Add(cust2);
    customers.Add(cust3);

    return customers;
}

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

Private Sub UserControl_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded

    'Do not load your data at design time.
    If Not (System.ComponentModel.DesignerProperties.GetIsInDesignMode(Me)) Then
        'Load your data here and assign the result to the CollectionViewSource.
        Dim myCollectionViewSource As System.Windows.Data.CollectionViewSource = CType(Me.Resources("CustomersViewSource"), System.Windows.Data.CollectionViewSource)
        myCollectionViewSource.Source = GetCustomers()
    End If
End Sub

private void UserControl_Loaded(object sender, RoutedEventArgs e)
{

    // Do not load your data at design time.
    if (!System.ComponentModel.DesignerProperties.GetIsInDesignMode(this))
    {
        //Load your data here and assign the result to the CollectionViewSource.
        System.Windows.Data.CollectionViewSource myCollectionViewSource = (System.Windows.Data.CollectionViewSource)this.Resources["customersViewSource"];
        myCollectionViewSource.Source = GetCustomers();
    }
}

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

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

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

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

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

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

Узнайте, как сохранить изменения в хранилище данных. Дополнительные сведения см. в разделе Привязка данных.

См. также

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

Доступ к данным в Visual Studio

Data Access and Data Structures

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

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

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

Создание приложения Silverlight

Чтобы создать проект Silverlight

Создание пользовательских объектов для привязки

Чтобы создать объекты Customer

Чтобы создать объекты Orders

Создание источника данных объекта

Чтобы создать источник данных объекта

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

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

Заполнение объектов данными и привязка их к созданному объекту CollectionViewSource

Чтобы заполнить объекты дынными и привязать элементы управления к объектам

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

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

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

См. также

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

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