Compartir a través de

Crear un enlace de datos de tipo maestro/detalles

  • Artículo

Un diseño de tipo maestro/detalles incluye dos partes:

  • Una vista maestro que muestra una lista de elementos, normalmente una colección de datos.

  • Una vista de detalles que muestra los detalles acerca del elemento que se selecciona en la lista.

Este Manual del usuario es un ejemplo de diseño maestro/detalles, donde la tabla de contenido es la vista maestro y el tema visualizado es la vista de detalles.

Microsoft Expression Blend facilita el proceso de agregar datos a la mesa de trabajo en un diseño maestro/detalles, ya que proporciona dos modos para el panel Datos:

  • En el Modo de lista, los elementos que arrastra desde el panel Datos crean la vista maestro. Puede arrastrar elementos a un control ListBox, DataGrid o TreeView. Si arrastra elementos a un área vacía de la mesa de trabajo, se creará un control ListBox de forma automática.

  • En el Modo de detalles, los elementos que arrastra desde el panel Datos crean la vista de detalles en un panel de diseño Grid. Como alternativa, puede crear un panel de diseño diferente (Canvas, por ejemplo) y arrastrar elementos a él.

Expression Blend configura en segundo plano de forma automática la relación entre la vista maestro y la vista de detalles estableciendo la propiedad DataContext del objeto Grid en la propiedad SelectedItem del objeto que muestra la vista maestro. Esta relación se puede configurar también manualmente.

Ee341499.alert_tip(ES-ES,Expression.30).gifSugerencia:

Expression Blend incluye un ejemplo que muestra un sencillo diseño maestro/detalles y personaliza la apariencia de los objetos maestro y de detalles. Para abrir el ejemplo en Expression Blend, haga clic en Pantalla de bienvenida en el menú Ayuda, elija la ficha Ejemplos y haga clic en ColorSwatchSL.

Para crear un enlace de datos de tipo maestro/detalles de forma automática

  1. Si no dispone de un origen de datos que pueda usar, cree un origen de datos de ejemplo y habilítelo para poder usarlo en tiempo de ejecución.

    Para obtener más información, vea Generar datos de ejemplo.

  2. En el panel Datos, haga clic en Modo de lista Ee341499.9ad55afc-08ac-4f9a-ab3a-d55d0cf184d3(ES-ES,Expression.30).png.

    Ee341499.alert_tip(ES-ES,Expression.30).gifSugerencia:

    En el Modo de lista, se asume que los elementos de datos que arrastra a la mesa de trabajo son enlaces a datos independientes o parte de una vista maestro. Este es el modo predeterminado del panel Datos.

  3. En el panel Datos, arrastre una o varias propiedades desde una colección de datos a la mesa de trabajo (para crear un objeto ListBox) o a un objeto ListBox Ee341499.ffd7a7c3-6bcd-4ed3-a59e-1f28d06ec4ae(ES-ES,Expression.30).png, DataGrid Ee341499.55bfb0df-05d2-4b58-8312-24a3aed103e3(ES-ES,Expression.30).png o TreeView Ee341499.7ecbf7de-e46f-44e9-b931-98c8c12c0b2a(ES-ES,Expression.30).png existente.

    [!NOTA]

    Si aparece el cuadro de diálogo Crear enlace de datos, quizá esté en el Modo de detalles en lugar del Modo de lista.

    El objeto muestra la colección de datos de cada propiedad.

    Arrastrar datos en el Modo de lista a un objeto ListBox

    Ee341499.86a5a839-015a-4510-8617-94487f4adb09(ES-ES,Expression.30).png

    Arrastrar datos en el Modo de lista a un objeto DataGrid

    Ee341499.8a772e67-9d6e-434d-8b39-fd3b69858e94(ES-ES,Expression.30).png

    Arrastrar datos en el Modo de lista a un objeto TreeView

    Ee341499.2677bde8-9d64-4d15-8877-517d0a66ea14(ES-ES,Expression.30).png

  4. En el panel Datos, haga clic en Modo de detalles Ee341499.7786ee28-da1d-41b2-93fd-b4caeb75ab98(ES-ES,Expression.30).png.

    Ee341499.alert_tip(ES-ES,Expression.30).gifSugerencia:

    En el Modo de detalles, se asume que los elementos de datos que arrastra a la mesa de trabajo forman parte de una vista de detalles. Se crea un objeto Grid para mostrar los objetos secundarios de cada elemento de datos. El objeto Grid se configura de forma automática para usar el contexto de datos y el elemento seleccionado del último objeto que se creó en el Modo de lista.

  5. En el panel Datos, arrastre una o varias propiedades desde una colección de datos a la mesa de trabajo (para crear un panel de diseño de cuadrícula) o a un panel de diseño existente.

    El panel de diseño muestra un control TextBlock para el nombre y el valor de cada propiedad.

    Arrastrar datos en el Modo de detalles tras crear el enlace ListBox

    Ee341499.50bc24c3-45a6-46cc-8baa-fe8e1640b245(ES-ES,Expression.30).png

    Arrastrar datos en el Modo de detalles tras crear el enlace DataGrid

    Ee341499.7f71870f-8b3d-4de9-8ddf-258893b424a5(ES-ES,Expression.30).png

    Arrastrar datos en el Modo de detalles tras crear el enlace TreeView

    Ee341499.b668febc-be6f-456f-8ad7-969d88f7aaea(ES-ES,Expression.30).png

  6. Presione F5 para probar la aplicación. Haga clic en los elementos de la vista maestro para obtener la vista de detalles actualizada en consecuencia.

    Selección de elementos en controles maestro para actualizar su vista de detalles

    Ee341499.6c17e27b-5c6f-45c8-a961-fd177406042d(ES-ES,Expression.30).png

Para crear un enlace de datos de tipo maestro/detalles de forma manual

  1. Si no dispone de un origen de datos que pueda usar, cree un origen de datos de ejemplo y habilítelo para poder usarlo en tiempo de ejecución.

    Para obtener más información, vea Generar datos de ejemplo.

  2. En el panel Herramientas, seleccione un control que desee usar para mostrar la vista maestro, como un control ComboBox Ee341499.b174a511-dd12-4a45-a986-034de7693de9(ES-ES,Expression.30).png, y dibújelo en la mesa de trabajo.

  3. En el panel Objetos y escala de tiempo, haga clic con el botón secundario en el nuevo objeto, elija Cambiar nombre, escriba un nombre nuevo y presione ENTRAR.

    Ee341499.alert_tip(ES-ES,Expression.30).gifSugerencia:

    Cuando se crea un objeto, no se le da un nombre explícito. Al cambiar el nombre al objeto, crea un nombre al que se puede hacer referencia con la propiedad DataContext del objeto de la vista de detalles.

  4. En el panel Datos, haga clic en Modo de lista Ee341499.9ad55afc-08ac-4f9a-ab3a-d55d0cf184d3(ES-ES,Expression.30).png.

  5. En el panel Datos, arrastre una o varias propiedades desde una colección de datos al objeto maestro.

    Arrastrar datos en el Modo de lista a un objeto ComboBox

    Ee341499.ef9cdd5e-ebce-419a-afaa-86e2e4f8e4ac(ES-ES,Expression.30).png

  6. En el panel Datos, haga clic en Modo de detalles Ee341499.7786ee28-da1d-41b2-93fd-b4caeb75ab98(ES-ES,Expression.30).png.

  7. En el panel Datos, arrastre una o varias propiedades desde una colección de datos a la mesa de trabajo (para crear un panel de diseño de cuadrícula) o a un panel de diseño existente.

    El panel de diseño muestra un control TextBlock para el nombre y el valor de cada propiedad.

    Arrastrar datos en el Modo de detalles tras crear el enlace ComboBox

    Ee341499.96269f5b-09d6-4e4a-8fdb-c8f5fd3240f2(ES-ES,Expression.30).png

  8. Presione F5 para probar la aplicación. Si, al seleccionar otro elemento en el objeto maestro, no se actualiza la vista de detalles, continúe en el paso siguiente.

  9. Seleccione el panel de diseño (normalmente, un objeto Grid) que representa la vista de detalles.

  10. En el panel Propiedades, junto a la propiedad DataContext, haga clic en Opciones avanzadas de la propiedadEe341499.12e06962-5d8a-480d-a837-e06b84c545bb(ES-ES,Expression.30).png y, a continuación, haga clic en Enlace de datos.

  11. En el cuadro de diálogo Crear enlace de datos, haga clic en la ficha Propiedad del elemento.

  12. En Elementos de la escena, seleccione el objeto maestro y, en Propiedades, seleccione la propiedad SelectedItem.

    Creación de una relación entre el objeto de detalles y el objeto maestro

    Ee341499.ab312546-3416-42c8-83e5-610590939041(ES-ES,Expression.30).png

  13. Haga clic en Aceptar para cerrar el cuadro de diálogo Crear enlace de datos.

    Todos los elementos secundarios del panel de diseño de detalles usarán el contexto de datos del elemento seleccionado del objeto maestro.

  14. Compruebe que los elementos secundarios del panel de diseño de detalles están enlazados a las propiedades de datos relevantes. Algunos elementos secundarios no están enlazados a datos porque muestran solo el nombre de una propiedad de datos. Los demás elementos secundarios deberían estar enlazados a datos porque muestran los datos asociados con el elemento seleccionado en el objeto maestro. Por ejemplo, seleccione uno de los elementos secundarios TextBlock que no muestran un nombre de propiedad de datos y, en el panel Propiedades, busque la propiedad Text. Si la propiedad no tiene un rectángulo de selección amarillo alrededor, el objeto TextBlock no está enlazado a datos. Para enlazar el objeto TextBlock:

    1. Haga clic en Opciones avanzadas de la propiedad Ee341499.12e06962-5d8a-480d-a837-e06b84c545bb(ES-ES,Expression.30).png junto a la propiedad Text y elija Enlace de datos.

    2. En el cuadro de diálogo Crear enlace de datos, haga clic en la ficha Contexto de datos explícito.

    3. En Campos, expanda Collection y seleccione la propiedad de datos que desea mostrar en este objeto TextBlock.

      Ee341499.e7cf00b9-285a-45ab-a4d6-5b94881917fa(ES-ES,Expression.30).png

    4. Haga clic en Aceptar para cerrar el cuadro de diálogo Crear enlace de datos.

      Aparece un rectángulo de selección amarillo alrededor de la propiedad Text para indicar que la propiedad está ahora enlazada a datos.

      Ee341499.9712d7c9-c15b-4fed-a816-881fa0809a61(ES-ES,Expression.30).png

  15. Presione F5 para probar la aplicación.

Vea también

Tareas

Usar el control DataGrid

Usar el control TreeView

Conceptos

Aplicar estilo a un control que muestra datos