Parte 3: Navegación, diseño y vistas

Parte 3: Navegación, diseño y vistas

[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows Runtime. Si estás desarrollando para Windows 10, consulta la documentación más reciente ]

El diseño de la interfaz de usuario de tu aplicación de la Tienda Windows consiste en organizar y presentar el contenido a los usuarios y en proporcionar comandos que permitan a los usuarios realizar acciones en el contenido. El diseño de la interfaz de usuario incluye la organización de las páginas en la aplicación, la navegación entre páginas y el diseño del contenido y los comandos de cada página.

Hay varios patrones de navegación que se pueden usar en una aplicación de la Tienda Windows. Los patrones de navegación te ayudarán a elegir el mejor patrón de navegación para tu aplicación.

Nota  

Consulta los dos patrones de navegación principales (navegación plana y navegación jerárquica) como parte de nuestra serie Características de aplicaciones, de principio a fin.

 
Importante  Este tutorial está diseñado para usarse con Microsoft Visual Studio 2013 y Windows 8.1. Algunas partes del tutorial no funcionarán correctamente con Microsoft Visual Studio 2012 y Windows 8.
 

En este tutorial aprenderás a:

  • Agregar páginas y navegación
  • Organizar controles y contenido en una página
  • Adaptar el diseño de página a distintas orientaciones y vistas

Antes de comenzar...

Paso 1: Agregar páginas y navegación

En este tutorial trataremos los conceptos básicos de la creación de una interfaz de usuario en lenguaje de marcado de aplicaciones extensible (XAML). Para aprender estos conceptos básicos, creas un visualizador de fotos sencillo que permite al usuario elegir una imagen de sus Imágenes y después muestra la imagen y alguna información sobre el archivo de imagen. Para el visualizador de fotos, agregas una página nueva a la aplicación "Hello, world!" de la parte 2. Para usar la nueva página, agregas comandos para navegar entre las páginas.

Lo primero que debes hacer es agregar una página nueva a tu aplicación para el visualizador de fotos. Después agregas un comando de navegación a la página principal para que el usuario pueda navegar a la nueva página.

Agregar la página del visualizador de fotos

Empezamos con el código de la Parte 2: Administrar el ciclo de vida y el estado de la aplicación.

JJ215600.wedge(es-es,WIN.10).gifPara agregar una página a una aplicación

  1. Selecciona Proyecto > Agregar nuevo elemento. Se abre el cuadro de diálogo Agregar nuevo elemento.
    Sugerencia  Asegúrate de que el proyecto, y no la solución, esté seleccionado en el Explorador de soluciones.
     
  2. En Visual C# o Visual Basic en el panel izquierdo, elige el tipo de plantilla Tienda Windows.
  3. En el panel central, selecciona Página básica.
  4. Escribe "PhotoPage.xaml" como nombre de la página.
  5. Haz clic en Agregar. El código XAML y los archivos de código subyacente de la página se agregan al proyecto.

    Este es el cuadro de diálogo Agregar nuevo elemento.

    Cuadro de diálogo Agregar nuevo elemento de Visual Studio.

    (La primera vez que agregas una nueva página a la plantilla Aplicación vacía (distinta de una Página en blanco), Visual Studio muestra un cuadro de diálogo con un mensaje que indica que debes agregar archivos que faltan en tu proyecto. Como agregaste estos archivos en la parte 1, no deberías ver esta advertencia. Pero, si aparece, haz clic en para agregar estos archivos. Se agregan archivos de varias clases de utilidades a tu proyecto en la carpeta Common.

  6. Para cambiar el título de la página, selecciona el texto "Mi aplicación" hacia la parte superior de PhotoPage.xaml.

    Asegúrate de que el TextBlock con el nombre pageTitle esté mostrando el panel Propiedades y la vista Propiedades (Botón de eventos) esté seleccionada.

  7. En Común en el panel Propiedades, haz clic en el marcador de propiedad de la propiedad Text. Se abre el menú de propiedad.
    Nota  El marcador de propiedad es el símbolo de cuadro pequeño situado a la derecha de cada valor de propiedad. El marcador de propiedad Text de color verde indica que se ha establecido en un recurso.
     
  8. En el menú de propiedad, selecciona Editar recurso. Se abre el cuadro de diálogo Editar recurso.
  9. En el cuadro de diálogo Editar recurso, cambia el valor "Mi aplicación" a "Hello, photo!".
  10. Haz clic en Aceptar.

    El XAML para la definición de recursos se actualiza de esta manera.

    
    <x:String x:Key="AppName">Hello, photo!</x:String>
    
    

Agregar navegación

El marco de trabajo de la interfaz de usuario de XAML proporciona un modelo de navegación integrado que usa controles Frame y Page y funciona en gran medida como la navegación en un explorador web. El control Frame hospeda controles Page y tiene un historial de navegación que se puede utilizar para ir hacia atrás y hacia adelante por las páginas que ya visitaste. También puedes pasar datos entre las páginas mientras navegas.

En la parte 1 y la parte 2, viste el código de App.xaml.cs/.vb que crea un Frame y navega a MainPage cuando se inicia la aplicación. Aquí, agregas un comando a MainPage para navegar a la nueva PhotoPage del mismo modo.

JJ215600.wedge(es-es,WIN.10).gifPara navegar entre páginas

  1. En el Explorador de soluciones, haz doble clic en MainPage.xaml para abrirlo.
  2. En el editor de XAML, busca el StackPanel que contiene el TextBlock greetingOutput. Inmediatamente después de greetingOutput TextBlock, agrega un elemento Button, como este:
    
    <Button Content="Go to photo page"/>
    
    

    Este es el botón que agregaste con el XAML circundante.

    
    
    <StackPanel Grid.Row="1" Margin="120,30,0,0">
        <TextBlock Text="What's your name?" Style="{ThemeResource BaseTextBlockStyle}"/>
        <StackPanel Orientation="Horizontal" Margin="0,20,0,20">
            <TextBox x:Name="nameInput" Width="300" HorizontalAlignment="Left"
                     TextChanged="NameInput_TextChanged"/>
            <Button Content="Say &quot;Hello&quot;" Click="Button_Click"/>
        </StackPanel>
        <TextBlock x:Name="greetingOutput" Style="{StaticResource BigGreenTextStyle}"/>
        <Button Content="Go to photo page"/>
    </StackPanel>
    
    
    
  3. En el editor XAML o la vista de diseño, selecciona el "Go to photo page" Button que agregaste a MainPage.xaml.
  4. En el panel Propiedades, haz clic en el botón Eventos (Botón de eventos).
  5. Busca el evento Click en la parte superior de la lista de eventos. En el cuadro de texto del evento, escribe "PhotoPageButton_Click" como el nombre de la función que controla el evento Click.
  6. Presiona Entrar. El método de controlador de eventos se crea y se abre en un editor de código, de forma que puedes agregar código que se ejecutará cuando se produzca el evento.
  7. Agrega este código al controlador de eventos que creaste en la página de código subyacente. En el controlador de eventos, navega a la nueva página de fotos que has agregado a la aplicación.
    
    
                // Add this code.
                if (this.Frame != null)
                {
                    this.Frame.Navigate(typeof(PhotoPage));
                }
    
    

    Esta llamada a Navigate causa que se cree una nueva instancia de PhotoPage. Para preservar el estado de la página de fotos, puedes habilitar la caché de navegación para que la página no deba recrearse cada vez que el usuario navega.

  8. Vuelve a PhotoPage.xaml. En el editor XAML o la vista de diseño, selecciona el elemento Page raíz.
  9. En el panel Propiedades, haz clic en el botón Propiedades (Botón Propiedades).
  10. En Común del panel Propiedades, haz clic en la flecha abajo para mostrar las propiedades avanzadas y cambiar el valor NavigationCacheMode a Enabled.
  11. Presiona F5 para compilar y ejecutar la aplicación. Haz clic en el botón Go to photo page. Se abre la página de fotos. Haz clic en el botón Atrás para volver a la página principal.

Navegación entre páginas

No necesitas agregar un botón Atrás a la página de fotos. La página de fotos se basa en la plantilla Página básica, que tiene compatibilidad integrada para navegación. El botón Atrás usa el historial de Frame para volver a la página anterior y solo se muestra cuando la propiedad Frame.CanGoBack es true.

Paso 2: Agregar controles y contenido a una página

Ahora vas a agregar contenido a la página de fotos. Antes de empezar a trabajar en el diseño de la página de fotos, resulta útil entender los conceptos básicos del diseño con XAML.

Acerca de la creación de una interfaz de usuario con XAML

El sistema de diseño de XAML admite diseños tanto estáticos como fluidos.

En un diseño estático, se definen en los controles tamaños de píxeles y posiciones explícitas. Cuando el usuario cambia la resolución u orientación de su dispositivo, la interfaz de usuario no cambia. Los diseños estáticos pueden estirarse, reducirse o recortarse en distintos factores de forma y tamaños de pantalla.

Los diseños fluidos se reducen, crecen y vuelven a fluir para adaptarse al espacio visual disponible en un dispositivo. En un diseño fluido, los contenedores de diseño y los controles cambian automáticamente de tamaño y de posición a medida que la aplicación cambia de tamaño. En una aplicación de la Tienda Windows, seguirás usando elementos y valores estáticos en algunas partes, pero debes asegurarte de que el conjunto de la interfaz de usuario sea fluida y se adapte a las distintas resoluciones, diseños y vistas.

La mayor parte del contenido de la aplicación se puede organizar en ciertos tipos de grupos o jerarquías. Usas los contenedores de diseño para agrupar y organizar elementos de la interfaz de usuario. El sistema de diseño de XAML proporciona diversos controles Panel, como Grid, StackPanel y Canvas, que sirven como contenedores donde se organiza el contenido. La mayoría de los contenedores realiza algún tipo de cambio de tamaño automático de sus elementos secundarios si los elementos no tienen establecido un tamaño explícito.

Usas una Grid para organizar el contenido en filas y columnas. Colocas los elementos con las propiedades adjuntas Grid.Row y Grid.Column. Puedes hacer que los elementos se expandan en varias filas y columnas mediante las propiedades adjuntas Grid.RowSpan y Grid.ColumnSpan.

Usas un StackPanel para organizar el contenido en una sola línea. Puedes establecer la propiedad Orientation para apilar los elementos vertical u horizontalmente.

Usas un Canvas cuando quieres controlar todos los aspectos de la posición y el tamaño del contenido. En un Canvas, colocas los elementos de forma absoluta mediante las propiedades adjuntas Canvas.Top y Canvas.Left. Un Canvas no cambia el tamaño de los elementos secundarios, de modo que deberás cambiar el tamaño de forma explícita.

Para controlar el tamaño y la posición de un elemento, estableces sus propiedades de diseño. Estas son algunas propiedades de diseño habituales y el efecto que producen.

  • HorizontalAlignment y VerticalAlignment: especifican la posición de un objeto con respecto a su objeto primario.
  • Margin: especifican la cantidad de espacio vacío alrededor del control, entre la parte exterior del objeto secundario y los límites del panel.
  • Width y Height: especifican valores fijos medidos en píxeles.
  • MinWidth/MaxWidth y MinHeight/MaxHeight: especifican valores que limitan el tamaño de un elemento al tiempo que permiten un cambio de tamaño fluido.

Usas estos contenedores y propiedades de diseño para crear un diseño fluido para la página del visualizador de fotos.

Herramientas de diseño de XAML

En la parte 1, agregaste controles a la página principal escribiendo el código XAML directamente en el editor XAML. Pero Visual Studio también incluye un diseñador XAML visual que puedes usar para agregar y organizar los controles. En el resto de este tutorial usarás el diseñador XAML para crear la interfaz de usuario. Antes de empezar, echemos un vistazo a las partes de la interfaz de usuario de Visual Studio que vas a usar y veamos cómo completar algunas tareas comunes.

Estas son las partes principales de Visual Studio que vas a usar:

PanelImagenDescripción
Explorador de solucionesExplorador de solucionesÚsalo para administrar los archivos del proyecto.
  • Haz doble clic en un archivo para abrirlo. Si el archivo ya está abierto, se convierte en el documento activo.
PropiedadesPanel PropiedadesÚsalo para ver y editar las propiedades del elemento seleccionado.
  • De manera predeterminada, las propiedades se agrupan por categoría. Expande una categoría para ver sus propiedades.
  • Para mostrar las propiedades avanzadas haz clic en la flecha abajo situada en la parte inferior de una categoría.
Diseñador de XAMLDiseñador de XAMLÚsalo para agregar y organizar los elementos de la interfaz de usuario de la aplicación.
  • Las interacciones habituales son arrastrar y colocar para organizar los elementos y hacer clic para seleccionar un elemento.
Editor de XAMLEditor de XAML Úsalo para editar directamente el código XAML.
Cuadro de herramientasCuadro de herramientas Úsalo para agregar controles y otros elementos a la interfaz de usuario de tu aplicación.
  • Arrastra los controles en la superficie del diseñador.
DispositivoPanel Dispositivo Úsalo para simular las distintas configuraciones de un dispositivo físico en el diseñador.
  • Haz clic en los botones de vista para simular las distintas vistas de la aplicación en el diseñador.
  • Cambia la configuración de pantalla para simular las distintas resoluciones en el diseñador.
Esquema del documentoEsquema del documento Úsalo para seleccionar y organizar los elementos de interfaz de usuario en una vista jerárquica.
  • Haz clic en un elemento para seleccionarlo.
  • Haz clic en una flecha para expandir un elemento y ver sus elementos secundarios.
  • Usa Ctrl+clic para seleccionar varios elementos no contiguos.
  • Usa Mayús+clic para seleccionar varios elementos contiguos.
  • Arrastra y coloca elementos para reorganizarlos.

 

Se supone que estás usando el diseño de ventana predeterminado en Visual Studio. Si cambias el diseño predeterminado, puedes restablecerlo en el menú Ventana si seleccionas el comando Restablecer diseño de la ventana.

Hay algunas tareas comunes que se repiten con frecuencia durante la creación de una interfaz de usuario. Si sabes cómo realizar estar tareas antes de empezar, será mucho más sencillo crear la interfaz de usuario.

JJ215600.wedge(es-es,WIN.10).gifPara abrir un archivo

  • Haz doble clic en el nombre de archivo en el Explorador de soluciones. Si el archivo ya está abierto, se activa en el diseñador y en el editor de XAML.

De manera predeterminada, los paneles Cuadro de herramientas, Dispositivo y Esquema del documento están contraídos a la izquierda del diseñador.

JJ215600.wedge(es-es,WIN.10).gifPara abrir los paneles Cuadro de herramientas, Dispositivo o Esquema del documento

  1. Para abrir uno de los paneles, haz clic en el nombre del panel en cuestión.
  2. Para mantener el panel abierto, haz clic en el icono (alfiler) Ocultar automáticamente en el encabezado del panel.
    Sugerencia  Si la Caja de herramientas cubre una parte del diseñador de XAML en la que necesitas colocar un control, ancla la Caja de herramientas abierta.
     

Hay diversas formas de seleccionar un elemento y activarlo. En algunas situaciones, una puede ser más sencilla que otras. En este caso, te sugeriremos la forma más sencilla de seleccionar el elemento.

JJ215600.wedge(es-es,WIN.10).gifPara seleccionar un elemento

  1. En el panel Esquema del documento, haz clic en el elemento o el nombre del elemento, en caso de que tenga un nombre.
  2. En el editor de XAML, haz clic en la etiqueta de apertura del elemento.
  3. En el diseñador de XAML, realiza una de estas acciones:
    • Mueve el cursor del mouse sobre el elemento hasta que aparezca un resaltado azul a su alrededor. Haz clic en el elemento resaltado para activarlo.
    • Haz clic con el botón secundario en un objeto del diseñador. En el menú contextual, abre el submenú Establecer selección actual y selecciona el elemento para activarlo.
  4. Comprueba el panel Propiedades para asegurarte de que el elemento correcto está activo.

El panel Propiedades tiene vistas para administrar tanto las propiedades como los eventos.

JJ215600.wedge(es-es,WIN.10).gifPara alternar las vistas Propiedades y Eventos en el panel Propiedades

  • En el panel Propiedades,
    • haz clic en el botón Eventos (Botón de eventos) para mostrar la vista Eventos.
    • haz clic en el botón Propiedades (Botón de eventos) para mostrar la vista Propiedades.

Para hacer referencia a un elemento en el código, debes asignarle un nombre.

JJ215600.wedge(es-es,WIN.10).gifPara denominar un elemento de la interfaz de usuario

  1. Selecciona el elemento que quieras denominar.
  2. En el panel Propiedades, escribe un nombre en el cuadro de texto Name.
  3. Presiona Entrar para confirmar el nombre.

    Editor de la propiedad Name

Cuando agregas un elemento en el diseñador, el diseñador establece las propiedades de diseño para configurar una posición y un tamaño absolutos para el elemento. Estas propiedades normalmente deben restaurarse para crear un diseño fluido.

JJ215600.wedge(es-es,WIN.10).gifPara restablecer una propiedad

  1. Asegúrate de que esté seleccionado el elemento que tiene la propiedad y que el panel Propiedades muestra la vista Propiedades.
  2. En el panel Propiedades, haz clic en el marcador de propiedades junto al valor de la propiedad. Se abre el menú de propiedad.
  3. En el menú de propiedad, haz clic en Restablecer.

    Menú de propiedad

JJ215600.wedge(es-es,WIN.10).gifPara cambiar la alineación de un elemento

  1. Selecciona el elemento que quieras alinear.
  2. En Diseño en el panel Propiedades, realiza una de estas acciones:
    • Cambia la propiedad HorizontalAlignment por una de estas:
      Ancla a la izquierda pero se ajusta hacia la derecha cuando se cambia el tamaño.
      Ancla siempre en el centro horizontal independientemente de que se cambie el tamaño.
      Ancla a la derecha pero se ajusta hacia la izquierda cuando se cambia el tamaño.
      Se ajusta en ambas direcciones horizontalmente cuando se cambia el tamaño.

       

    • Cambia la propiedad VerticalAlignment por una de estas:
      Ancla a la parte inferior pero se ajusta hacia la parte superior cuando se cambia el tamaño.
      Ancla siempre en el centro vertical independientemente de que se cambie el tamaño.
      Ancla a la parte superior pero se ajusta hacia la parte inferior cuando se cambia el tamaño.
      Se ajusta en ambas direcciones verticalmente cuando se cambia el tamaño.

       

JJ215600.wedge(es-es,WIN.10).gifPara cambiar los márgenes de un elemento

  1. Selecciona el elemento cuyos márgenes quieres ajustar
  2. En Diseño en el panel Propiedades, configura uno o varios de los valores de Margin: Izquierda, Derecha, Arriba, Abajo.

    Propiedad Margin

 

Agregar comandos de navegación

En el paso 1, agregaste un Button para navegar de la página principal a la nueva página de fotos. Para mayor comodidad, colocas el botón en el canvas de la página principal. Pero el comando de navegación no está relacionado con ningún otro elemento de la página principal y el botón parece estar fuera de lugar. Cuando diseñes tu aplicación de la Tienda Windows, es importante que tengas en cuenta la ubicación de los comandos.

Las aplicaciones de la Tienda Windows proporcionan barras de la aplicación para agrupar comandos que se ocultan de manera predeterminada. El usuario puede mostrar los comandos cuando sea necesario deslizando rápidamente desde el borde superior o inferior de la pantalla o haciendo clic con el botón secundario. La barra de la aplicación situada en la parte superior de la pantalla suele usarse para la navegación, de modo que agregas una barra de la aplicación superior y colocas en ella el botón de navegación.

JJ215600.wedge(es-es,WIN.10).gifPara agregar una barra de la aplicación superior

  1. En el Explorador de soluciones, haz doble clic en MainPage.xaml para abrirlo.
  2. En el Esquema del documento, expande el elemento "pageRoot" y haz clic con el botón secundario en TopAppBar.
  3. En el menú contextual, elige Agregar CommandBar. Se agrega un elemento CommandBar a la página.

    Puedes agregar una AppBar o una CommandBar a una página. AppBar es más personalizable, pero requiere que controles más del diseño tú mismo. CommandBar es menos personalizable, pero controla el diseño por ti. A menos que requieras la flexibilidad de AppBar, te recomendamos usar una CommandBar.

Una CommandBar solamente puede contener los elementos AppBarButton, AppBarToggleButton y AppBarSeparator. Para reemplazar el botón de navegación que agregaste antes, agrega un AppBarButton a la CommandBar.

JJ215600.wedge(es-es,WIN.10).gifAgregar un botón de barra de la aplicación

  1. En el Esquema del documento, expande el elemento CommandBar y haz clic con el botón secundario en PrimaryCommands.
  2. En el menú contextual, elige Agregar AppBarButton. Se agrega un AppBarButton a la CommandBar y se selecciona.
  3. En el icono del panel Propiedades, elige "Imágenes" en el menú desplegable Symbol.
  4. En Común del panel Propiedades, cambia el valor de Label de "AppBarButton" a "Imágenes".
  5. En el panel Propiedades, haz clic en el botón Eventos (Botón de eventos).
  6. Busca el evento Click en la parte superior de la lista de eventos. En el cuadro de texto del evento, escribe PhotoPageButton_Click. Usas el mismo controlador de eventos que creaste para el botón de navegación que agregaste anteriormente.

    Este es el código XAML final para la barra de la aplicación.

    
    <Page.TopAppBar>
        <CommandBar>
            <AppBarButton Label="Pictures" Icon="Pictures" Click="PhotoPageButton_Click"/>
        </CommandBar>
    </Page.TopAppBar>
    
    
  7. Selecciona el botón "Go to photo page" y presiona Eliminar. Ahora tienes el botón de la barra de la aplicación para navegación, por lo que ya no necesitas este botón.
  8. Presiona F5 para compilar y ejecutar la aplicación. Para abrir la barra de la aplicación, desliza rápidamente desde el borde superior o inferior de la pantalla o haz clic con el botón secundario en la aplicación.

Usaste la barra de la aplicación para lograr un diseño más limpio de la página principal. Ahora nos vamos a centrar en la nueva página del visualizador de fotos.

Agregar una cuadrícula de diseño

Para empezar, agregas un objeto Grid para dividir el área de contenido de la página en tres filas. Las primeras dos filas tienen un alto fijo y las últimas filas rellenan el espacio disponible restante.

JJ215600.wedge(es-es,WIN.10).gifPara agregar un panel Grid a una página

  1. Abre PhotoPage.xaml.
  2. Arrastra un objeto Grid del Cuadro de herramientas y colócalo en la superficie de diseño en mitad de la página.

    El objeto Grid se agrega a la página y el diseñador establece algunas propiedades según su mejor pronóstico acerca del diseño que quieres crear. Grid aparece resaltado en azul para indicar que ahora es el objeto activo.

  3. En el panel Propiedades, escribe "contentGrid" como el nombre de Grid.

    Editor de la propiedad Name

  4. Restablece estas propiedades de Grid: Width, Height, HorizontalAlignment, VerticalAlignment y Margin. Ahora el objeto Grid ocupa completamente el área de contenido de la página.
  5. En Diseño, establece el Margin izquierdo y el Margin inferior en "120".

    Propiedad Margin

  6. En el diseñador, aparecen líneas de puntos, o barras de cuadrícula, en los lados superior e izquierdo de Grid. Mueve el cursor sobre la barra de cuadrícula del lado izquierdo. El puntero se convierte en una flecha con un signo más (+) y una línea naranja muestra dónde se agregará una fila.

    Agregar una fila de cuadrícula

  7. Haz clic en cualquier lugar de la barra de cuadrícula situada a la izquierda para agregar una fila.
  8. Repite el paso anterior para agregar otra fila a Grid.

    Grid tiene ahora tres filas. Cuando el cursor se encuentra sobre la barra de cuadrícula, aparece un pequeño control flotante que puedes usar para seleccionar las opciones de tamaño y ajustar la propiedad Height de la fila.

  9. Coloca el cursor sobre la barra de cuadrícula en la primera fila hasta que aparezca el control flotante.
  10. Haz clic en la flecha abajo para abrir el menú del control flotante. Selecciona Píxel en el menú.

    Menú del control flotante de la fila de cuadrícula

  11. Vuelve a colocar el cursor sobre la barra de cuadrícula hasta que aparezca el control flotante. En el control flotante, haz clic en el valor de número.
  12. Escribe "50" y presiona Entrar para establecer la propiedad Height en 50 píxeles.

    Valor de píxel de la fila de cuadrícula

  13. Repite el proceso de los pasos 9 a 12 para establecer el valor de Height de la segunda fila en 70 píxeles.

    La última fila se configura con el valor predeterminado "1*" (1 estrella), que significa que usará todo el espacio restante.

Ahora echemos un vistazo al XAML que se genera como consecuencia.


<Grid x:Name="contentGrid" Grid.Row="1" Margin="120,0,0,120">
    <Grid.RowDefinitions>
        <RowDefinition Height="50"/>
        <RowDefinition Height="70"/>
        <RowDefinition/>
    </Grid.RowDefinitions>
</Grid>

Para definir filas en Grid, hay que agregar objetos RowDefinition a la colección Grid.RowDefinitions. Puedes establecer las propiedades en RowDefinition para especificar el aspecto de la fila. Las columnas se agregan de la misma forma, con objetos ColumnDefinition y la colección Grid.ColumnDefinitions.

Observa esta configuración en la etiqueta Grid de apertura: Grid.Row="1". Colocas los elementos en una Grid con las propiedades adjuntas Grid.Row y Grid.Column. La numeración de la fila y la columna se basa en cero, de modo que esta configuración indica que el panel "contentGrid" se agrega a la segunda fila de su objeto Grid primario. Esta propiedad la establece Visual Studio, en función del lugar donde coloques el objeto Grid cuando lo agregues.

Agregar controles a la página de fotos

Ahora vas a agregar controles a Grid. Agregas un Button para obtener una imagen de Imágenes, un control Image para mostrar la imagen y algunos controles TextBlock para mostrar información sobre el archivo de imagen. Usas StackPanel en la última fila de cuadrícula para organizar los controles Image y TextBlock.

JJ215600.wedge(es-es,WIN.10).gifPara agregar controles a la página

  1. JJ215600.wedge(es-es,WIN.10).gifAgregar el botón "Get photo"

    1. En el Esquema del documento, selecciona el panel "contentGrid".
    2. Con el panel "contentGrid" seleccionado, arrastra un control Button desde el Cuadro de herramientas y colócalo en la primera fila de cuadrícula.
    3. En el panel Propiedades, restablece estas propiedades de Button: HorizontalAlignment, VerticalAlignment y Margin.
    4. Establece la propiedad Content del botón en "Get photo".
  2. JJ215600.wedge(es-es,WIN.10).gifAgregar el nombre de imagen TextBlock

    1. Con el panel "contentGrid" seleccionado, arrastra un control TextBlock desde el Cuadro de herramientas y colócalo en la segunda fila de cuadrícula.
    2. En el panel Propiedades, restablece estas propiedades de TextBlock: HorizontalAlignment, VerticalAlignment y Margin.
    3. Expande el grupo Varios y busca la propiedad Style.
    4. En el menú de la propiedad Style, selecciona Recurso del sistema > SubheaderTextBlockStyle.
  3. JJ215600.wedge(es-es,WIN.10).gifAgregar la imagen

    1. Con el panel "contentGrid" seleccionado, arrastra un StackPanel desde el Cuadro de herramientas y colócalo en la última fila de cuadrícula.
    2. Restablece estas propiedades de StackPanel: Width, Height, HorizontalAlignment, VerticalAlignment y Margin.
    3. En el panel Propiedades, establece la propiedad Orientation de StackPanel en Horizontal.
    4. En el cuadro de texto Name de StackPanel, escribe "imagePanel" y, a continuación, presiona Entrar.
    5. Con StackPanel seleccionado, arrastra un control Border desde el Cuadro de herramientas y colócalo en StackPanel.
    6. En Pincel en el panel Propiedades, selecciona Background.
    7. Selecciona la pestaña de pincel de color sólido y establece el valor de color en "#FF808080".
    8. Repite los pasos f y g para la propiedad BorderBrush.

      Editor de pinceles de Visual Studio

    9. Arrastra un control Image desde el Cuadro de herramientas y colócalo en Border.
    10. En el cuadro de texto Name de Image, escribe "displayImage" y, a continuación, presiona Entrar.
    11. En la lista desplegable de la propiedad Source de Image, selecciona "Logo.png".
    12. En el Esquema del documento, selecciona el Border que contiene la Image.
    13. En el panel Propiedades, restablece la propiedad Width de Border.
  4. JJ215600.wedge(es-es,WIN.10).gifAgregar la información de imagen

    1. Arrastra un control TextBlock desde el Cuadro de herramientas y colócalo en "imagePanel" StackPanel, a la derecha del control Image.

      Aquí no necesitas restablecer ninguna propiedad de diseño, como cuando colocaste el TextBlock en la cuadrícula. StackPanel y Grid controlan el cambio de tamaño de sus elementos secundarios de manera diferente. Para obtener más información, consulta Inicio rápido: Agregar controles de diseño.

    2. Arrastra otros cinco controles TextBlock a StackPanel.

      Ahora hay seis controles TextBlock alineados horizontalmente a la derecha del control Image.

    3. Selecciona el primer TextBlock y establece su propiedad Text en "File name:" (Nombre de archivo).
    4. Selecciona el tercer TextBlock y establece su propiedad Text en "Path:" (Ruta de acceso).
    5. Selecciona el quinto TextBlock y establece su propiedad Text en "Date created:" (Fecha de creación).

La interfaz de usuario del visualizador de fotos tiene ahora el siguiente aspecto. Ya casi hemos terminado el diseño, pero todavía hay que corregir el aspecto de los elementos de TextBlock que muestran la información de imagen.

Aplicación en el diseñador de XAML

Este es e código XAML que se genera para este diseño.


<Grid x:Name="contentGrid" Grid.Row="1" Margin="120,0,0,120">
    <Grid.RowDefinitions>
        <RowDefinition Height="50"/>
        <RowDefinition Height="70"/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Button Content="Get photo"/>
    <TextBlock Grid.Row="1" TextWrapping="Wrap" Text="TextBlock" 
               Style="{StaticResource PageSubheaderTextStyle}"/>
    <StackPanel x:Name="imagePanel" Grid.Row="2" Orientation="Horizontal">
         <Border BorderBrush="Gray" BorderThickness="7" Background="Gray">
             <Image x:Name="displayImage" Source="Assets/Logo.png"/>
         </Border>
         <TextBlock TextWrapping="Wrap" Text="File name:"/>
         <TextBlock TextWrapping="Wrap" Text="TextBlock"/>
         <TextBlock TextWrapping="Wrap" Text="Path:"/>
         <TextBlock TextWrapping="Wrap" Text="TextBlock"/>
         <TextBlock TextWrapping="Wrap" Text="Date created:"/>
         <TextBlock TextWrapping="Wrap" Text="TextBlock"/>
    </StackPanel>
</Grid>

Necesitas corregir el diseño y el formato de los elementos de TextBlock que has agregado. Para que el texto de información de imagen tenga el diseño que quieres, agrupas los controles en un StackPanel vertical.

JJ215600.wedge(es-es,WIN.10).gifPara agrupar elementos en un StackPanel

  1. En el Esquema del documento, haz clic en el primer TextBlock en el StackPanel "imagePanel".
  2. Presiona Mayús y haz clic en el último TextBlock del grupo. Ahora los seis controles TextBlock están seleccionados.
  3. Haz clic con el botón secundario en el grupo de controles TextBlock seleccionados. En el menú contextual, selecciona Agrupar en > StackPanel.

    Se agrega un StackPanel a la página, y los seis controles TextBlock se colocan dentro de StackPanel.

  4. En Diseño en el panel Propiedades, establece la propiedad Orientation de StackPanel en Vertical.
  5. Establece el Margin izquierdo de StackPanel en "20".

Solo nos queda aplicar formato al texto de información de la imagen. Vas a usar estilos integrados para el texto y vas a establecer algunos márgenes para crear espacio entre los elementos.

JJ215600.wedge(es-es,WIN.10).gifPara aplicar estilos al texto

  1. En el Esquema del documento, haz clic en el primer TextBlock en el StackPanel "imagePanel".
  2. Presiona Ctrl y haz clic en el tercer y quinto TextBlock del grupo. Ahora hay tres controles TextBlock seleccionados.
  3. En Varios en el panel Propiedades, busca la propiedad Style.
  4. En el menú de la propiedad Style, selecciona Recurso del sistema > CaptionTextBlockStyle.
  5. Selecciona el segundo, cuarto y sexto control TextBlock del grupo.
  6. Establece la propiedad Style en Recurso del sistema > BodyTextBlockStyle.
  7. Establece el valor de la propiedad de Margin izquierdo en 10 y el valor del margen inferior en 30.

Ahora el código XAML de la información de imagen tiene el siguiente aspecto.


<StackPanel Margin="20,0,0,0">
    <TextBlock TextWrapping="Wrap" Text="File name:" 
               Style="{ThemeResource CaptionTextBlockStyle}"/>
    <TextBlock TextWrapping="Wrap" Text="TextBlock" 
               Style="{ThemeResource BodyTextBlockStyle}" Margin="10,0,0,30"/>
    <TextBlock TextWrapping="Wrap" Text="Path:" 
               Style="{ThemeResource CaptionTextBlockStyle}"/>
    <TextBlock TextWrapping="Wrap" Text="TextBlock" 
               Style="{ThemeResource BodyTextBlockStyle}" Margin="10,0,0,30"/>
    <TextBlock TextWrapping="Wrap" Text="Date created:" 
               Style="{ThemeResource CaptionTextBlockStyle}"/>
    <TextBlock TextWrapping="Wrap" Text="TextBlock" 
               Style="{ThemeResource BodyTextBlockStyle}" Margin="10,0,0,30"/>
</StackPanel>

Presiona F5 para compilar y ejecutar la aplicación. Navega a la página de fotos. Ahora tiene esta apariencia.

Aplicación en el diseñador de XAML

Paso 3: Adaptar el diseño de página a distintas orientaciones y vistas

Por ahora, has diseñado la aplicación para que se vea en pantalla completa con orientación horizontal. Pero una nueva interfaz de usuario de Windows debe adaptarse a orientaciones y diseños diferentes. Específicamente, debe admitir ambas orientaciones, horizontal y vertical. Aquí aprenderemos a hacer que tu aplicación tenga buen aspecto en cualquier resolución u orientación.

Usar distintas vistas en Visual Studio

Para ver el aspecto que tendrá tu aplicación en las diferentes vistas, puedes usar el panel Dispositivo de Visual Studio 2013. (El panel Dispositivo está disponible solamente cuando una página XAML está activa). Nos permite simular las diversas vistas, pantallas y opciones de pantalla de la aplicación en el diseñador de Visual Studio. Aquí verás cómo usar las opciones de Orientación, pero también necesitarás usar las opciones de Pantalla para ver el aspecto de la interfaz de usuario en las distintas resoluciones de pantalla. Un diseño fluido se adapta para poder verse bien en distintas pantallas.

Panel Dispositivo

Probemos la orientación vertical para ver el aspecto de la aplicación.

JJ215600.wedge(es-es,WIN.10).gifPara usar distintas vistas en Visual Studio

  1. En el panel Dispositivo, haz clic en el botón de vista vertical (Botón de vista vertical). El diseñador cambia para simular la vista vertical.

    Este es el aspecto de la aplicación cuando el usuario gira la aplicación a la orientación vertical. Esta vista es demasiado estrecha. Debes realizar algunos ajustes al ancho de la interfaz de usuario de la aplicación.

    Vista vertical

  2. Haz clic en el botón Horizontal para volver a la vista predeterminada.

Ajustar la vista vertical

Ahora vamos a corregir la vista vertical.

Cuando cambiaste el StackPanel de Horizontal a Vertical, se cambió el tamaño de Border e Image automáticamente. Este es un ejemplo de diseño fluido. StackPanel deja que sus elementos secundarios se estiren en el sentido de su orientación y los limita en la orientación opuesta. En lugar de establecer un tamaño fijo de la imagen, dejas que el panel de diseño organice sus elementos secundarios y cambie su tamaño.

JJ215600.wedge(es-es,WIN.10).gifPara ajustar la vista vertical

  1. En el editor XAML, agrega este bloque de XAML después del elemento contentGrid Grid.
    
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup>
                    <VisualState x:Name="DefaultLayout">
                        <Storyboard>
                        </Storyboard>
                    </VisualState>
    
                    <VisualState x:Name="Portrait">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames 
                                Storyboard.TargetProperty="(StackPanel.Orientation)" 
                                Storyboard.TargetName="imagePanel">
                                <DiscreteObjectKeyFrame KeyTime="0">
                                    <DiscreteObjectKeyFrame.Value>
                                        <Orientation>Vertical</Orientation>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames 
                                Storyboard.TargetProperty="(FrameworkElement.Margin)" 
                                Storyboard.TargetName="imagePanel">
                                <DiscreteObjectKeyFrame KeyTime="0">
                                    <DiscreteObjectKeyFrame.Value>
                                        <Thickness>0,0,20,0</Thickness>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
    
    
  2. En el Esquema del documento, selecciona el elemento "pageRoot".
  3. En el panel Propiedades, haz clic en el botón Eventos (Botón de eventos).
  4. Busca el evento SizeChanged en la lista de eventos. En el cuadro de texto del evento, escribe "PhotoPage_SizeChanged" como el nombre de la función que controla el evento SizeChanged.
  5. Presiona Entrar. El método de controlador de eventos se crea y se abre en un editor de código, de forma que puedes agregar código que se ejecutará cuando se produzca el evento.
  6. Agrega este código al controlador de eventos.
    
    
                if (e.NewSize.Height/e.NewSize.Width >= 1)
                {    
                    VisualStateManager.GoToState(this, "Portrait", true);
                }
                else
                {
                    VisualStateManager.GoToState(this, "DefaultLayout", true);
                }
    
    

Para probar la aplicación en diferentes orientaciones, vistas y resoluciones, puedes usar el simulador en Visual Studio. Para ejecutar tu aplicación de la Tienda Windows en el simulador, selecciona Simulador en la lista desplegable situada junto al botón Iniciar depuración de la barra de herramientas Estándar. Si quieres más información sobre cómo probar la aplicación en el simulador, consulta el tema sobre cómo ejecutar aplicaciones de la Tienda Windows en Visual Studio.

La aplicación ahora tiene esta apariencia cuando la ejecutas en el simulador con una orientación vertical.

Vista vertical

Resumen

Enhorabuena, ¡ya has completado el tercer tutorial! Has aprendido a guardar datos de la aplicación y el estado de la sesión en una aplicación de la Tienda Windows.

Consultar el código

¿Te has quedado atascado o quieres revisar tu trabajo? De ser así, consulta Código completo de la parte 3.

Pasos siguientes

En la siguiente parte de esta serie de tutoriales, aprenderás a acceder a los archivos y trabajar con ellos. Ve a la Parte 4: Acceso a los archivos y selectores de archivos.

Temas relacionados

Para diseñadores
Patrones de navegación
Diseños de comandos
Diseño
Botón Atrás
Directrices para el control de navegación centralizada
Directrices para barras de la aplicación
Hacer que la barra de la aplicación sea accesible
Para desarrolladores (XAML)
Agregar barras de la aplicación (XAML)
Ir de una página a otra (XAML)
Muestra del control Hub XAML
Muestra de control AppBar XAML
Muestra de navegación XAML
Windows.UI.Xaml.Controls Hub class
Windows.UI.Xaml.Controls AppBar class
Windows.UI.Xaml.Controls CommandBar class

 

 

Mostrar:
© 2017 Microsoft