Tutorial: Enlazar los controles de Silverlight a objetos

  • Artículo

En este tutorial, creará una aplicación de Silverlight que contiene controles enlazados a datos. Los controles se enlazan a dos objetos comerciales relacionados definidos por el usuario.

En este tutorial se muestran las tareas siguientes:

  • Crear una aplicación de Silverlight.

  • Crear dos objetos personalizados relacionados para enlazar a la interfaz de usuario.

  • Ejecutar el Asistente para la configuración de orígenes de datos para conectar con el objeto personalizado que rellena la ventana Orígenes de datos.

  • Crear un conjunto de controles enlazados a datos arrastrando elementos desde la ventana Orígenes de datos hasta el Silverlight Designer.

    Nota

    Es posible que su equipo muestre nombres o ubicaciones diferentes para algunos de los elementos de la interfaz de usuario de Visual Studio en las siguientes instrucciones. La edición de Visual Studio y la configuración que esté usando determinan estos elementos. Para obtener más información, vea Trabajar con valores de configuración.

Requisitos previos

Necesita los componentes siguientes para completar este tutorial:

  • Visual Studio 2010.

Para completar el tutorial, resulta útil, aunque no necesario, tener conocimiento previo de los siguientes conceptos:

  • Trabajar con Silverlight Designer. Para obtener más información, vea Silverlight.

  • Enlace de datos en Silverlight. Para obtener más información, vea Enlace de datos.

  • Trabajar con archivos XAML. Para obtener más información, vea XAML.

Crear la aplicación de Silverlight

Inicie este tutorial creando una aplicación de Silverlight.

Para crear el proyecto de Silverlight

  1. En el menú Archivo, cree un proyecto nuevo.

  2. En el nodo de Visual C# o Visual Basic, haga clic en Silverlight y, a continuación, en Aplicación de Silverlight.

  3. En el cuadro Nombre, escriba SilverlightObjectBinding y haga clic en Aceptar.

  4. Deje la configuración predeterminada en el cuadro de diálogo Nueva aplicación de Silverlight y haga clic en Aceptar.

    La aplicación de Silverlight se crea como una solución con dos proyectos: un proyecto SilverlightObjectBinding y un proyecto SilverlightObjectBinding.Web que se utilizan para hospedar el proyecto SilverlightObjectBinding.

Crear objetos personalizados con los que enlazar

Para exponer los datos a una aplicación, se debe definir un modelo de datos. En este tutorial creará objetos personalizados que representan clientes y pedidos para el modelo de datos.

Para crear objetos Customer

  1. En el Explorador de soluciones, haga clic con el botón secundario en el proyecto SilverlightObjectBinding, elija Agregar y, a continuación, haga clic en Nuevo elemento.

  2. En el cuadro de diálogo Agregar nuevo elemento, haga clic en el elemento Clase.

  3. Cambie el nombre por Customer y haga clic en Agregar.

  4. En el archivo de código Customer, reemplace la clase Customer por el código siguiente:

    ''' <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>
{

}

Para crear objetos Orders

  1. En el Explorador de soluciones, haga clic con el botón secundario en el proyecto SilverlightObjectBinding, elija Agregar y, a continuación, haga clic en Nuevo elemento.

  2. En el cuadro de diálogo Agregar nuevo elemento, haga clic en el elemento Clase.

  3. Cambie el nombre por Order y haga clic en Agregar.

  4. En el archivo de código Order, reemplace la clase Order por el siguiente código:

    ''' <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>
{

}

  5. Compile el proyecto.

Crear el origen de datos de objeto

Cree un origen de datos de objeto y rellene la ventana Orígenes de datos ejecutando el Asistente para la configuración de orígenes de datos.

Para crear el origen de datos de objeto

  1. En el menú Datos, haga clic en Mostrar orígenes de datos.

  2. En la ventana Orígenes de datos, seleccione Agregar nuevo origen de datos.

    Aparece el Asistente para la configuración del origen de datos.

  3. En la página Elegir un tipo de origen de datos, haga clic en Objeto y, a continuación, en Siguiente.

  4. En la página Seleccionar los objetos de datos, expanda la vista de árbol dos veces y, a continuación, active la casilla situada junto a Customers.

    Nota

    Asegúrese de seleccionar Customers en plural, no Customer en singular. Si Customers no está disponible, salga del asistente y recompile la solución.

  5. Haga clic en Finalizar.

    La ventana Orígenes de datos se rellena con el origen de datos de objeto.

Crear los controles enlazados a datos

Cree controles que muestren datos en los objetos arrastrando los nodos Customers y Orders desde la ventana Orígenes de datos hasta el diseñador.

Para crear los controles enlazados a datos

  1. Abra MainPage.xaml en la vista de diseño

  2. De la ventana Orígenes de datos, arrastre el nodo Customers hasta el formulario.

  3. De la ventana Orígenes de datos, arrastre el nodo Orders hasta el diseñador debajo de la cuadrícula de clientes.

Rellenar los objetos con datos y enlazarlos al CollectionViewSource generado

Dado que en este tutorial se utilizan objetos personalizados como modelo de datos, los datos de ejemplo se crean y cargan cuando se abre la página de Silverlight.

Después de arrastrar un origen de datos de objeto desde la ventana Orígenes de datos, se genera un comentario de código que ayuda a configurar el origen de datos para que señale al objeto personalizado. Quite el comentario de código generado y establezca [System.Windows.Data.CollectionViewSource.Source] (myCollectionViewSource) para que señale a la colección de objetos de datos. El siguiente procedimiento muestra cómo modificar el código generado para enlazarlo a los controles generados.

Cada vez que arrastra elementos de la ventana Orígenes de datos al diseñador, se genera un [System.Windows.Data.CollectionViewSource] en la página de Silverlight. El nombre está basado en el origen de datos que está utilizando. Reemplace el comentario que dice: 'Resource Key for CollectionViewSource' por CustomersViewSource o customerViewSource, dependiendo del lenguaje.

Para rellenar los objetos con datos y enlazar controles a los objetos

  1. En Explorador de soluciones, expanda el nodo MainPage.xaml y, a continuación, haga doble clic en el archivo de código MainPage.xaml.

  2. En el archivo de código (MainPage.xaml.vb o MainPage.xaml.cs) agregue el siguiente método a la clase 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;
}

  3. Reemplace el código comentado del controlador de eventos UserControl_Loaded por el siguiente:

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

Probar la aplicación

Compile y ejecute la aplicación para comprobar que puede ver los registros de clientes.

Para probar la aplicación

  1. En el menú Generar, haga clic en Generar solución. Compruebe que la solución se genera sin errores.

  2. Ejecute la aplicación.

  3. Compruebe que en la cuadrícula de datos aparecen tres clientes y que los pedidos del cliente seleccionado se muestran en la cuadrícula de los pedidos.

  4. Seleccione un cliente diferente y compruebe que los pedidos se actualizan y muestran solo los pedidos de dicho cliente.

  5. Cierre la aplicación.

Pasos siguientes

Después de completar este tutorial, puede realizar las siguientes tareas relacionadas:

  • Obtenga información sobre cómo guardar los cambios en el almacén de datos. Para obtener más información, vea Enlace de datos.

Vea también

Otros recursos

Obtener acceso a los datos en Visual Studio

Acceso a datos y estructuras de datos