Generation App – Día 6 – Agregar una barra de aplicación a tu aplicación

La barra de aplicación es una fila de botones-icono a lo largo de la parte inferior de la pantalla, que provee al usuario un acceso directo a las tareas más comunes de la aplicación. Si es el caso de una aplicación de tomar notas, es elemental tener un botón para crear una nota nueva, editar alguna nota existente, e incluso eliminar alguna que ya no le sea de utilizar al usuario; o en el caso de un correo electrónico, con las tareas más simples de redactar un correo nuevo, seleccionar correos, buscar y refrescar el buzón de entrada.

En la imagen pueden ver un dato curioso. En algunos casos, es posible que no entendamos el significado de alguno de los botones en la barra de herramientas. Para conocer mejor estos botones, e incluso encontrar más opciones de funciones, podemos darle Tap a los ‘…’ en la parte derecha de la barra, y automáticamente se expandirá la barra, mostrando las etiquetas de cada botón, y un pequeño menú con opciones adicionales.

Crear una barra de aplicación en XAML

Las plantillas de paginas creadas por el SDK de Windows Phone contiene el código XAML para un ejemplo de la barra de aplicación comentado. Descomenta el XAML para habilitar la barra de aplicación. Esta metodología asume que tienes una aplicación Windows Phone que tiene una pagina. Antes que puedas usar imágenes para los iconos en la barra, debes primero agregarlas a tu aplicación.

Para crear la barra de aplicación usando XAML

  1. Abre tu pagina en el diseñador para ver el XAML

  2. Localiza el fragmento de código de ejemplo comentado de la barra de aplicación, el cual es agregado por defecto cuando agregas una pagina al proyecto. Se ve algo como:

    <!--Sample code showing usage of ApplicationBar-->
    <!--<phone:PhoneApplicationPage.ApplicationBar>
        …
    </phone:PhoneApplicationPage.ApplicationBar>-->

    Si tu pagina es de tipo Panorama Page, no se muestra el fragmento de código de ejemplo. Agrega tu barra de aplicación antes de la ultima línea de XAML. Se ve algo similar a:

    </phone:PhoneApplicationPage>
  3. Descomenta o agrega el siguiente código en XAML:

    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
                <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>
  4. Establece las propiedades de la barra como lo desees. Para mayor información de las propiedades, puedes dirigirte a este sitio web.

  5. Remueve o agrega los iconos de los botones requeridos, y colócalos en los botones de la barra, al igual que sus textos correspondientes.

  6. Los ítems de menú son opcionales. Remueve o agrega tantos ítems como desees y establece los textos pertinentes.

  7. El siguiente XAML es un ejemplo de una barra de aplicación con dos botones iconos y dos ítems de menú. El manejo de eventos se explica a continuación.

    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar Mode="Default" Opacity="1.0" IsMenuEnabled="True" IsVisible="True">
    
            <shell:ApplicationBarIconButton IconUri="/Images/save.png" Text="save"/>
            <shell:ApplicationBarIconButton IconUri="/Images/settings.png" Text="settings"/>
    
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="menu item 1" />
                <shell:ApplicationBarMenuItem Text="menu item 2" />
            </shell:ApplicationBar.MenuItems>
    
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>

Manejando eventos clic

Los botones iconos e ítems de menú exponen eventos clic que puedes manejar en tu código C#. Esto se logra de la siguiente manera:

  1. Abre una pagina con el diseñador de XAML mostrando el código.

  2. Para cada botón icono e ítems de menú, identifica los eventos a llamar cuando el usuario realiza un clic. El siguiente código es un ejemplo de una barra de aplicación mostrada a priori, pero ahora muestra los manejadores de eventos identificados:

    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar Mode="Default" Opacity="1.0" IsMenuEnabled="True" IsVisible="True">
    
            <shell:ApplicationBarIconButton Click="Save_Click" IconUri="/Images/save.png" Text="save" />
            <shell:ApplicationBarIconButton Click="Settings_Click" IconUri="/Images/settings.png" Text="settings" />
    
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Click="MenuItem1_Click" Text="menu item 1" />
                <shell:ApplicationBarMenuItem Click="MenuItem2_Click" Text="menu item 2" />
            </shell:ApplicationBar.MenuItems>
    
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>
  3. Abre el código C# de la pagina relacionada.

  4. Para cada botón icono y ítems de menú, agrega el evento a llamar cuando el usuario realiza un clic. Agrega el código dentro de la clase de la pagina. El siguiente código de ejemplo muestra los manejadores de eventos de la barra de aplicación mostrada en XAML.

    private void Save_Click(object sender, EventArgs e)
    {
        MessageBox.Show("Save button works!");
        //Do work for your application here.
    }
    
    private void Settings_Click(object sender, EventArgs e)
    {
        MessageBox.Show("Settings button works!");
        //Do work for your application here.
    }
    
    private void MenuItem1_Click(object sender, EventArgs e)
    {
        MessageBox.Show("Menu item 1 works!");
        //Do work for your application here.
    }
    
    private void MenuItem2_Click(object sender, EventArgs e)
    {
        MessageBox.Show("Menu item 2 works!");
        //Do work for your application here.
    }

Crear una barra de aplicación en C#

La siguiente metodología describe la forma para desplegar una barra de aplicación de manera programada en C#.

Para crear la barra de aplicación usando XAML

  1. Abre la sección de código C# de una pagina en el editor de Visual Studio.

  2. En el tope del código, agrega la siguiente directiva.

    using Microsoft.Phone.Shell;
  3. En el constructor de la pagina, después de la invocación al métodoInitializeComponent, agrega el siguiente código. Este código inicializa un nuevo objeto tipo ApplicationBary lo asigna a la propiedad de la pagina.

    ApplicationBar = new ApplicationBar();
  4. Establece las propiedades de la barra de aplicación a tus necesidades. A continuación, un conjunto de propiedades establecidas como ejemplo:

    ApplicationBar.Mode = ApplicationBarMode.Default;
    ApplicationBar.Opacity = 1.0; 
    ApplicationBar.IsVisible = true;
    ApplicationBar.IsMenuEnabled = true;
  5. Crea un o mas botones iconos instanciando objetos de tipoApplicationBarIconButton. Establece las imágenes icono y el texto correspondiente, y finalmente agrégalo a la barra de aplicación. Si no le asignas un texto al botón icono, se disparara una excepción en tiempo de ejecución.

    ApplicationBarIconButton button1 = new ApplicationBarIconButton();
    button1.IconUri = new Uri("/Images/YourImage.png", UriKind.Relative);
    button1.Text = "button 1";
    ApplicationBar.Buttons.Add(button1);
  6. Los ítems de menú son opcionales. Si deseas agregar algunos, deberás instanciar objetos de tipo ApplicationBarMenuItem, establecer los textos de cada uno, y finalmente agregarlos a la barra de aplicación.

    ApplicationBarMenuItem menuItem1 = new ApplicationBarMenuItem();
    menuItem1.Text = "menu item 1";
    ApplicationBar.MenuItems.Add(menuItem1);
  7. El siguiente ejemplo te muestra una barra de aplicación completa. Los manejadores de eventos se explicaran a continuación.

    public MainPage()
    {
        InitializeComponent();
    
        ApplicationBar = new ApplicationBar();
    
        ApplicationBar.Mode = ApplicationBarMode.Default;
        ApplicationBar.Opacity = 1.0; 
        ApplicationBar.IsVisible = true;
        ApplicationBar.IsMenuEnabled = true;
    
        ApplicationBarIconButton button1 = new ApplicationBarIconButton();
        button1.IconUri = new Uri("/Images/YourImage.png", UriKind.Relative);
        button1.Text = "button 1";
        ApplicationBar.Buttons.Add(button1);
    
        ApplicationBarMenuItem menuItem1 = new ApplicationBarMenuItem();
        menuItem1.Text = "menu item 1";
        ApplicationBar.MenuItems.Add(menuItem1);
    }

Manejando eventos clic

Los botones iconos e ítems de menú exponen eventos clic que puedes manejar en tu código C#. Esto se logra de la siguiente manera:

  1. Abre la sección de código C# asociado a una pagina.

  2. Para cada botón icono e ítems de menú, identifica los eventos a llamar cuando el usuario realiza un clic. El siguiente código es un ejemplo de una barra de aplicación mostrada a priori, pero ahora muestra los manejadores de eventos identificados:

    ApplicationBarIconButton button1 = new ApplicationBarIconButton();
    button1.IconUri = new Uri("/Images/YourImage.png", UriKind.Relative);
    button1.Text = "button 1";
    ApplicationBar.Buttons.Add(button1);
    button1.Click += new EventHandler(button1_Click);
    
    ApplicationBarMenuItem menuItem1 = new ApplicationBarMenuItem();
    menuItem1.Text = "menu item 1";
    ApplicationBar.MenuItems.Add(menuItem1);
    menuItem1.Click += new EventHandler(menuItem1_Click);
  3. Para cada botón icono y ítems de menú, agrega el evento a llamar cuando el usuario realiza un clic. Agrega el código dentro de la clase de la pagina. El siguiente código de ejemplo muestra los manejadores de eventos de la barra de aplicación mostrada en XAML.

    private void button1_Click(object sender, EventArgs e)
    {
        MessageBox.Show("Button 1 works!");
        //Do work for your application here.
    }
    
    private void menuItem1_Click(object sender, EventArgs e)
    {
        MessageBox.Show("Menu item 1 works!");
        //Do work for your application here.
    }

Recuerda que el conjunto de iconos de la barra de herramientas están en nuestra disposición dentro de la carpeta de donde instalamos el SDK de Windows Phone (en mi caso, se encuentra en la siguiente ruta: “C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.1\Icons”), incluso dependiendo si estas utilizando el tema Light o Dark del sistema operativo.

Autor: Jorge Ramirez
Publicación original –> http://j.mp/ShSTlZ
Fuente 1 –> http://j.mp/UTCvq3
Fuente 2 –> http://j.mp/UyeTVl

Anuncios

1 comentario

Archivado bajo Windows Phone

Una respuesta a “Generation App – Día 6 – Agregar una barra de aplicación a tu aplicación

  1. Pingback: Con Generation App nunca fue tan fácil desarrollar para Windows Phone « El Blog de MSP para Latinoamerica [BETA]

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s