La plataforma Windows Phone 8 tiene sus propios estilos de diseño que lo hacen destacar de cualquier otra plataforma móvil. Estos diseños únicos son posibles gracias a unos pocos controles integrados convenientes del SDK de Windows Phone 8. Los controles que vamos a ver en este tutorial son los Pivote y Panorama controles.
1. panorama
Qué es?
El control de diseño de Windows Phone Panorama ofrece un enfoque único en términos de cómo se presenta el contenido al usuario. Un panorama consta de varios paneles o elementos de panorama que representan cada uno una página. En cualquier momento, solo un elemento de panorama es visible junto a una pequeña parte del elemento de panorama anterior o siguiente. Usar el control Panorama se siente como mirar a través de un ojo de la cerradura, se puede ver parte de la habitación detrás de la puerta, pero no toda la habitación.
La captura de pantalla anterior es un gran ejemplo para demostrar el control Panorama. El ejemplo anterior contiene cinco elementos de panorama. Cada elemento del panorama representa una página con contenido..
En la captura de pantalla anterior, el panorama activo tiene un título de menú. Al mismo tiempo, podemos ver el siguiente elemento del panorama titulado destacado. El control Panorama le muestra al usuario que hay más contenido esperando ser descubierto a la derecha. Averigüemos cómo usar el control Panorama..
Creando un Control Panorama
Comience creando un nuevo proyecto de Windows Phone. Para agregar un control Panorama al proyecto, elija Añadir nuevo elemento> Página panorámica de Windows Phone> Añadir desde el Proyecto menú. Esto debería agregar un control de panorama con dos elementos de panorama. El control Panorama debe estar visible en la vista de diseño de Visual Studio.
Agreguemos algo de contenido al control Panorama. Vamos a llenar el primer elemento de panorama con una lista de colores y el segundo elemento de panorama con una serie de rectángulos de colores que se corresponden con la lista de colores del primer elemento de panorama. En este momento, el control Panorama contiene un control de cuadrícula con un nombre de LayoutRoot como se muestra a continuación.
El control de cuadrícula llamado LayoutRoot es el contenedor principal de la página actual de nuestra aplicación, que contiene todos los demás elementos de la página. Recuerde que en XAML los controles están estructurados jerárquicamente, muy similar a XML..
El control Panorama está anidado en el control Grid y tiene un Título propiedad de "mi aplicación". El control Panorama contiene los elementos de panorama. Como puede ver en el fragmento XAML anterior, el control Panorama contiene actualmente dos elementos de panorama. Encabezamiento propiedad de los elementos del panorama es Objeto 1 y item2 respectivamente.
los Encabezamiento propiedad de un elemento de panorama es similar a la Título propiedad del control Panorama y puedes cambiarlos a lo que quieras.
Añadiendo colores
Ahora llenemos los elementos de panorama con algún contenido como hemos discutido anteriormente. Actualice el contenido de los dos elementos de panorama como se muestra a continuación.
Como puedes ver he cambiado el Encabezamiento propiedad de los elementos del panorama a nombres de colores y colores respectivamente. Para el primer elemento de panorama, agregué un control StackPanel que contiene cinco controles TextBlock. Cada uno de los controles TextBlock tiene su Texto propiedad establecida en el nombre del color. También he puesto el Tamaño de fuente propiedad de cada control TextBlock para 30px para agrandar el texto.
El segundo control PanoramaItem también contiene un control StackPanel, que contiene cinco controles Rectangle. Cada control de rectángulo se rellena con un color listado en el primer elemento de panorama usando su Llenar propiedad. los Altura propiedad de los rectángulos se establece en 50px y el Margen la propiedad se establece en 0, 0, 0, 10, lo que se traduce en un margen inferior de 10px. Puede ver el resultado de su trabajo en la vista de diseño de su IDE como se muestra a continuación.
Ahora que hemos completado el control de Panorama con algo de contenido, es hora de centrarse en el segundo control de este tutorial, el control Pivot..
2. Pivote
Qué es?
El control Pivot es otra forma de presentar el contenido al usuario, exclusivo de la plataforma de Windows Phone. El control Pivot es similar al control Panorama en algunos aspectos, pero tiene una serie de características que lo distinguen.
Al igual que un control Panorama, un control Pivot puede consistir en múltiples Pivote controles Cada elemento pivote puede contener otros controles, como los controles Grid y StackPanel. La captura de pantalla de arriba muestra un control Pivot con dos controles PivotItem, directorio y instalaciones.
Mientras que el control Panorama muestra un adelanto de la página siguiente, el control de Pivot hace lo mismo para el Encabezamiento en la parte superior del control de pivote. Esto se muestra claramente en el ejemplo anterior en el que puede ver las primeras letras de la palabra instalaciones, El título del segundo elemento pivote. Para ilustrar que el segundo elemento pivote no está enfocado, su título está en gris.
Creando un Control de Pivote
Vamos a crear un control Pivot siguiendo los mismos pasos que tomamos para crear un control Panorama. En su lugar, seleccione la opción de la página dinámica de Windows Phone. Al igual que el control Panorama, rellene el control Pivot con la lista de colores y sus nombres como lo hicimos anteriormente. El código XAML resultante para el control de Pivot debería ser similar al que se muestra a continuación.
Antes de que podamos compilar y ejecutar la aplicación para ver ambos controles en acción, debemos implementar una forma de navegar por las páginas de la aplicación. Ese será el foco de la próxima sección..
3. Navegación de la página
Si ejecuta la aplicación en su forma actual, verá el MainPage.xaml página, el punto de entrada predeterminado para cada aplicación de Windows Phone. Cambiemos esto.
Agregar botones
Para navegar a los controles de Panorama y Pivot que implementamos anteriormente, necesitamos agregar dos controles de Botón a la MainPage.xaml página. Haga doble clic MainPage.xaml en su IDE y arrastre dos controles de botón desde el Caja de instrumento a la página en la vista de diseño de Visual Studio.
Como puedes ver a continuación, también he cambiado el Contenido Propiedades de los controles de botón para leer. Panorama y Pivote.
Implementando los controles de botones
Cuando el uso toca un control Button, queremos que la aplicación navegue hacia Panorama o Pivot. Empecemos primero con el botón izquierdo..
Panorama
Comience haciendo doble clic en el control del botón izquierdo en la vista de diseño. Esto debería llevarte a MainPage.cs, que contiene la clase que está vinculada a MainPage.xaml. Visual Studio ya ha creado un método para nosotros., Button_Click, que se invoca cuando el usuario toca el botón etiquetado Panorama.
Cuando el usuario toca el primer botón, la aplicación debería llevarlos al control Panorama. Esto lo logramos actualizando Button_Click método como se muestra a continuación.
Privado Button_Click vacío (objeto remitente, RoutedEventArgs e) NavigationService.Navigate (new Uri ("/ PanoramaPage1.xaml", UriKind.Relative));
Invocamos el Navegar método en Servicio de navegación, pasando por el destino, un Uri instancia, y el tipo de destino, UriKind.Relativo. Tenga en cuenta que el nombre de la página de destino debe coincidir con la primera página del control Panorama, PanoramaPage1.xaml en el ejemplo anterior. No te olvides de la barra inclinada delantera..
Pivote
La navegación al control de Pivot es muy similar. Abra MainPage.xaml, haga doble clic en el control Button etiquetado Pivote, e implementar el controlador de eventos, Button_Click_1, Como se muestra abajo. La única diferencia es el destino al que navegamos, PivotPage1.xaml.
Private void Button_Click_1 (objeto remitente, RoutedEventArgs e) NavigationService.Navigate (new Uri ("/ PivotPage1.xaml", UriKind.Relative));
Cree y ejecute la aplicación para probar los botones, así como los controles de Panorama y Pivot. Use el botón físico de su dispositivo o emulador para navegar a la página anterior.
Conclusión
En este tutorial, hemos cubierto dos controles de diseño importantes de la plataforma de Windows Phone, los controles Panorama y Pivot. También revisamos la navegación y usamos algunos de los controles comunes en Windows Phone, como los controles Button, TextBox y Rectangle. En el siguiente artículo, concluiremos esta serie introductoria en Windows Phone y veremos lo que sigue para usted..
Share
Accentsconagua
