Mostrar datos
Los datos son el corazón de todas las interfaces de usuario. Desde los sitios web de reservas de hotel a la consulta del mercado de valores, las interfaces de usuario normalmente permiten visualizar e interactuar con algunos tipos 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 contienen información. Microsoft Expression Blend admite los siguientes tipos de orígenes de datos:
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.
Para obtener más información, vea Usar un origen de datos XML activos.
[!NOTA]
Microsoft Silverlight no es compatible con orígenes de datos XML activos. No obstante, puede obtener información acerca de cómo trabajar con datos XML en Análisis de datos XML en Silverlight en MSDN.
Origen de datos de objeto Objeto que contiene propiedades públicas a las 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 los temas Usar un origen de datos de objeto para conectarse a una base de datos y Inténtelo: mostrar datos de una base de datos SQL de ejemplo, o bien Información general sobre el enlace de datos en MSDN. Para aplicaciones Silverlight, vea el tema Enlace de datos de Silverlight en MSDN.
[!NOTA]
Microsoft Expression Blend no admite una clase de origen de datos de objeto CLR que incluya parámetros en el constructor.
Orígenes de datos de ejemplo Conjunto de archivos locales que crea el usuario mediante las herramientas Agregar origen de datos de ejemplo en el panel Datos. Dado que en la mesa de trabajo no se pueden ver datos externos, Expression Blend admite datos de ejemplo que el usuario puede usar al diseñar una aplicación.
Para obtener más información, vea Crear datos de ejemplo.
Lista de orígenes de datos del panel Datos
.png "Cc295161.5466a442-fd31-47e2-893e-4a738a1eaf2e(ES-ES,Expression.30).png")
Los orígenes de datos que están asociados con el documento activo en Expression Blend se enumeran en Este documento, en el panel Datos. Los orígenes de datos que están disponibles para todos los documentos de un proyecto se enumeran en Aplicación, en el panel Datos. Puede crear orígenes de datos mediante los botones situados en la parte superior del panel Datos. Es posible arrastrar elementos de datos a la mesa de trabajo para crear controles que estén enlazados a los datos de los elementos.
Para obtener más información, vea Mostrar datos en controles.
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 propiedad.png "Cc295161.12e06962-5d8a-480d-a837-e06b84c545bb(ES-ES,Expression.30).png")
que está asociado a las propiedades del panel Propiedades, o bien arrastrando elementos desde el panel Datos a la mesa de trabajo. 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).
Para obtener más información, vea Enlazar un objeto a datos.
Cuadro de diálogo Crear enlace de datos con la sección Opciones avanzadas expandida
.png "Cc295161.8fcdc007-d9cd-430d-81d5-29ac9b88ee31(ES-ES,Expression.30).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 u origen de datos 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 aplicar (vea "Opciones avanzadas" más adelante en este tema). Una vez creado el enlace de datos, el valor de la propiedad del destino se rellena con el elemento de datos.
Propiedad del elemento Esta opción habilita el enlace de una propiedad de un elemento a otra propiedad del elemento en el mismo archivo XAML (lenguaje de marcado de aplicaciones extensible). Esto es algo similar a enlazar la propiedad Width de un rectángulo a 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 Opciones avanzadas de la propiedad
y, a continuación, haga clic en Enlace de datos. Haga clic en la ficha Propiedad del elemento, navegue por los elementos del recuadro izquierdo para encontrar la barra deslizante (elemento de origen) y, a continuación, busque en la lista de propiedades del recuadro derecho la propiedad Value.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 a 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 (recuadro maestro), la información sobre dicho elemento aparece en otro objeto (recuadro de detalles). El recuadro 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 especificar una ruta personalizada o una expresión de Lenguaje de rutas XML (XPath) para el enlace de datos. El campo XPath se rellena automáticamente con la ruta del elemento que seleccione 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 Sintaxis de XPath y Cómo: Enlazar a datos XML mediante XMLDataProvider y consultas XPath en MSDN.
Opciones avanzadas La sección de opciones 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
.png "Cc295161.de239c9d-42ce-4f5e-83b9-5f9924c0431f(ES-ES,Expression.30).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 a otro, y que se necesitan cuando las propiedades de origen y de destino no son del mismo tipo. Para agregar un convertidor de valores, haga clic en Agregar nuevo convertidor de valores .png "Cc295161.3f9fe48b-caf8-4989-8a91-017ba1e0cb77(ES-ES,Expression.30).png")
, junto al cuadro del convertidor de valores y, a continuación, seleccione uno 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: convertir datos de un tipo a otro.
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, solo 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 Los cambios que se realizan en el origen actualizan automáticamente el destino y viceversa. 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 Los cambios que se realizan en el destino actualizan automáticamente el origen, pero los cambios en el origen no actualizan el destino. Este es el valor contrario a OneWay. Esta opción es útil en casos especiales en los que la propiedad de destino no se puede ver en el panel Propiedades, algo que puede ocurrir si no se trata de una propiedad de dependencia. El enlace OneWayToSource permite configurar el enlace de datos en el destino. Esta opción no está disponible en proyectos de Silverlight.
**OneTime **No se realizan cambios. El destino se establece en el valor del origen cuando la aplicación se inicializa. Después de eso, el destino no se actualiza.
Para ver el flujo de datos en acción, observe el siguiente ejemplo de una interfaz de usuario que contiene un control Slider (origen) y un control TextBox (destino):
Flujo de datos entre tipos de enlace
.png "Cc295161.955af9ad-a12d-41c6-9106-1ec4be43d0d4(ES-ES,Expression.30).png")
En esta ilustración, el enlace se configura en el cuadro de texto (destino) mediante el siguiente procedimiento:
En el panel Propiedades, haga clic en el botón Opciones avanzadas de la propiedad
que está asociado con la propiedad Text (en Propiedades comunes) de TextBox y, a continuación, haga clic en Enlace de datos.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, se moverá la barra deslizante (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. |
Para obtener un procedimiento que ilustre este caso, vea Enlazar un objeto con datos proporcionados por el usuario o con otros valores internos.
Métodos de enlace a orígenes de datos
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 a los datos si arrastra el nodo de datos desde el panel Datos al control. Según arrastre el nodo de datos, aparecerá un mensaje para indicarle la propiedad del objeto a la que estarán enlazados los datos.
.png "Cc295161.054f8f1c-c18a-4268-a963-390e84fa2809(ES-ES,Expression.30).png")
Si desea especificar otra propiedad, puede presionar la tecla MAYÚS antes de soltar el botón del mouse.
.png "Cc295161.a1b9bdb2-3bb6-436d-a955-b2153b6ffba0(ES-ES,Expression.30).png")
Crear un control Puede arrastrar cualquier nodo de datos desde el panel Datos a un documento. Con esta opción se insertará un control nuevo en el documento.
Para obtener más información, vea los temas siguientes:
Flujo de trabajo 2: enlace del destino al origen
Aunque 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 otra propiedad del control. Este flujo de trabajo es especialmente útil en el enlace de elemento a elemento.
Para obtener más información, vea Enlazar un objeto con datos proporcionados por el usuario o con otros valores internos.
Junto al editor del valor de cada propiedad en el panel Propiedades, encontrará el botón Opciones avanzadas de la propiedad, que permite configurar 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.
Plantillas de datos
Es posible que se encuentre 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 del panel Datos a un control DataGrid, los datos se mostrarán en objetos cuya plantilla se puede modificar.
Para obtener ejemplos de cómo modificar plantillas de datos, vea los temas siguientes:
Las plantillas de datos se almacenan como recursos, del mismo modo que cualquier otro estilo o plantilla. Si desea modificar una plantilla de datos existente, puede hacer clic en el botón Editar recurso, situado junto a la plantilla de datos en el panel Recursos. Expression Blend cambia al modo de edición de plantilla 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.