Tutorial: Enlazar los controles de Silverlight a objetos
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 tu 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 que se tenga y la configuración que se utilice determinan estos elementos. Para obtener más información, consulte Personalizar la configuración de desarrollo en Visual Studio.
Requisitos previos
Necesita los componentes siguientes para completar este tutorial:
- Visual Studio
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
En el menú Archivo, cree un proyecto nuevo.
En el nodo de Visual C# o Visual Basic, haga clic en Silverlight y, a continuación, en Aplicación de Silverlight.
En el cuadro Nombre, escriba SilverlightObjectBinding y haga clic en Aceptar.
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
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.
En el cuadro de diálogo Agregar nuevo elemento, haga clic en el elemento Clase.
Cambie el nombre por Customer y haga clic en Agregar.
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
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.
En el cuadro de diálogo Agregar nuevo elemento, haga clic en el elemento Clase.
Cambie el nombre por Order y haga clic en Agregar.
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> { }
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
En el menú Datos, haga clic en Mostrar orígenes de datos.
En la ventana Orígenes de datos, seleccione Agregar nuevo origen de datos.
Aparece Asistente para la configuración del origen de datos.
En la página Elegir un tipo de origen de datos, haga clic en Objeto y, a continuación, en Siguiente.
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.
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
Abra MainPage.xaml en la vista de diseño
De la ventana Orígenes de datos, arrastre el nodo Customers hasta el formulario.
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
En Explorador de soluciones, expanda el nodo MainPage.xaml y, a continuación, haga doble clic en el archivo de código MainPage.xaml.
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; }
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
En el menú Compilar, haga clic en Compilar solución. Compruebe que la solución se compila sin errores.
Ejecute la aplicación.
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.
Seleccione un cliente diferente y compruebe que los pedidos se actualizan y muestran solo los pedidos de dicho cliente.
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.