El app bar - Modern UI

El app bar es una barra donde podemos colocar comandos, botones de navegación, y herramientas de usuario, la podemos ubicar en la parte superior de la aplicación o la inferior, esta oculta por defecto por lo que debemos mostrarla con el gesto adecuado o con combinación de teclas Windows + Z, con un clic izquierdo.

Agregar un app bar a un aplicación Windows 8

Este código agrega un app bar en la parte inferior de la ventana, para que se vea correctamente debemos habilitar los estilos que usaremos los cuales se encuentran comentados en Common\StandardStyles.xaml solo debemos moverlos fuera del área comentada.

Tip: al presionar ctrl + f nos aparecerá un cuadro de búsqueda donde podemos escribir el nombre del estilo y lo encontraremos rápidamente.

Al ejecutar la aplicación y presionar clic derecho aparecerá el app bar, del mismo modo podemos ocultarlo.

También podemos abrir el app bar desde programación estableciendo la propiedad IsOpen a true, por ejemplo podemos agregar un botón a la ventana y en el evento clic del botón abrir el app bar el código seria cómo sigue:

private void AbrirAppBar(object sender, RoutedEventArgs e)

{

    bottomAppBar.IsOpen = true;

}

Al interactuar con los controles de la ventana nuestro app bar se oculta automáticamente si queremos que esto ocurra podemos establecer la propiedad del bottomAppBar.IsSticky en true de este modo solo se ocultara al presionar clic derecho.

Podemos saber cuándo un app bar se abre o se cierra con los eventos Opened y Closed respectivamente.

Agregar un menú a un comando del app bar

Primero vamos a manejar el evento clic del botón al que agregaremos el menú, usaremos el botón editar.

private void ClickEditButton(object sender, RoutedEventArgs e)

{

    //Opciones con las que cuenta el menu

    Button btn1 = new Button()

    {

        Content = "Opcion 1",

        Margin = new Thickness(20, 5, 20, 5),

        Style = (Style)App.Current.Resources["TextButtonStyle"]

    };

    Button btn2 = new Button()

    {

        Content = "Opcion 1",

        Margin = new Thickness(20, 5, 20, 5),

        Style = (Style)App.Current.Resources["TextButtonStyle"]

    };

    //Panel que contiene todas las opciones del menu

    StackPanel panel = new StackPanel() { Height = 60, Width = 180 };

    panel.Background = bottomAppBar.Background;

    panel.Children.Add(btn1);

    panel.Children.Add(btn2);

    //Agregar el panel al popup

    Popup menu = new Popup() { Child = panel };

    menu.HorizontalOffset = 4;

    menu.VerticalOffset = Window.Current.CoreWindow.Bounds.Bottom - bottomAppBar.ActualHeight - panel.Height - 4;

    //Ocultarlo automaticamente

    menu.IsLightDismissEnabled = true;

    //mostrar el popup

    menu.IsOpen = true;

}