Cargo actual:Index > Trabajar con la barra de aplicaciones: Windows Phone Tutorial Desarrollo - Parte 22

Trabajar con la barra de aplicaciones: Windows Phone Tutorial Desarrollo - Parte 22

Actualizado:10-11Fuente: consolidación de la red
Advertisement

En la última parte de nuestro Windows Phone 7.5 Mango App serie de desarrollo, vimos cómo navegar entre las páginas XAML mientras que en este tutorial vamos a echar un vistazo a la barra de aplicaciones.

La barra de la aplicación es similar a un menú. Cuenta con iconos en la parte superior que acaba de asomarse sobre el fondo y un botón de puntos suspensivos que cuando se hace clic muestra una serie de opciones de menú textual. Podemos utilizar estas opciones para realizar alguna operación en la página actual XAML o navegar por el usuario a una nueva área de nuestra aplicación. Lo bueno de la barra de aplicaciones es que se mantiene mayormente oculto y no interfiere con la interfaz de usuario de base de la aplicación.

Vamos a seguir adelante y trabajar con un ejemplo vivo.

Crear un nuevo proyecto de Windows Phone 7.5 con un nombre único; algo así como "ApplicationBarDemo". A continuación haga clic en el nombre del proyecto en la ventana Explorador de soluciones y seleccione Agregar en el menú. Seleccione Nueva carpeta en el menú secundario y el nombre de la nueva carpeta creada como "Iconos". La carpeta Iconos almacenará iconos que se mostrarán en la barra de aplicaciones. Ahora vaya a "C: \ Archivos de programa \ Microsoft SDKs \ Windows Phone \ v7.0 \ Icons \ oscura" y arrastrar y soltar los iconos (plus y signo menos) en la carpeta de los iconos de su proyecto de modo que ahora se convierten en una parte de su proyecto. Cambie la propiedad Acción de generación de cada uno de los iconos de recursos directamente al contenido.

Trabajar con la barra de aplicaciones: Windows Phone Tutorial Desarrollo - Parte 22

Visual Studio nos proporciona un marco básico de la barra de la aplicación en el código XAML para cada página. Vaya a la parte inferior del código XAML en la ventana de diseño para localizar el código de barra de aplicaciones. Editar el código XAML para que se parece al siguiente

<ApplicationBar>

<Shell: ApplicationBar IsVisible = "True" IsMenuEnabled = "true">

ApplicationBarIconButton IconUri = "/ Imágenes / appbar.minus.rest.png" Text = "Eliminar" Click = "ApplicationBarIconButton_Click" />

ApplicationBarIconButton IconUri = "/ Imágenes / appbar.new.rest.png" Text = "Añadir" Click = "ApplicationBarIconButton_Click_1" />

ApplicationBarIconButton IconUri = "/ Imágenes / appbar.minus.rest.png" Text = "Eliminar" Click = "ApplicationBarIconButton_Click" />

ApplicationBarIconButton IconUri = "/ Imágenes / appbar.new.rest.png" Text = "Añadir" Click = "ApplicationBarIconButton_Click_1" />

<Shell: ApplicationBar.MenuItems>

ApplicationBarMenuItem Text = "Menú 1" Click = "ApplicationBarMenuItem_Click" />

ApplicationBarMenuItem Text = "Menú 2" Click = "ApplicationBarMenuItem_Click_1" />

ApplicationBarMenuItem Text = "Menú 3" Click = "ApplicationBarMenuItem_Click" />

ApplicationBarMenuItem Text = "Menú 4" Click = "ApplicationBarMenuItem_Click_1" />

ApplicationBarMenuItem Text = "Menú 5" Click = "ApplicationBarMenuItem_Click" />

ApplicationBarMenuItem Text = "Menú 6" Click = "ApplicationBarMenuItem_Click_1" />

ApplicationBarMenuItem Text = "Menú 7" Click = "ApplicationBarMenuItem_Click" />

ApplicationBarMenuItem Text = "Menú 8" Click = "ApplicationBarMenuItem_Click_1" />

ApplicationBarMenuItem Text = "Menú 9" Click = "ApplicationBarMenuItem_Click" />

ApplicationBarMenuItem Text = "Menú 10" Click = "ApplicationBarMenuItem_Click_1" />

ApplicationBarMenuItem Text = "Menú 11" Click = "ApplicationBarMenuItem_Click" />

ApplicationBarMenuItem Text = "Menú 12" Click = "ApplicationBarMenuItem_Click_1" />

</shell:ApplicationBar.MenuItems>

</ Shell: ApplicationBar>

</phone:PhoneApplicationPage.ApplicationBar>

La barra de la aplicación puede contener cuatro botones del icono en el máximo y un número ilimitado de menú textual artículos.

Vamos a echar un vistazo al código XAML para el código de iconos de la barra de aplicaciones

ApplicationBarIconButton IconUri = "/ Imágenes / appbar.minus.rest.png" Text = "Eliminar" Click = "ApplicationBarIconButton_Click" />

Cada botón icono de la barra de la aplicación contiene una serie de propiedades. La propiedad IconUri se utiliza para establecer uri para el icono. La propiedad de texto establece el texto en miniatura que se muestra debajo del icono. El evento click nos ayuda a definir la funcionalidad que se ejecuta cuando se hace clic en el icono.

Del mismo modo la Aplicación Bar elemento de menú contiene una serie de propiedades y eventos. No vamos a entrar en eso detalla como este tutorial es para principiantes, usted puede encontrar más información al respecto en el sitio web de MSDN. Ahora vamos a ver cómo utilizar lienzo como un diálogo.