Inicio rápido: agregar barras de la aplicación
Idioma: HTML | XAML

Inicio rápido: agregar barras de la aplicación (XAML)

[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows Runtime. Si estás desarrollando para Windows 10, consulta la documentación más reciente ]

Usa barras de la aplicación para mostrar navegación, comandos y herramientas que se puedan ocultar cuando no se necesiten. Puedes colocar la barra de la aplicación en la parte superior de la página, en la parte inferior o en ambos lados. De manera predeterminada, las barras de la aplicación están ocultas y se muestran o descartan cuando el usuario hace clic con el botón secundario, presiona la tecla del logotipo de Windows+Z o desliza rápidamente desde el borde superior o inferior de la pantalla. Se pueden mostrar mediante programación cuando el usuario realiza una selección o interactúa con la aplicación.

Observa esta característica en acción como parte de nuestra serie Características de aplicaciones, de principio a fin:  Interfaz de usuario de aplicaciones de la Tienda Windows, de principio a fin

Requisitos previos

Elegir entre AppBar o CommandBar

El marco XAML proporciona los controles CommandBar y AppBar para mostrar la UI que aparece en los bordes superior o inferior de la pantalla deslizando el dedo rápidamente desde el borde. CommandBar tiene más funcionalidad integrada, pero presenta limitaciones en cuanto al tipo de contenido que puedes incluir en él. Con AppBar puedes agregar cualquier contenido de lenguaje XAML, pero tienes que encargarte de administrar el diseño y realizar los cambios de tamaño.

Importante  Los controles CommandBar, AppBarButton, AppBarToggleButton y AppBarSeparator solo están disponibles para las aplicaciones pensadas para Windows 8.1. En las aplicaciones pensadas para Windows 8, deberás usar un control AppBar.
 
  1. Usa CommandBar cuando necesites una barra de la aplicación que contenga únicamente controlesAppBarButton, AppBarToggleButton y AppBarSeparator. El control CommandBar simplifica la creación de barras de la aplicación básicas, ya que proporciona:

    • Diseño automático de comandos con comandos principales a la derecha y comandos secundarios a la izquierda.
    • Cambio automático de tamaño de los comandos de la barra de la aplicación cuando la aplicación cambia de tamaño.
  2. Usa un control AppBar si necesitas contenido más complejo, como imágenes, barras de progreso, un cuadro de búsqueda, bloques de texto o botones con un estilo personalizado. AppBar se puede usar con contenido personalizado para crear una barra de herramientas o UI de navegación. Cuando coloques los comandos en un control AppBar, tendrás que cambiar el tamaño del contenido de AppBar y reorganizarlo de acuerdo al cambio de tamaño de la pantalla. Para obtener más información, consulta Cómo usar una barra de la aplicación en vistas diferentes.

Agregar una barra de la aplicación

  • Para agregar una barra de la aplicación a tu aplicación, asigna un control CommandBar o AppBar a la propiedad TopAppBar o BottomAppBar de un Page.

    Usa la barra de navegación (barra de la aplicación superior) para mostrar la navegación en tu aplicación. Un AppBar se suele usar con botones de navegación con un estilo personalizado. Para obtener más información, consulta Diseño de navegación para aplicaciones de la Tienda Windows.

    Usa la barra de la aplicación inferior para mostrar comandos y herramientas. Para obtener más información, consulta Diseño de comandos para aplicaciones de la Tienda Windows.

    En este ejemplo se indica cómo agregar un control AppBar como barra de la aplicación de la parte superior y un control CommandBar como barra de la aplicación de la parte inferior.

    
    
    <Page.TopAppBar>
        <AppBar>
            <!-- AppBar content -->
        </AppBar>
    </Page.TopAppBar>
    
    <Page.BottomAppBar>
        <CommandBar>
            <!-- CommandBar content -->
        </CommandBar>
    </Page.BottomAppBar>
    
    

En una aplicación de varias páginas, puedes compartir barras de la aplicación con comandos comunes entre las páginas. Para más información, consulta el tema sobre cómo compartir una barra de la aplicación entre páginas.

Agregar contenido a CommandBar

  • Para agregar contenido a una CommandBar, agrega controles AppBarButton, AppBarToggleButton y AppBarSeparator a las colecciones PrimaryCommands y SecondaryCommands de CommandBar. Los controles que agregues directamente a CommandBar en XAML se agregarán de forma automática a la colección PrimaryCommands.

    En este ejemplo se muestra una CommandBar con PrimaryCommands y SecondaryCommands.

    
    <Page.BottomAppBar>
        <CommandBar>
            <AppBarButton Label="Refresh" Icon="Refresh" Click="AppBarButton_Click"/>
            <AppBarButton Label="Help" Icon="Help" Click="AppBarButton_Click"/>
    
            <CommandBar.SecondaryCommands>
                <AppBarButton Label="Edit" Icon="Edit" Click="AppBarButton_Click"/>
                <AppBarButton Label="Remove" Icon="Remove" Click="AppBarButton_Click"/>
                <AppBarButton Label="Add" Icon="Add" Click="AppBarButton_Click"/>
            </CommandBar.SecondaryCommands>
        </CommandBar>
    </Page.BottomAppBar>
    
    

    Control de barra de la aplicación inferior

Agregar contenido a AppBar

  • AppBar solo puede contener un fragmento de contenido secundario, por lo que generalmente se le agrega un panel de diseño al que, a su vez, se pueden agregar más controles.

    En este ejemplo se muestra una AppBar con botones de navegación y un cuadro de búsqueda.

    
    <Page.TopAppBar>
        <AppBar>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <StackPanel Orientation="Horizontal">
                    <Button Content="Home" Width="140" Height="80" Click="AppBarButton_Click"/>
                    <Button Content="Page 1" Width="140" Height="80" Click="AppBarButton_Click"/>
                    <Button Content="Page 2" Width="140" Height="80" Click="AppBarButton_Click"/>
                </StackPanel>
                <SearchBox Grid.Column="1" Width="300" Height="50" HorizontalAlignment="Right"/>
            </Grid>
        </AppBar>
    </Page.TopAppBar>
    
    

    Control de barra de la aplicación inferior

Apertura de una barra de la aplicación mediante programación

De manera predeterminada, las barras de la aplicación aparecen cuando el usuario hace clic con el botón secundario, presiona la tecla del logotipo de Windows+Z o desliza rápidamente desde el borde superior o inferior de la pantalla. Cuando el usuario realiza una de estas acciones, aparecen tanto la barra de la aplicación superior como la inferior, si ambas existen en la página. Puedes abrir una barra de la aplicación mediante programación estableciendo la propiedad IsOpen en true. Al hacerlo, solo se abre la barra de la aplicación específica (superior o inferior) para la que estableciste el valor de la propiedad.

  1. Para abrir la barra de la aplicación inicialmente cuando se carga la página, establece la propiedad IsOpen en true en tu lenguaje XAML.
    
    <Page.BottomAppBar>
        <CommandBar IsOpen="True">
            <AppBarButton Label="Refresh" Icon="Refresh" Click="AppBarButton_Click"/>
            <AppBarButton Label="Help" Icon="Help" Click="AppBarButton_Click"/>
        </CommandBar>
    </Page.BottomAppBar>
    
    
  2. Para abrir la barra de la aplicación mediante programación, establece la propiedad IsOpen en true en el código. Para hacer referencia a la barra de la aplicación en el código, puedes darle un nombre y hacer referencia a él, o bien hacer referencia a la propiedad TopAppBar o BottomAppBar.
    
    private void OpenButton_Click(object sender, RoutedEventArgs e)
    {
        if (this.BottomAppBar != null)
        {
            this.BottomAppBar.IsOpen = true;
        }
    }
    
    

    La barra de la aplicación se suele abrir mediante programación para mostrar comandos contextuales cuando el usuario interactúa con un elemento de la aplicación. Por ejemplo, puede que muestres una barra de la aplicación con comandos de formato cuando el usuario selecciona texto en la aplicación. Cuando muestres comandos contextuales, establece el modo de descarte de la barra de la aplicación en permanente hasta que cambie el contexto para que los comandos permanezcan visibles.

Hacer que la barra de la aplicación sea permanente

De manera predeterminada, las barras de la aplicación se descartan cuando el usuario interactúa con la aplicación en cualquier lugar fuera de ellas. Para que los comandos permanezcan visibles, puedes cambiar el modo de descarte estableciendo la propiedad IsSticky en true. Cuando una barra de la aplicación se encuentra en modo permanente, solo se descarta cuando el usuario hace clic con el botón secundario, presiona la tecla del logotipo de Windows+Z o desliza rápidamente desde el borde superior o inferior de la pantalla.

  1. Para que tu barra de la aplicación permanezca visible cuando el usuario interactúe con la aplicación, establece la propiedad IsSticky en true en tu lenguaje XAML.
    
    <Page.TopAppBar>
        <AppBar IsSticky="True">
            <StackPanel Orientation="Horizontal">
                <Button Content="Home" Width="140" Height="80" Click="AppBarButton_Click"/>
                <Button Content="Page 1" Width="140" Height="80" Click="AppBarButton_Click"/>
                <Button Content="Page 2" Width="140" Height="80" Click="AppBarButton_Click"/>
            </StackPanel>
        </AppBar>
    </Page.TopAppBar>
    
    
  2. Para cambiar el modo de descarte de la barra de la aplicación mediante programación, establece la propiedad IsSticky en true en el código. Para hacer referencia a la barra de la aplicación en el código, puedes darle un nombre y hacer referencia a él, o bien hacer referencia a la propiedad TopAppBar o BottomAppBar.
    
    private void OpenButton_Click(object sender, RoutedEventArgs e)
    {
        if (this.TopAppBar != null)
        {
            this.TopAppBar.IsSticky = true;
        }
    }
    
    

Resumen y siguientes pasos

En este tema de inicio rápido has aprendido a agregar una barra de la aplicación a tu aplicación de la Tienda Windows con C++, C# o Visual Basic.

Para ofrecer una experiencia coherente a los usuarios, consulta las Directrices para barras de la aplicación.

Para más información sobre los controles AppBarButton, consulta Inicio rápido: Agregar botones de la barra de la aplicación.

Temas relacionados

Muestra de control AppBar XAML
Inicio rápido: Agregar botones de la barra de la aplicación
Diseño de comandos para aplicaciones de la Tienda Windows
AppBar
Escenarios de características de muestra de Reversi: barra de la aplicación

 

 

Mostrar:
© 2017 Microsoft