Tutorial: Diseñar una pantalla de Silverlight en LightSwitch

En este tutorial se muestra cómo utilizar el diseñador de pantallas de LightSwitch para crear una pantalla que muestre los datos del cliente desde la base de datos de ejemplo Northwind. El diseñador de pantallas es un lienzo de diseño visual que permite modificar el aspecto de una pantalla.

En el tutorial se muestra cómo realizar las tareas siguientes:

• Crear una pantalla

• Cambiar el diseño de una pantalla

• Quitar campos de una pantalla

• Cambiar el orden de los elementos

• Cambiar el nombre para mostrar de un elemento

• Cambiar el tipo de control de un elemento

• Personalizar una pantalla en una aplicación en ejecución

Requisitos previos

En este tutorial se supone que ha agregado el servicio OData de Northwind como origen de datos en su proyecto.

Para obtener información sobre cómo agregar el servicio OData de Northwind como un origen de datos en el proyecto, vea Conectarse a datos en una aplicación de LightSwitch.

Crear una pantalla

En esta sección se explica cómo crear una pantalla para mostrar los datos de cliente de la base de datos de ejemplo Northwind. Esta pantalla se divide en dos partes. La primera parte muestra una lista de resumen de todos los clientes, mientras que en la otra parte se muestran los detalles sobre el cliente que se ha seleccionado.

Para crear una pantalla

1. En el Explorador de soluciones, abra el menú contextual para el nodo Pantallas y, a continuación, elija Abrir.

2. En la barra de menús, elija Proyecto, Agregar pantalla.

   Se abre el cuadro de diálogo Agregar nueva pantalla.

3. En la lista Seleccione una plantilla de pantalla:, elija Pantalla de lista y detalles.

4. En el cuadro de texto Nombre de pantalla, escriba Clientes.

5. En la lista de Datos de pantalla, elija DataSourceName.Clientes.

6. En la sección Datos adicionales que incluir, active las casillas de detalles de cliente y pedidos de cliente.

   Mediante esta acción se agregan los campos de la entidad Cliente a la sección de detalles de la pantalla, junto con una lista de los pedidos realizados por ese cliente.

   En la siguiente ilustración se muestra cómo aparece el cuadro de diálogo después de haber seguido los pasos de esta sección.

   

7. Elija el botón Aceptar para crear la pantalla.

   Aparece el Diseñador de pantallas.

Cambiar el diseño de una pantalla

La pantalla de lista y detalles tiene dos columnas. La columna de la izquierda incluye una lista de los clientes. La columna de la derecha contiene dos filas. En la fila superior se indican los detalles del cliente seleccionado y en la fila inferior se muestran los pedidos relacionados con el cliente seleccionado. El árbol de contenido de pantalla del diseñador de pantallas muestra cómo se crea esta lista.

En esta sección se describe cómo modificar el diseño de la pantalla para que contenga dos filas en lugar de dos columnas. En la fila superior se incluye la lista de clientes. La fila inferior está compuesta por dos columnas. La columna de la izquierda contiene los detalles del cliente seleccionado y la de la derecha muestra los pedidos relacionados con el cliente seleccionado.

Para cambiar el diseño de la lista

1. En el Árbol de contenido de pantalla del Diseñador de pantallas, elija la flecha abajo que aparece junto al nodo Clientes y elija Diseño de filas.

   El diseño del nodo Clientes cambia de Diseño de columnas a Diseño de filas.

2. Elija la flecha abajo que aparece junto al nodo de columna de detalles y, a continuación, elija Diseño de columnas.

   El diseño de columna de detalles cambia de Diseño de filas a Diseño de columnas.

Quitar campos de una pantalla

De forma predeterminada, el área de la pantalla de columna de detalles, que indica los detalles de un cliente, muestra todos los campos del origen de datos. Si no desea que aparezcan todos los campos, puede quitar los que no desea. Por ejemplo, en los siguientes pasos se muestra cómo quitar el campo País.

Para quitar campos de una pantalla

1. En el Árbol de contenido de pantalla, expanda el nodo de detalles del cliente si aún no está expandido.

2. Elija el campo País y, a continuación, en la barra de comandos del Diseñador de pantallas, elija el comando Eliminar.

Cambiar el orden de los campos

En los siguientes pasos se muestra cómo cambiar el orden de presentación de los campos, por ejemplo, el campo CustomerID y el campo Postal Code.

Para cambiar el orden de los campos

1. En el Árbol de contenido de pantalla, expanda el nodo de detalles del cliente si aún no está expandido.

2. Para mover el campo Id. de cliente a la parte inferior de la columna de detalles, arrástrelo debajo del campo Fax.

   Nota

   También puede abrir el menú contextual del campo Id. de cliente, elegir Cortar, abrir el menú contextual del campo Fax y, después, elegir Pegar.

3. Para mover el campo Código postal de forma que aparezca justo sobre el campo Id. de cliente, arrástrelo entre el campo Fax y el campo Id. de cliente.

Cambiar el tipo de control de un campo

Puede personalizar el modo en que se muestra un campo al usuario. Por ejemplo, puede establecer un campo de texto para que se muestre como un TextBox o como Label. En los siguientes pasos se explica cómo cambiar un campo de visualización a un campo Label para que el usuario no pueda modificar su valor.

Para cambiar el tipo de control de un campo

1. En el Árbol de contenido de pantalla, expanda el nodo de detalles del cliente si aún no está expandido.

2. Abra la lista del campo Id. de cliente y elija Etiqueta.

   Puede repetir este paso para cambiar otros campos.

3. Para probar los cambios, elija la tecla F5 para ejecutar la aplicación.

Personalizar una pantalla en una aplicación en ejecución

También puede personalizar una pantalla mientras la aplicación se está ejecutando. Por ejemplo, puede quitar campos, cambiar el orden de los campos o cambiar las propiedades, como el tipo de control o la alineación de las etiquetas.

Para personalizar una pantalla en una aplicación en ejecución

1. Si la aplicación no se está ejecutando, elija la tecla F5 para iniciarla.

2. En la barra de comandos de la pantalla, elija el vínculo Pantalla de diseño.

3. En la pantalla Modo de personalización, quite el campo Id. de cliente de la columna de detalles. Para ello, elija este campo en el nodo de detalles del cliente y, a continuación, en la barra de herramientas, elija Eliminar ().

4. En el nodo de detalles del cliente, elija el campo Fax y, en la barra de herramientas, elija el botón Bajar ().

   El campo Fax aparece debajo del campo Código postal.

5. En el nodo de detalles del cliente, elija el campo Teléfono y en la ventana Propiedades, establezca la propiedad Nombre para mostrar en Número de teléfono.

6. En el nodo de detalles del cliente, elija el campo Número de teléfono y en la ventana Propiedades, establezca la propiedad Tipo de control en Etiqueta.

7. En el nodo de detalles del cliente, elija el campo Nombre de la compañía y en las ventanas Propiedades, establezca la propiedad Posición de etiqueta en Alineación a la derecha.

8. Repita este paso para todos los campos del nodo de detalles del cliente y, a continuación, elija el botón Guardar.

   La aplicación muestra ahora los cambios que acaba de realizar.

Pasos siguientes

De forma predeterminada, al elegir un origen de datos para una pantalla, se muestran todos los datos del origen. Si solo desea mostrar un subconjunto de datos, puede crear una consulta que defina los datos para mostrar. Vea Cómo: Diseñar una consulta usando el Diseñador de consultas.

Vea también

Otros recursos

Pantallas: Interfaz de usuario de una aplicación de LightSwitch