Crear un enlace de datos de tipo lista/detalles
Un diseño de tipo lista/detalles incluye dos partes:
Una vista de detalles 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 de tipo lista/detalles, donde la tabla de contenido es la vista de lista y el tema visualizado es la vista de detalles.
Blend para Visual Studio facilita el proceso de agregar datos a la mesa de trabajo en un diseño de tipo lista/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 de lista. 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 (por ejemplo, un panel de diseño Canvas) y arrastrar elementos a él.
Blend configura en segundo plano de forma automática la relación entre la vista de lista y la vista de detalles estableciendo la propiedad DataContext del objeto Grid en la propiedad SelectedItem del objeto que muestra la vista de lista. Esta relación se puede configurar también manualmente.
Para crear un enlace de datos de tipo lista/detalles de forma automática
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 Crear datos de ejemplo.
En el panel Datos, haga clic en Modo de lista
.png "JJ170033.9ad55afc-08ac-4f9a-ab3a-d55d0cf184d3(es-es,VS.120).png")
.Sugerencia
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 de lista.Este es el modo predeterminado del panel Datos.
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
.png "JJ170033.ffd7a7c3-6bcd-4ed3-a59e-1f28d06ec4ae(es-es,VS.120).png")
, DataGrid .png "JJ170033.55bfb0df-05d2-4b58-8312-24a3aed103e3(es-es,VS.120).png")
o TreeView .png "JJ170033.7ecbf7de-e46f-44e9-b931-98c8c12c0b2a(es-es,VS.120).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
.png "JJ170033.86a5a839-015a-4510-8617-94487f4adb09(es-es,VS.120).png")
Arrastrar datos en el Modo de lista a un objeto DataGrid
.png "JJ170033.8a772e67-9d6e-434d-8b39-fd3b69858e94(es-es,VS.120).png")
Arrastrar datos en el Modo de lista a un objeto TreeView
.png "JJ170033.2677bde8-9d64-4d15-8877-517d0a66ea14(es-es,VS.120).png")
En el panel Datos, haga clic en Modo de detalles
.png "JJ170033.7786ee28-da1d-41b2-93fd-b4caeb75ab98(es-es,VS.120).png")
.Sugerencia
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.
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 Grid) 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.
Presione F5 para probar la aplicación. Haga clic en los elementos de la vista de lista para obtener la vista de detalles actualizada de manera correspondiente.
Selección de elementos en controles de lista para actualizar su vista de detalles
.png "JJ170033.6c17e27b-5c6f-45c8-a961-fd177406042d(es-es,VS.120).png")
Este procedimiento le mostró cómo crear una vista de tipo lista/detalles con dos niveles de profundidad. También puede crear una vista de lista/detalles con tres niveles de profundidad.
Para obtener más información, vea Inténtelo: crear un enlace de detalles de lista de tres niveles de profundidad.
Para crear un enlace de datos de tipo lista/detalles de forma manual
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.
En el panel Herramientas, seleccione un control que desee usar para mostrar la vista de detalles, como un control ComboBox
.png "JJ170033.b174a511-dd12-4a45-a986-034de7693de9(es-es,VS.120).png")
, y dibújelo en la mesa de trabajo.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.
Sugerencia
Cuando se crea un objeto, no se le da un nombre explícito.Al cambiar el nombre del objeto, se crea un nombre al que se puede hacer referencia mediante la propiedad DataContext del objeto de la vista de detalles.
En el panel Datos, haga clic en Modo de lista
.En el panel Datos, arrastre una o varias propiedades desde una colección de datos al objeto de lista.
Datos en el Modo de lista a un objeto ComboBox
.png "JJ170033.ef9cdd5e-ebce-419a-afaa-86e2e4f8e4ac(es-es,VS.120).png")
En el panel Datos, haga clic en Modo de detalles
.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 Grid) 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.
Presione F5 para probar la aplicación. Si, al seleccionar otro elemento en el objeto de lista, no se actualiza la vista de detalles, continúe en el paso siguiente.
Seleccione el panel de diseño (normalmente, un objeto Grid) que representa la vista de detalles.
En el panel Propiedades, junto a la propiedad DataContext, haga clic en Opciones avanzadas
.png "JJ170033.12e06962-5d8a-480d-a837-e06b84c545bb(es-es,VS.120).png")
y, a continuación, haga clic en Enlace de datos.En el cuadro de diálogo Crear enlace de datos, haga clic en la ficha Propiedad del elemento.
En Elementos de la escena, seleccione el objeto de lista y, en Propiedades, seleccione la propiedad SelectedItem.
Creación de una relación entre el objeto de detalles y el objeto de lista
.png "JJ170033.ab312546-3416-42c8-83e5-610590939041(es-es,VS.120).png")
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 de lista.
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 de lista. 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:
Haga clic en Opciones avanzadas
junto a la propiedad Text y elija Enlace de datos.En el cuadro de diálogo Crear enlace de datos, haga clic en la ficha Contexto de datos explícito.
En Campos, expanda Collection y seleccione la propiedad de datos que desea mostrar en este objeto TextBlock.
.png "JJ170033.e7cf00b9-285a-45ab-a4d6-5b94881917fa(es-es,VS.120).png")
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.
Presione F5 para probar la aplicación.