Tutorial: Usar DesignInstance para enlazar datos en el diseñador

En este tutorial se muestra cómo usar WPF Designer for Visual Studio para crear enlaces de datos en tiempo de diseño para un contexto de datos que se asigna en tiempo de ejecución. Para crear el enlace de datos, use el generador de enlace de datos a fin de crear un contexto de datos en tiempo de diseño especial y establecer DesignInstance en un tipo de objeto de negocios. DesignInstance es una propiedad en tiempo de diseño.

En este tutorial realizará las siguientes tareas:

• Crear el proyecto.

• Crear un objeto de negocios de la clase Customer.

• Enlazar los datos de un control TextBox a una instancia en tiempo de diseño de la clase Customer en un contexto de datos.

Cuando haya terminado, tendrá un cuadro de texto que se enlaza en tiempo de ejecución a un objeto de negocios. El enlace de datos se establece en WPF Designer.

Nota

Los cuadros de diálogo y comandos de menú que se ven pueden diferir de los descritos en la Ayuda, en función de los valores de configuración o de edición activos. Para cambiar la configuración, elija la opción Importar y exportar configuraciones del menú Herramientas. 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.

Crear el proyecto

El primer paso consiste en crear un proyecto de aplicación WPF y habilitar las propiedades en tiempo de diseño.

Para crear el proyecto

1. Cree un nuevo proyecto de aplicación WPF en Visual Basic o en Visual C# denominado DataBindingDemo. Para obtener más información, vea Cómo: Crear un nuevo proyecto de aplicación de WPF.

   MainWindow.xaml se abre en WPF Designer.

2. En la Vista de diseño, haga clic en la etiqueta de tamaño de raíz () que aparece en la parte inferior derecha de MainWindow para establecer la opción de ajuste de tamaño automático para el tamaño raíz.

   En la vista XAML, el diseñador agrega la asignación del espacio de nombres d, que habilita el acceso a los atributos en tiempo de diseño, como DesignHeight y DesignInstance.

Crear el objeto de negocios

A continuación, cree el objeto de negocios. El objeto de negocios es una clase Customer simple que tiene las propiedades FirstName y LastName.

Nota

No es necesario que el tipo de objeto de negocios se pueda crear para su uso en el enlace de datos en tiempo de diseño. Por ejemplo, puede enlazar a una clase abstracta en tiempo de diseño.

Para crear el objeto de negocios

1. Agregue al proyecto una nueva clase denominada Customer. Para obtener más información, vea Cómo: Agregar nuevos elementos de proyecto.

2. Reemplace el código generado automáticamente por el código siguiente.

   using System;
   using System.Collections.Generic;
   using System.Linq;
   using System.Text;
   
   namespace DataBindingDemo
   {
       public class Customer
       {   
           public string FirstName { get; set; }
           public string LastName { get; set; }
       }
   }
   

Establecer el contexto de datos en tiempo de diseño

Para crear los enlaces de datos mediante el generador de enlace de datos, debe crear un contexto de datos en tiempo de diseño especial y establecer DesignInstance en el tipo del objeto de negocios.

Para establecer el contexto de datos en tiempo de diseño

1. Abra MainWindow.xaml en WPF Designer.

2. En la vista XAML, agregue la siguiente asignación de espacio de nombres a la etiqueta de apertura de MainWindow. Para obtener más información, vea Cómo: Importar un espacio de nombres a XAML.

   xmlns:local="clr-namespace:DataBindingDemo"
   

3. Reemplace la etiqueta de apertura del elemento Grid por el código XAML siguiente.

   <Grid d:DataContext="{d:DesignInstance Type=local:Customer}" Name="_grid">
   

   Este código XAML establece un contexto de datos en tiempo de diseño y hace que la clase Customer esté disponible para crear enlaces de datos.

4. Compile la solución.

Crear el enlace de datos

Ahora puede crear enlaces de datos al objeto de negocios Customer mediante el generador de enlace de datos. En el procedimiento siguiente se muestra cómo enlazar un control TextBox a la propiedad FirstName de un objeto Customer.

Para crear el enlace de datos

1. Desde el Cuadro de herramientas, arrastre un control TextBox hasta Window.

2. En la ventana Propiedades, desplácese a la propiedad Text.

3. En el borde de la columna izquierda, haga clic en el marcador de propiedad ().

   Aparece un menú.

   Sugerencia
   También puede hacer clic con el botón secundario en la fila para mostrar el menú.

4. Haga clic en Aplicar enlace de datos.

   Aparece el generador de enlace de datos, con el recuadro Ruta de acceso abierto.

   

5. Haga clic en FirstName y presione Entrar.

   En la vista XAML, la propiedad Text tiene un enlace de datos a la propiedad FirstName del tipo Customer.

Establecer el contexto de datos en tiempo de ejecución

Por último, se asigna el contexto de datos en tiempo de ejecución. El enlace de datos creado en tiempo de diseño funciona en tiempo de ejecución sin ningún cambio en XAML o en el código.

Para establecer el contexto de datos en tiempo de ejecución

1. En el editor de código, abra MainWindow.xaml.cs o MainWindow.xaml.vb.

2. Reemplace el constructor MainWindow generado automáticamente por el código siguiente.

   public MainWindow()
   {
       InitializeComponent();
   
       Customer c = new Customer();
       c.FirstName = "Brenda";
       c.LastName = "Diaz";
   
       this._grid.DataContext = c;
   }
   

3. Presione F5 para ejecutar la aplicación.

   El cuadro de texto muestra el nombre del objeto Customer que se creó en tiempo de ejecución.

   

Pasos siguientes

• Puede establecer un enlace a datos en tiempo de diseño de ejemplo, lo que ayuda a construir un comportamiento de diseño correcto en tiempo de ejecución cuando los datos reales están disponibles. Para obtener más información, vea Tutorial: Usar datos de ejemplo en WPF Designer.

Vea también

Referencia

DataContext

Otros recursos

Atributos en tiempo de diseño

Enlace de datos en WPF Designer