Cómo: Diseñar una pantalla de Silverlight mediante el Diseñador de pantallas

  • Artículo

Se puede modificar el aspecto de una pantalla usando el diseñador de pantallas.Se puede utilizar el diseñador de pantallas para realizar las tareas de diseño siguientes.

Tareas de diseño de campo y comando

  • Agregar un grupo de información a una pantalla.

  • Modificar el diseño de un grupo.

  • Agregar botones.

  • Agregar elementos.

  • Quitar elementos.

  • Mover elementos.

  • Cambiar el nombre para mostrar de un elemento.

  • Cambiar la posición de la 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.

Tareas de diseño de recolección de datos

  • Cambiar si una colección muestra datos cuando la pantalla se carga por primera vez

  • Habilitar o deshabilitar la paginación.

  • Habilitar o deshabilitar la ordenación.

  • Habilitar o deshabilitar la búsqueda.

Para obtener más información sobre cómo realizar tareas de diseño mientras la aplicación se está ejecutando, consulte Cómo: Personalizar una pantalla de Silverlight en una aplicación en ejecución.

Agregar un grupo de información a una pantalla

  1. En el Árbol de contenido de pantalla, seleccione un grupo al que le gustaría agregar un grupo de información.

  2. En la parte superior del Diseñador de pantallas, haga clic en Agregar elemento de diseño y, a continuación, haga clic en Grupo.

    Aparece un nuevo grupo.

  3. Arrastrar elementos hacia el grupo.Se pueden arrastrar elementos de la Lista de miembros de pantalla del diseñador o de otras áreas del árbol de contenido de pantalla.

Modificar el diseño de un grupo

  1. En el Árbol de contenido de pantalla, haga clic en la flecha abajo situada junto al grupo que se desea modificar.

    Aparecerá una lista desplegable.La lista desplegable muestra todos los tipos de control que están disponibles para el grupo.

  2. En la lista desplegable de controles, haga clic en el tipo de control.

    El tipo de control que se selecciona afecta al diseño del grupo.Para obtener más información sobre cada tipo de control, consulte Referencia: Propiedades del Diseñador de pantallas.

Agregar botones

  1. En el Árbol de contenido de pantalla, seleccione cualquier nodo Barra de comandos.

  2. En la parte superior del Diseñador de pantallas, haga clic en Agregar elemento de diseño y, a continuación, haga clic en Botón.

    Un botón aparece bajo el nodo Barra de comandos.

  3. Agregar código que se ejecuta cuando el usuario hace clic en el botón.Para obtener más información, vea Cómo: Agregar un comando personalizado a una pantalla de Silverlight.

Agregar elementos.

  • En la Lista de miembros de pantalla del Diseñador de pantallas, arrastre un elemento (por ejemplo, un campo o comando) hacia la ubicación deseada en el Árbol de contenido de pantalla.

    SugerenciaSugerencia

    El árbol de contenido de pantalla es la jerarquía de objetos de pantalla que se muestran en mitad del diseñador.

    Al arrastrar un elemento, el cursor del mouse cambia para indicar si el elemento se puede situar en una ubicación determinada.Si el cursor del mouse cambia a un círculo con una barra diagonal que lo atraviesa, no se puede colocar el elemento en esa ubicación.

    También se pueden agregar campos personalizados a una pantalla.Para obtener más información, vea Cómo: Agregar una propiedad local a una pantalla de Silverlight.

Quitar elementos.

  1. En el Árbol de contenido de pantalla, seleccione el elemento (por ejemplo, un campo o comando) que se desea quitar de la pantalla.

  2. En la parte superior del Árbol de contenido de pantalla, haga clic en el botón Eliminar.

Mover elementos.

  • En el Árbol de contenido de pantalla, arrastre el elemento (por ejemplo, un campo o comando) hacia la ubicación deseada en la lista de elementos.

    Por ejemplo, arrastre el campo PostalCode para ponerlo bajo el campo Country o arrastre el botón Editar para ponerlo sobre el botón Eliminar.

    [!NOTA]

    Al arrastrar un campo, el cursor del mouse cambia para indicar si el elemento se puede situar en una ubicación determinada.Si el cursor del mouse cambia a un círculo con una barra diagonal que lo atraviesa, no se puede colocar el elemento en esa ubicación.

Cambiar el nombre a mostrar de un elemento.

  1. En el Árbol de contenido de pantalla, seleccione el elemento (por ejemplo, un campo o comando).

  2. En la ventana Propiedades, seleccione el cuadro de texto bajo Nombre para mostrar y escriba el nombre que se desee para el elemento.

    Al cambiar el nombre a mostrar, no se cambia el nombre del elemento.Sólo se cambia el nombre de ese elemento cuando aparece en la pantalla.

Cambiar la posición de la etiqueta de un elemento

  1. En el Árbol de contenido de pantalla, seleccione el campo.

  2. En la ventana Propiedades, haga clic en la lista desplegable bajo Posición de etiqueta y seleccione la posición deseada.

    En la siguiente tabla se describe cada una de las opciones.

    Posición de la etiqueta

    Descripción

    Alineado a la izquierda

    La etiqueta aparece a la izquierda del control.

    Alineado a la derecha

    La etiqueta aparece a la derecha del control.

    Top

    La etiqueta aparece por encima el control.

    Bottom

    La etiqueta aparece por debajo del control.

    None

    Ninguna etiqueta aparece para el campo de datos seleccionado.

    Collapsed

    El campo se coloca en el espacio que de otro modo estaría reservado para la etiqueta.

Cambiar el tamaño de un elemento

  1. En el Árbol de contenido de pantalla, seleccione el elemento (por ejemplo, un campo o comando).

  2. En la ventana Propiedades, bajo Cambio de tamaño, seleccione el tamaño deseado para el ancho y el alto del control.

    Para obtener información sobre cada valor, consulte Referencia: Propiedades del Diseñador de pantallas.

Mostrar u ocultar un elemento

  1. En el Árbol de contenido de pantalla, seleccione el elemento (por ejemplo, un campo o comando).

  2. En la ventana Propiedades, seleccione o desactive la propiedad Visible.

    Si se selecciona Visible, el elemento aparece en la pantalla cuando la aplicación se ejecuta.Si se borra Visible, el elemento no aparece visible en la pantalla cuando la aplicación se ejecuta.

    [!NOTA]

    La etiqueta (No visible) aparece junto a los elementos que no están visibles en la pantalla cuando la aplicación se ejecuta.

Cambiar el tipo de control de un elemento.

  1. En el Árbol de contenido de pantalla, seleccione la lista desplegable situada junto al elemento.

  2. En la lista desplegable, seleccione el tipo de control que se desee.

    La mayoría de los tipos de control son los tipos de control integrados.También se puede establecer el tipo de control a un control personalizado que se crea mediante otras herramientas.Para obtener más información sobre controles personalizados, consulte Cómo: Agregar un control personalizado a una pantalla de Silverlight.

Agregar un control personalizado a una pantalla.

  1. En el Árbol de contenido de pantalla, seleccione un grupo.

  2. En la parte superior del Diseñador de pantallas, haga clic en Agregar elemento de diseño y, a continuación, haga clic en Control personalizado.

    Para obtener más información, vea Cómo: Agregar un control personalizado a una pantalla de Silverlight.

Deshacer cambios

  • En el menú Edición, haga clic en Deshacer.

    SugerenciaSugerencia

    Si se deshace accidentalmente una edición en el Diseñador de pantallas, en el menú Editar, haga clic en Rehacer.

Cambiar si una colección muestra datos cuando la pantalla se carga por primera vez.

  1. En la Lista de miembros de pantalla del Diseñador de pantallas, seleccione el encabezado de una colección (por ejemplo, el encabezado OrderCollection ).

  2. En la ventana Propiedades, desactive la casilla Ejecución automática de consulta si no se desea que la colección muestre cualquier dato cuando aparece la pantalla.Active la casilla Ejecución automática de consulta si se desea que la colección muestre los datos cuando aparece la pantalla.

Habilitar o deshabilitar la paginación

  1. En la Lista de miembros de pantalla del Diseñador de pantallas, seleccione el encabezado de una colección (por ejemplo, el encabezado OrderCollection ).

  2. En la ventana Propiedades, desactive la casilla Admitir paginación si se desea que los usuarios vean todas las filas devueltas por una consulta incluso si la colección de filas es grande.Active la casilla Admitir paginación si se desea limitar el número de registros que se muestran al usuario cuando una consulta devuelve un número de registros grande.

  3. Si se selecciona Admitir paginación, en Núm. de elementos mostrados por página, especifique el número de filas que se desea que le aparezcan al usuario.

    [!NOTA]

    Los usuarios pueden avanzar a través de los conjuntos de filas haciendo clic en un vínculo de la pantalla.

Habilitar o deshabilitar la ordenación

  1. En la Lista de miembros de pantalla del Diseñador de pantallas, seleccione el encabezado de una colección (por ejemplo, el encabezado OrderCollection ).

  2. En la ventana Propiedades, desactive la casilla Admitir ordenación si no se desea que los usuarios ordenen los datos que aparecen para la colección.Active la casilla Admitir paginación si se desea habilitar a los usuarios para que ordenen los datos que aparecen para la colección.

Habilitar o deshabilitar la búsqueda

  1. En la Lista de miembros de pantalla del Diseñador de pantallas, seleccione el encabezado de una colección (por ejemplo, el encabezado OrderCollection ).

  2. En la ventana Propiedades, desactive la casilla Admitir búsqueda si no desea que un cuadro de búsqueda aparezca sobre la colección.Active la casilla Admitir búsqueda si se desea que un cuadro de búsqueda aparezca sobre la colección.Para obtener más información sobre cómo habilitar a los usuario para buscar datos, consulte How to: Enable the User to Search Data.

Vea también

Tareas

Cómo: Personalizar una pantalla de Silverlight en una aplicación en ejecución

Cómo: Agregar una propiedad local a una pantalla de Silverlight

Cómo: Agregar un comando personalizado a una pantalla de Silverlight

Cómo: Agregar datos a una pantalla

Otros recursos

Pantallas: La interfaz de usuario de la aplicación