Multiples Application Bars

Buenos dias/tardes/noches tengan ustedes =).

Y….. debido a un sin numero de cosas que pasaron en estos meses me vi imposibilitado a subir posts, pero ya estamos de vuelta y con las pilas recargadas. Asi que hoy subo un post dirigido a los que estamos aprendiendo a realizar aplicaciones bajo la plataforma Windows Phone.

¿El tema de hoy?

Como tener multiples Application Bars en un control pivot.

Toco este tema porque busque en internet maneras de tener multiples Application Bars en mi aplicación, y encontré respuestas que me daban una nocion de como tener distintos Application Bars en distintas paginas y ese no era mi caso ya que dentro de un control Pivot, sus paginas (Pivot Pages) son consideradas un solo control.

Como veremos a continuación es muy sencillo lo que haremos, comenzemos con la creación de nuestro Pivot Control en nuestra pagina XAML:

<phone:PhoneApplicationPage

<!--Los demas nameSpaces por default aca -->   

    xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls">

    <Grid x:Name="LayoutRoot" Background="Transparent">

        <controls:Pivot Title="Multiples Barras"

                        Width="450" Height="750" FontSize="16" SelectionChanged="Pivot_SelectionChanged_1">

            <controls:PivotItem Header="Uno" >

                <Grid></Grid>

            </controls:PivotItem>

            <controls:PivotItem Header="Dos">

                <Grid></Grid>

            </controls:PivotItem>

            <controls:PivotItem Header="Tres">

                <Grid></Grid>

            </controls:PivotItem>

        </controls:Pivot>

    </Grid>

</phone:PhoneApplicationPage>

Como pueden ver, no introduci algún elemento dentro de mis PivotPages ya que para nuestro ejemplo, el contenido es irrelevante. Sin embargo ustedes pueden desplegar algún contenido.

public MainPage()

        {

            InitializeComponent();

            ApplicationBar = AppBarUno;

            ApplicationBar.IsVisible = true;

            ApplicationBar.IsMenuEnabled = true;

            #region AppBar Uno

            ApplicationBarIconButton btnCodeIt = new ApplicationBarIconButton(new Uri("/Images/CodeIt.png", UriKind.Relative));

            ApplicationBarIconButton btnUncodeIt = new ApplicationBarIconButton(new Uri("/Images/UncodeIt.png", UriKind.Relative));

            ApplicationBarIconButton btnShareIt = new ApplicationBarIconButton(new Uri("/Images/Share.png", UriKind.Relative));

            ApplicationBarIconButton btnSmsIt = new ApplicationBarIconButton(new Uri("/Images/Sms.png", UriKind.Relative));

            btnCodeIt.Text = "Code";

            btnUncodeIt.Text = "Uncode";

            btnShareIt.Text = "Mail";

            btnSmsIt.Text = "Sms";

            AppBarUno.Buttons.Add(btnCodeIt);

            AppBarUno.Buttons.Add(btnUncodeIt);

            AppBarUno.Buttons.Add(btnShareIt);

            AppBarUno.Buttons.Add(btnSmsIt);

            btnCodeIt.Click += new EventHandler(btnPrimerPivot);

            btnUncodeIt.Click += new EventHandler(btnPrimerPivot);

            btnShareIt.Click += new EventHandler(btnPrimerPivot);

            btnSmsIt.Click += new EventHandler(btnPrimerPivot);

            ApplicationBarMenuItem MenuPivotUno = new ApplicationBarMenuItem("Opcion primer pivot");

            AppBarUno.MenuItems.Add(MenuPivotUno);

            MenuPivotUno.Click+=new EventHandler(btnPrimerPivot);

            #endregion

        /*El codigo para los otros dos aplication Bars es similar

         y esta en la solucion lista para descargar mas abajo*/

}

          void btnPrimerPivot(object sender, EventArgs e)

        {

            MessageBox.Show("Application Bar del primer Pivot");

        }

La parte importante de este ejemplo esta a continuación, en el siguiente método que se ejecuta en el evento de cambio de PivotPage:

        <controls:Pivot Title="Multiples Barras"

                        Width="450" Height="750" FontSize="16" SelectionChanged="Pivot_SelectionChanged_1">

¿Recuerdan que en nuestro Pivot teniamos el evento “Pivot_SelectionChanged_1”? Es hora de escribir el código para ese evento:

public void Pivot_SelectionChanged_1(object sender, SelectionChangedEventArgs e)

        {

            switch (((Pivot)sender).SelectedIndex)

            {

                case 0:

                    ApplicationBar = AppBarUno;

                    break;

                case 1:

                    ApplicationBar = AppBarDos;

                    break;

                case 2:

                    ApplicationBar = AppBarTres;

                    break;

            }

        }

Este código le indica a nuestro Pivot que cuando se encuentre en la primera pagina, recurra al Application Bar numero uno, cuando este en la segunda pagina al AppBar numero dos y finalmente cuando este en la tercera pagina al AppBar numero tres.

Ademas que los Application Bars cambian de uno a otro en una manera elegante y rápida sin necesidad de que escribamos mas líneas de código.

El código fuente de este ejemplo lo pueden descargar aquí.

Creo que eso es todo por hoy, espero que este ejemplo les sirva y si tienen alguna pregunta, pues no duden en mandármela a jorgecupi@hotmail.com.

Saludos a todos/as y que tengan buen fin de semana =)