Compartir a través de


Información general sobre el control de datos

Esta página es específica de WPF y Silverlight 2

Los datos son el corazón de todas las interfaces de usuario. Desde las reservas de hotel a la consulta del mercado de valores, las interfaces de usuario proporcionan una manera de visualizar e interactuar con alguna forma de datos. La elección de los componentes de la interfaz de usuario que van a estar visibles y la forma de disponerlos para que proporcionen un flujo de trabajo útil dependen principalmente de la naturaleza de los datos con los que se va a trabajar.

Orígenes de datos

Es posible que la aplicación tenga que trabajar sólo con orígenes de datos internos, quizá para realizar cálculos con números que un usuario ha escrito en un formulario. Es posible que otras aplicaciones que haya creado tengan que obtener acceso a orígenes de datos externos, como bases de datos, fuentes o servicios web, o archivos locales que contengan información. Además, en algunos casos, las aplicaciones podrían tener acceso a orígenes de datos externos e internos. Microsoft Expression Blend actualmente admite dos tipos de orígenes de datos: XML y objetos CLR.

  • Origen de datos XML   Archivo XML local o remoto que puede suministrar datos a la aplicación en formato XML. Puede usar un archivo XML que haya agregado al proyecto o puede establecer el origen de datos en la dirección URL de un archivo XML de un sitio web.

    [!NOTA]

    Silverlight 2 no es compatible con orígenes de datos XML. No obstante, puede obtener información acerca de cómo trabajar con datos XML en Análisis de datos XML en Silverlight en MSDN (puede estar en inglés).

  • Origen de datos de objeto CLR (Common Language Runtime)   Objeto que contiene propiedades públicas, subpropiedades e indizadores con los que puede enlazar las propiedades de destino. En aplicaciones WPF, puede usar una biblioteca de clases de Microsoft .NET Framework que convierta los datos de una base de datos en ObservableCollection. Para obtener más información, vea Inténtelo: Crear un origen de datos de objeto CLR o el tema de información general sobre el enlace de datos (puede estar en inglés) en MSDN. En aplicaciones Silverlight 2, vea Enlace de datos de Silverlight 2 en MSDN (puede estar en inglés).

    [!NOTA]

    Microsoft Expression Blend no admite una clase de origen de datos de objeto CLR que incluya parámetros en el constructor.

Lista de orígenes de datos del panel Proyecto de un proyecto de WPF abierto en Expression Blend

Cc295161.108f0ba7-cf63-46a9-9512-5662579c9a3f(es-es,Expression.10).png

Los orígenes de datos externos que están asociados con el documento activo en Expression Blend se enumeran en Datos en el panel Proyectos. Puede usar los botones Cc295161.25182a96-9a69-478a-9cfe-5b360e6a9bea(es-es,Expression.10).png para agregar y quitar orígenes de datos, y puede arrastrar elementos de datos Cc295161.05fe4b1d-f584-4bd2-99b6-8bc2d735a89d(es-es,Expression.10).png a la mesa de trabajo para crear controles que estén enlazados a datos para los elementos. Si no se ha configurado ningún origen de datos, el panel Datos del panel Proyecto mostrará sólo los botones que se usan para crear un origen de datos.

Cc295161.7e183f1f-37d8-4dcb-980c-19a5d61ca087(es-es,Expression.10).gifVolver al principio

Enlace de datos

El enlace de datos es el proceso de conectar elementos de un origen de datos a componentes de la interfaz de usuario (controles). Esto significa que siempre que los datos cambian, los componentes de la interfaz, opcionalmente, reflejarán esos cambios y viceversa. El ejemplo más sencillo de enlace de datos sería un control de barra deslizante enlazado internamente al ancho de un rectángulo. Al mover la barra deslizante, el tamaño del rectángulo se agranda o se reduce a escala.

Expression Blend proporciona una manera sencilla y uniforme de enlazar los elementos de una aplicación a diferentes orígenes de datos y de configurar los elementos que muestran los datos y modificar dichos datos. Un enlace se construye básicamente entre un origen y un destino. El origen suele ser un origen de datos u otro control, y el destino es un control. En el ejemplo de la barra deslizante, el origen es la propiedad Value del control de barra deslizante y el destino es la propiedad Width del rectángulo.

Puede crear enlaces con el botón Opciones avanzadas de la propiedadCc295161.d6ba8f4a-b8a2-445a-af0b-a267dfade6e1(es-es,Expression.10).png que está asociado a las propiedades del panel Propiedades o bien arrastrando elementos desde Datos en el panel Proyecto a la mesa de trabajo. (Para obtener instrucciones, vea Enlazar datos con una propiedad o un elemento.) Con ambas opciones se abre el cuadro de diálogo Crear enlace de datos, que permite crear vínculos de enlace entre un control (destino) y un campo de datos u otro control (origen).

Cuadro de diálogo Crear enlace de datos con la sección Opciones avanzadas expandida

Cc295161.8fcdc007-d9cd-430d-81d5-29ac9b88ee31(es-es,Expression.10).png

El cuadro de diálogo Crear enlace de datos presenta tres opciones básicas para seleccionar un origen de datos y también opciones avanzadas:

  • Campo de datos   Esta opción presenta los orígenes de datos XML y los objetos CLR creados en el proyecto y sus campos asociados. Puede agregar un nuevo origen de datos XML o de objeto CLR, o usar conexiones existentes que ya hayan sido creadas. Para seleccionar un campo con el que enlazar, seleccione un elemento en Orígenes de datos y, a continuación, seleccione un elemento de datos en Campos. El tipo de elemento de datos debe coincidir con el tipo de propiedad con la que se está enlazando, a menos que tenga un convertidor de valores que pueda aplicarse (vea "Opciones avanzadas" más adelante en este tema). Una vez creado el enlace de datos, el valor de la propiedad de destino se llena con el elemento de datos.

  • Propiedad del elemento   Esta opción habilita el enlace de la propiedad de un elemento a la propiedad de otro elemento del mismo archivo XAML (lenguaje de marcado de aplicaciones extensible), lo que es similar a enlazar la propiedad Width de un rectángulo con la propiedad Value de una barra deslizante en el ejemplo citado anteriormente en este tema. Para crear este enlace, busque la propiedad de destino (en este caso, la propiedad Width de un rectángulo) en el panel Propiedades, haga clic en el botón Opciones avanzadas de la propiedadCc295161.d6ba8f4a-b8a2-445a-af0b-a267dfade6e1(es-es,Expression.10).png y, a continuación, haga clic en Enlace de datos. Haga clic en la ficha Propiedad del elemento, navegue por los elementos del panel izquierdo para encontrar la barra deslizante (elemento de origen) y, a continuación, busque en la lista de propiedades del panel derecho la propiedad Value.

    [!NOTA]

    Silverlight 2 no admite el enlace de elemento a elemento.

  • Contexto de datos explícito   Esta opción permite enlazar con un origen de datos en el contexto especificado para el elemento actual o uno de sus elementos primarios. Un contexto de datos es una manera cómoda de compartir datos entre varios controles estableciendo un ámbito dentro del cual todas las propiedades enlazadas con datos heredan un origen común. Por ejemplo, puede asignar un contexto de datos a un objeto de cuadrícula que contenga un objeto ListBox y un objeto TextBlock, y enlazar las propiedades de ambos objetos con diferentes elementos de datos en el mismo contexto. Esto es útil cuando se desea crear un diseño de tipo maestro/detalles en el que, si se hace clic en un elemento de la lista (panel maestro), la información sobre dicho elemento aparece en otro objeto (panel de detalles). El panel Campos de la ficha Contexto de datos explícito muestra una lista de los campos de conexión de datos disponibles del contexto de datos heredado, en el cual se puede seleccionar el más apropiado para la propiedad de destino.

    [!NOTA]

    En las tres opciones anteriores, puede seleccionar entre usar una ruta personalizada o una expresión de Lenguaje de rutas XML (XPath) para el enlace de datos. XPath se rellena automáticamente con la ruta del elemento seleccionado en campos. No obstante, puede anexar a la ruta para restringir los datos aportados desde el origen de datos (por ejemplo, mediante la identificación de los nodos específicos en los datos XML que desee, como un elemento de una matriz). Para obtener más información acerca de cómo usar XPath, vea los temas sobre la sintaxis XPath y cómo enlazar con datos XML mediante XMLDataProvider y consultas XPath (pueden estar en inglés) en MSDN.

  • Opciones avanzadas   La sección avanzada del cuadro de diálogo, a la que puede obtener acceso si hace clic en el botón de expansión de la parte inferior Cc295161.81e110f1-4068-4299-957d-0693cea95088(es-es,Expression.10).png, permite configurar opciones avanzadas, como la dirección del flujo de datos (vea Flujo de datos más adelante en este tema), un valor predeterminado para la propiedad de destino, un convertidor de valores y un parámetro de convertidor. Los convertidores de valores son métodos de clase de .NET Framework que se usan para convertir valores de un tipo en otro, y que se necesitan cuando las propiedades de origen y de destino no pertenecen al mismo tipo. Para agregar un convertidor de valores, haga clic en el botón "…" situado junto al cuadro del convertidor de valores y, a continuación, seleccione un valor en el cuadro de diálogo Agregar convertidor de valores. Puede especificar también un parámetro de convertidor (por ejemplo, para convertir de doble a decimal, es posible que tenga que especificar un valor para el número de dígitos que deberán mostrarse detrás del separador de decimales). Para obtener un ejemplo de un convertidor de valores, vea Inténtelo: Crear y aplicar un convertidor de valores.

Cc295161.7e183f1f-37d8-4dcb-980c-19a5d61ca087(es-es,Expression.10).gifVolver al principio

Flujo de datos

El flujo de datos se define como la dirección en la que fluyen los datos entre el origen y el destino. En el caso de la barra deslizante que escala un rectángulo, sólo se necesita un enlace en una dirección: desde la barra deslizante (origen) al rectángulo (destino). Se admiten las siguientes configuraciones de enlace para el flujo de datos:

  • Predeterminado: es la misma que el flujo de datos TwoWay.

  • OneWay   Los cambios que se realizan en el origen actualizan automáticamente el destino, pero los cambios en el destino no actualizan el origen.

  • TwoWay   Los cambios que se realizan en el origen actualizan automáticamente el destino y viceversa.

  • OneWayToSource   Ésta es la opción opuesta a OneWay y con ella se actualiza automáticamente el origen tras modificar el destino. Esta opción es útil en casos especiales en los que la propiedad de destino no se puede ver en el panel Propiedades, lo que puede ocurrir si no se trata de una propiedad de dependencia. El enlace OneWayToSource permite configurar el enlace de datos en el destino.

  • **OneTime   **Provoca una única inicialización del origen al destino, pero los cambios posteriores en el origen no actualizan el destino.

Para ver el flujo de datos en acción, observe el siguiente ejemplo de interfaz de usuario que contiene un control Slider (origen) y un control TextBox (destino):

Flujo de datos entre tipos de enlace

Cc295161.955af9ad-a12d-41c6-9106-1ec4be43d0d4(es-es,Expression.10).png

En la ilustración anterior, el enlace se configura en el cuadro de texto (destino) con el siguiente procedimiento:

  1. En el panel Propiedades, haga clic en el botón Opciones avanzadas de la propiedadCc295161.d6ba8f4a-b8a2-445a-af0b-a267dfade6e1(es-es,Expression.10).png que está asociado con la propiedad Text (en Propiedades comunes) de TextBox y, a continuación, haga clic en Enlace de datos.

  2. En el cuadro de diálogo Crear enlace de datos que aparece, en la ficha Propiedad del elemento, seleccione la propiedad Value del nodo Slider.

En la siguiente tabla se describe el comportamiento de enlace de este ejemplo según el tipo de enlace:

Tipo de enlace

Resultado

OneWay

Al mover la barra deslizante (origen) se actualizará el cuadro de texto (destino). No obstante, si se escribe un número en el cuadro de texto, la barra deslizante no se mueve.

TwoWay

Al mover la barra deslizante (origen) se actualizará el cuadro de texto (destino). Además, la posición de la barra de desplazamiento cambiará si se escribe un número en el cuadro de texto después de hacer clic con el mouse fuera del cuadro de texto.

OneWayToSource

Si se escribe un número en el cuadro de texto (destino) y después se hace clic fuera del mismo, la barra deslizante se moverá (origen). No obstante, mover la barra deslizante no actualizara el cuadro de texto.

OneTime

El valor inicial de la barra deslizante (origen) actualizará el cuadro de texto (destino) cuando se inicie la aplicación. Los cambios posteriores en la barra deslizante no actualizarán el cuadro de texto y escribir un número en el cuadro de texto no actualizará la barra deslizante.

Cc295161.7e183f1f-37d8-4dcb-980c-19a5d61ca087(es-es,Expression.10).gifVolver al principio

Métodos de enlace con orígenes de datos externos

Flujo de trabajo 1: enlace del origen al destino

Una vez creado el origen de datos externo, puede enlazar ese origen de datos a los controles de la interfaz de usuario. Esto puede hacerse de dos maneras:

  • Enlazar un control existente   Si el control ya se encuentra en el documento, puede enlazarlo con los datos si arrastra el nodo de datos desde Datos, en el panel Proyecto, hasta el control y, a continuación, selecciona el nombre del control (Enlazar propiedad a control) en Enlazar a control existente en la lista que aparece.

  • Crear un control   Además, puede arrastrar cualquier nodo de datos desde Datos, en el panel Proyecto, hasta un documento y, a continuación, seleccionar un control de la lista que aparece en la sección Seleccione un control para representar este campo de datos. Con esta opción se insertará un control nuevo en el documento.

Tanto si decide enlazar a un control existente como crear uno nuevo, se abrirá el cuadro de diálogo Crear enlace de datos para que pueda seleccionar el campo que desea enlazar al origen de datos. Por ejemplo, si crea un enlace arrastrando un elemento de datos que sea una cadena a un TextBox, es probable que desee enlazar al campo Texto (que está seleccionado de manera predeterminada) de este nodo. Además, puede especificar opciones de enlace adicionales si hace clic en el botón de expansión Cc295161.81e110f1-4068-4299-957d-0693cea95088(es-es,Expression.10).png en el cuadro de diálogo. Haga clic en Aceptar para cerrar el cuadro de diálogo y crear el enlace. Si los datos están disponibles en tiempo de diseño, el valor del campo seleccionado debería actualizar el control. Para obtener instrucciones, vea Enlazar datos con una propiedad o un elemento.

Si el elemento de datos es una colección de elementos (una matriz) o si no coincide exactamente con el tipo de destino, se abrirá el cuadro de diálogo Crear plantilla de datos para que pueda seleccionar controles específicos con los que mostrar los datos. Para obtener más información, vea Plantillas de datos más adelante en este tema.

Flujo de trabajo 2: enlace del destino al origen

Si bien el flujo de trabajo anterior empezaba en el origen de datos y terminaba en el control de destino, puede invertir el proceso si ya ha creado el control y sabe qué propiedad desea enlazar al origen de datos o a la propiedad de otro control. Este flujo de trabajo es especialmente útil en el enlace de elemento a elemento.

Junto al editor del valor de cada propiedad en el panel Propiedades encontrará el botón Opciones avanzadas de la propiedadCc295161.d6ba8f4a-b8a2-445a-af0b-a267dfade6e1(es-es,Expression.10).png, que permite configurar las opciones avanzadas de la propiedad, incluido el enlace de datos. Al hacer clic en Enlace de datos en el menú de opciones avanzadas, se abre el mismo cuadro de diálogo Crear enlace de datos que se describe en el Flujo de trabajo 1, anteriormente en este tema.

Cc295161.7e183f1f-37d8-4dcb-980c-19a5d61ca087(es-es,Expression.10).gifVolver al principio

Plantillas de datos

A menudo, se encontrará en situaciones en las que deseará mostrar una lista de elementos del origen de datos. Un elemento de datos que contiene una lista de elementos se identifica mediante "(Matriz)" en el nombre del elemento. Cuando arrastre un nodo de lista de Datos en el panel Proyecto a un documento y seleccione ListBox en la lista de controles opcionales con los que enlazar, se le ofrecerá un cuadro de diálogo adicional con el título Crear plantilla de datos, que permite diseñar la plantilla de datos. Este cuadro de diálogo podría abrirse también cuando esté enlazando controles de texto a elementos de datos que son cadenas.

Una plantilla de datos define la estructura y el formato en que desea que se representen los datos. Por ejemplo, si va a enlazar el campo ItemsSource de un control ListBox con una lista de nodos de contacto del origen de datos, la plantilla de datos es su forma de especificar qué campos de esta lista se van a incluir y qué controles deberán asignarse a cada campo. Es posible que decida representar un nombre como TextBlock, una imagen como Image y un campo booleano (por ejemplo, IsCurrentMember) como un control CheckBox. Crear una plantilla de datos garantiza que los datos de los nodos de conexión se conviertan al formato visual que se desea. La plantilla permite controlar de manera muy precisa la forma en que los datos arbitrarios se muestran en el control.

[!NOTA]

Únicamente las propiedades Content e ItemsSource admiten plantillas de datos.

En el cuadro de diálogo Crear plantilla de datos, tiene la opción de hacer lo siguiente:

  • Usar el estilo predeterminado para el control. En el caso del enlace con una lista de elementos, el estilo predeterminado suele ser una secuencia de cuadros de texto. Para obtener más información, vea la información general sobre plantillas de datos (puede estar en inglés) en MSDN. Esta opción está deshabilitada si no hay ninguna plantilla predeterminada para el control.

  • Usar una plantilla de datos predefinida o actual que se encuentre ya en el proyecto. Esta opción está deshabilitada si no existe ningún recurso de plantilla de datos adecuado para el control.

  • Especificar una plantilla de datos nueva y mostrar los campos. Esta opción permite decidir los campos de datos que se incluirán en la plantilla y seleccionar el tipo de control que se deberá asignar a cada campo de datos. Además, puede seleccionar el tipo de elemento contenedor que se incluirá en todos los campos; para ello, haga clic en la flecha de lista desplegable que se encuentra junto al control que se muestra para el elemento en la posición más alta. En el ejemplo que se ilustra con la siguiente imagen, si hizo clic en la flecha de lista desplegable para StackPanel junto al elemento y, a continuación, seleccionó Grid, la plantilla de datos usará una cuadrícula en lugar de un panel StackPanel como contenedor de los elementos. Use los botones de flecha para determinar el orden en que aparecerán los campos de datos. Si no tiene ningún enlace de datos activo, active la casilla Generar datos de ejemplo de manera que pueda ver el control con datos de ejemplo en la mesa de trabajo y determinar si le gusta el aspecto de la plantilla.

Use el recuadro Vista previa para determinar si le gusta el aspecto de la plantilla.

Cuadro de diálogo Crear plantilla de datos

Cc295161.3db4f515-c88c-40de-9596-421995421dd2(es-es,Expression.10).png

Las plantillas de datos se guardan como recursos. Si desea modificar una plantilla de datos existente, puede hacer clic en el botón Editar recurso al lado de la plantilla de datos en el panel Recursos. Expression Blend cambia al modo de edición de plantillas y muestra la estructura de la plantilla en Objetos y escala de tiempo. En este modo de edición, puede agregar controles a la plantilla y usar enlaces de datos del panel Propiedades para enlazar las propiedades de dichos controles a los elementos nuevos del origen de datos.

Cc295161.7e183f1f-37d8-4dcb-980c-19a5d61ca087(es-es,Expression.10).gifVolver al principio