Cómo: Diseñar una pantalla HTML usando el Diseñador de pantallas
Mediante el Diseñador de pantallas, puede modificar el aspecto de las pantallas en un cliente HTML para una aplicación de Visual Studio LightSwitch. Por ejemplo, puede utilizar el diseñador para realizar las tareas siguientes.
Agregar un grupo de información a una pantalla.
Modificar el diseño de un grupo.
Agregar un botón.
Agregar un elemento.
Quitar un elemento.
Mover un elemento.
Cambiar el nombre para mostrar de un elemento.
Cambiar la posición de etiqueta de un elemento.
Cambiar el tamaño de un elemento.
Mostrar u ocultar un elemento.
Cambiar el tipo de control de un elemento.
Agregar un control personalizado a una pantalla.
Deshacer cambios.
Habilitar o deshabilitar la paginación.
Agregar una pestaña a una pantalla
En el Árbol de contenido de pantalla, abra el menú contextual del nodo Tabulaciones y, a continuación, elija Agregar pestaña.
En la ventana Propiedades, elija la propiedad Group y escriba un nombre para ella.
Elija la propiedad Nombre para mostrar y escriba el nombre que aparecerá en la pestaña.
En el Árbol de contenido de pantalla, elija la nueva pestaña, abra la lista Agregar y elija los elementos que desea mostrar en la pestaña.
Agregar un grupo de información a una pantalla
En el Árbol de contenido de pantalla, elija el nodo al que se desea agregar un grupo de información.
En la barra de herramientas del Diseñador de pantallas, abra la lista Agregar elemento de diseño y, después, elija Group.
Aparece un nuevo grupo.
En la ventana Propiedades, en el cuadro de texto Nombre, escriba un nombre para el grupo.
En el Árbol de contenido de pantalla, elija el nuevo grupo, abra la lista Agregar y elija los elementos que desea mostrar en el grupo.
Modificar el diseño de un grupo
En el Árbol de contenido de pantalla, abra la lista para un grupo que desee modificar.
La lista muestra todos los tipos de control que están disponibles para el grupo.
En la lista, elija un tipo de control.
El tipo de control que se elija afecta al diseño del grupo. Para obtener más información acerca de cada tipo de control, vea Referencia: Propiedades del Diseñador de pantallas.
Agregar un botón
En Árbol de contenido de pantalla, elija el nodo donde desea que aparezca el botón.
En la barra de herramientas del Diseñador de pantallas, elija Agregar elemento de diseño y elija Botón.
Aparecerá el cuadro de diálogo Agregar botón.
Agregar un elemento
En la Lista de miembros de pantalla del Diseñador de pantallas, arrastre un elemento (por ejemplo, un campo o un comando) hacia la ubicación deseada en el Árbol de contenido de pantalla.
Al arrastrar el elemento, el puntero indica si puede moverlo a una ubicación especificada. Si el puntero cambia a un círculo con una barra diagonal que lo atraviesa, no se puede colocar el elemento en esa ubicación.
Para obtener información sobre cómo agregar campos personalizados a una pantalla, vea Cómo: Agregar una propiedad local a una pantalla HTML.
Quitar un elemento
En el Árbol de contenido de pantalla, elija el elemento (por ejemplo, un campo o un comando) que desee quitar.
En la barra de herramientas del Diseñador de pantallas, elija el botón Eliminar.
Mover un elemento
En el Árbol de contenido de pantalla, arrastre un elemento (por ejemplo, un campo o un comando) a otra ubicación.
Por ejemplo, arrastre el campo PostalCode para que aparezca en el campo Country o arrastre el botón Editar para que aparezca sobre el botón Eliminar.
Nota
Al arrastrar un campo, el puntero indica si puede mover el elemento a una ubicación especificada.Si el puntero cambia a un círculo con una barra diagonal que lo atraviesa, no puede mover el elemento a esa ubicación.
Cambiar el nombre para mostrar de un elemento
En el Árbol de contenido de pantalla, elija el elemento (por ejemplo, un campo o un comando).
En la ventana Propiedades, en el cuadro de texto Nombre para mostrar, escriba un nombre diferente para el elemento.
Si cambia el nombre para mostrar de un elemento, solo se modifica el nombre que aparece en la pantalla. La propiedad Name del elemento permanece igual.
Cambiar la posición de etiqueta de un elemento
En el Árbol de contenido de pantalla, elija el campo.
En la ventana Propiedades, abra la lista que se encuentra debajo de Posición de etiquetay, a continuación, elija la posición que desee.
En la siguiente tabla se describe cada una de las opciones.
Posición de etiqueta
Descripción
Alineado a la izquierda
La etiqueta aparece cerca de la parte izquierda del control.
Alineado a la derecha
La etiqueta aparece cerca de la parte derecha del control.
Parte superior
La etiqueta aparece encima del control.
Oculto
No aparece ninguna etiqueta para el control.
Ninguno
No aparece ninguna etiqueta para el control y está alineado donde hubiera estado la etiqueta.
Cambiar el tamaño de un elemento
En el Árbol de contenido de pantalla, elija el elemento (por ejemplo, un campo o un comando).
En la ventana Propiedades, debajo de Ajuste de tamaño, elija un tamaño diferente para el ancho y el alto del control.
Nota
Algunos tipos de controles no admiten las propiedades de alto.
Para obtener información sobre los valores de configuración posibles, vea Referencia: Propiedades del Diseñador de pantallas.
Mostrar u ocultar un elemento
En el Árbol de contenido de pantalla, elija el elemento (por ejemplo, un campo o un comando).
En la ventana Propiedades, active o desactive la casilla para la propiedad Visible.
Nota
La etiqueta (No visible) aparece en el diseñador junto a los elementos que no están visibles cuando la aplicación se ejecuta.
Cambiar el tipo de control de un elemento
En el Árbol de contenido de pantalla, abra la lista que se encuentra junto al elemento y, a continuación, elija el tipo de control que desee.
La mayoría de los tipos de control están integrados. También puede establecer el tipo de control en un control personalizado que se crea mediante otras herramientas. Para obtener más información, vea Cómo: Agregar un control personalizado a una pantalla HTML para una aplicación LightSwitch.
Agregar un control personalizado a una pantalla
En el Árbol de contenido de pantalla, elija un grupo cualquiera.
En la barra de herramientas del Diseñador de pantallas, abra la lista Agregar elemento de diseño y, después, elija Control personalizado.
Para obtener más información, vea Cómo: Agregar un control personalizado a una pantalla HTML para una aplicación LightSwitch.
Deshacer cambios
En la barra de menús, elija Editar, Deshacer.
Sugerencia
Si deshace accidentalmente una edición en el Diseñador de pantallas, en la barra de menús, elija Editar, Rehacer.
Habilitar o deshabilitar la paginación
En la Lista de miembros de pantalla del Diseñador de pantallas, elija el nodo principal de una colección (por ejemplo, el encabezado OrderCollection).
En la ventana Propiedades, desactive la casilla Admitir paginación si desea mostrar todas las filas devueltas por una consulta, incluso si la colección de filas es grande. Active la casilla si desea restringir el número de registros que aparecerán y especifique el número de elementos que se mostrarán en cada página.
Nota
Los usuarios pueden mostrar cada página de resultados si eligen un vínculo en la pantalla.
Vea también
Tareas
Cómo: Controlar la navegación entre pantallas HTML en una aplicación LightSwitch
Cómo: Agregar una botón a un cliente móvil para LightSwitch
Cómo: Agregar un control personalizado a una pantalla HTML para una aplicación LightSwitch
Conceptos
Referencia: Propiedades del Diseñador de pantallas