Compartir a través de

Tutorial: Usar datos de ejemplo en WPF Designer

  • Artículo

En este tutorial, se muestra cómo utilizar los datos de ejemplo de WPF Designer for Visual Studio para crear enlaces de datos en tiempo de diseño. Si los datos de ejemplo se muestran en tiempo de diseño, es posible asegurar un comportamiento correcto del diseño en tiempo de ejecución. Para que los datos de ejemplo sean accesibles para los controles en el diseñador, se aplica la acción de compilación DesignData al archivo de datos de ejemplo y se hace referencia al archivo en el atributo en tiempo de diseño DesignData.

En este tutorial realizará las siguientes tareas:

  • Crear el proyecto.

  • Crear un objeto de negocios de la clase Customer.

  • Crear archivos XAML que contienen los datos de ejemplo.

  • Enlazar controles TextBox y DataGrid a los datos de ejemplo.

Cuando termine, tendrá controles DataGrid y TextBox enlazados en tiempo de diseño a los datos de ejemplo. 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 de WPF en Visual C# denominado DesignDataDemo. Para obtener más información, vea Cómo: Crear un nuevo proyecto de aplicación de WPF.

    MainWindow.xaml se abrirá en WPF Designer.

  2. En la Vista de diseño, haga clic en la etiqueta de tamaño de raíz (etiqueta de tamaño de elemento 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 las propiedades en tiempo de diseño, como DesignInstance y DataContext.

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, LastName y CustomerID.

Para crear el objeto de negocios

  1. Agregue al proyecto una nueva clase denominada Customer.

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

Crear los archivos de datos en tiempo de diseño

Defina los datos de ejemplo en tiempo de diseño creando instancias de los objetos de negocios en un archivo XAML. Para especificar que el archivo XAML tiene datos de ejemplo, establezca Acción de compilación en DesignData.

El diseñador reemplaza las instancias que se declaran en el archivo XAML por tipos que se generan automáticamente en tiempo de diseño y que tienen las mismas propiedades que los tipos de ejemplo. De este modo, se eliminan comportamientos en tiempo de ejecución, como consultas de base de datos, que podrían interferir con el diseñador. Estas propiedades son de solo lectura y se establecen en el archivo de los datos de ejemplo.

Utilice la acción de compilación DesignDataWithDesignTimeCreatableTypes para reemplazar este comportamiento e indicar que el diseñador va a crear instancias de los tipos de los datos de ejemplo.

Para crear los archivos de datos en tiempo de diseño

  1. En el Explorador de soluciones, agregue al proyecto una nueva carpeta denominada DesignData.

  2. En la carpeta DesignData, agregue un nuevo archivo de texto denominado SampleCustomer.xaml.

    SampleCustomer.xaml se abrirá en la vista XAML.

    Nota

    También puede utilizar un diccionario de recursos.

  3. Agregue el siguiente código XML.

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

  4. En la carpeta DesignData, agregue un nuevo archivo de texto denominado SampleCustomers.xaml.

    SampleCustomers.xaml se abrirá en la vista XAML.

  5. Agregue el siguiente código XML.

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

  6. En el Explorador de soluciones, seleccione ambos archivos de datos de ejemplo.

  7. En la ventana Propiedades, establezca la opción Acción de compilación en DesignData, asegúrese de que la opción Copiar en el directorio de salida esté establecida en No copiar y borre el campo Herramienta personalizada.

    Nota

    Para la opción Acción de compilación, también puede seleccionar DesignDataWithDesignTimeCreatableTypes.

Establecer el contexto de datos en tiempo de diseño

Para crear un contexto de datos en tiempo de diseño que proporcione datos de ejemplo, utilice el atributo en tiempo de diseño d:DataContext con la extensión de marcado d:DesignData.

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 Window. Para obtener más información, vea Cómo: Importar un espacio de nombres a XAML.

    xmlns:local="clr-namespace:DesignDataDemo"

  3. Genere la solución.

  4. En la Vista de diseño, agregue una línea de cuadrícula horizontal cerca del centro del control Grid para definir dos filas. Para obtener más información, vea Cómo: Agregar filas y columnas a una cuadrícula.

  5. Desde el cuadro de herramientas, arrastre un control StackPanel hasta la fila superior.

  6. En la vista XAML, reemplace el elemento StackPanel por el siguiente código XAML.

    <StackPanel d:DataContext="{d:DesignData Source=./DesignData/SampleCustomer.xaml}" Grid.Row="0"></StackPanel>

    Este código XAML establece un contexto de datos en tiempo de diseño para StackPanel y sus controles secundarios. Además, hace que los datos de ejemplo estén disponibles para el enlace de datos.

Enlazar a una sola instancia de los datos de ejemplo

Es posible enlazar a cualquier propiedad de la instancia de Customer en el archivo SampleCustomer.xaml. En el siguiente procedimiento, se muestra cómo enlazar la propiedad FirstName a un control TextBox mediante el generador de enlace de datos. Para obtener más información, vea Tutorial: Crear un enlace de datos mediante WPF Designer.

Para enlazar un control TextBox a los datos de ejemplo

  1. Arrastre un control TextBox del cuadro de herramientas hasta el control StackPanel.

  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 (marcador de propiedad).

    Aparece un menú.

    SugerenciaSugerencia

    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 la propiedad FirstName.

    Generador de enlaces de datos para una sola instancia

  6. En la Vista de diseño, observe que el control TextBox muestra el valor de FirstName especificado en el archivo SampleCustomer.xaml.

    Enlazar un control TextBox a los datos de ejemplo

Enlazar a una colección de datos de ejemplo

En el siguiente procedimiento, se muestra cómo enlazar un control DataGrid a una colección de objetos Customer en el archivo SampleCustomers.xaml.

Para enlazar un control DataGrid a una colección de datos de ejemplo

  1. Desde el cuadro de herramientas, arrastre un control DataGrid hasta la segunda fila de la cuadrícula y ajuste su tamaño de modo que rellene la fila.

  2. En la vista XAML, reemplace el elemento DataGrid por el siguiente código XAML.

    <DataGrid Grid.Row="1" d:DataContext="{d:DesignData Source=./DesignData/SampleCustomers.xaml}" />

    Este código XAML establece un contexto de datos en tiempo de diseño para DataGrid y hace que los datos de ejemplo estén disponibles para el enlace de datos.

  3. Seleccione DataGrid.

  4. En la ventana Propiedades, desplácese a la propiedad ItemsSource.

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

  6. Haga clic en Aplicar enlace de datos.

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

    Generador de enlaces de datos para una colección

  7. En la Vista de diseño, observe que el control DataGrid se rellena con las instancias de Customer en el archivo SampleCustomers.xaml.

    Enlazar un control DataGrid a una colección de datos de ejemplo

Vea también

Tareas

Tutorial: Crear un enlace de datos mediante WPF Designer

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

Referencia

DataGrid

TextBox