Como compartilhar uma barra de aplicativos em páginas (XAML)

Applies to Windows and Windows Phone

Cada Page em um aplicativo da Windows Store em C++, C# ou Visual Basic pode ter um AppBar atribuído a suas propriedades TopAppBar e BottomAppBar. Mas você pode querer usar o mesmo controle AppBar em páginas relacionadas em seu aplicativo para fornecer navegação ou comandos comuns. Por exemplo, você pode fornecer uma barra de navegação no topo de seu aplicativo que permite que o usuário navegue entre as páginas. Você quer mostrar a mesma barra de navegação em cada página, em vez de recriá-la em cada página. Vamos ver como você pode compartilhar uma AppBar em páginas.

Este tutorial tem por base a navegação simples do , o tópico do início ao fim e a amostra de navegação simples do associada. Veja a amostra de navegação simples do para obter o código completo.

Mapa: como este tópico está relacionado aos outros? Veja:

O que você precisa saber

Tecnologias

Pré-requisitos

Instruções

Adicione uma barra aplicativos compartilhada a uma página

Use uma página raiz para hospedar a AppBar compartilhada e uma Frame. O Frame hospeda os controles Page que mostram o conteúdo do aplicativo.

Aqui, você atribui um controle AppBar com comandos de navegação à propriedade TopAppBar da página raiz. Você adiciona um Frame para hospedar as páginas do aplicativo nas quais o usuário navega.

JJ150604.wedge(pt-br,WIN.10).gifPara adicionar a barra de aplicativos e estrutura à página raiz

  1. Adicione uma página para hospedar o AppBar e o Frame para navegação. Aqui, você usa o padrão MainPage.xaml.

    Veja MainPage.xaml no código completo no final deste tutorial.

  2. Adicione um AppBar com comandos de navegação para a propriedade do  Page TopAppBar .
    
    <Page.TopAppBar>
        <AppBar x:Name="topAppBar" Background="#00b2f0">
            <AppBar.Resources>
                <Style TargetType="Button">
                    <Setter Property="Width" Value="140"/>
                    <Setter Property="Height" Value="60"/>
                    <Setter Property="Margin" Value="5"/>
                </Style>
            </AppBar.Resources>
            <StackPanel Orientation="Horizontal">
                <Button Content="Home" x:Uid="appbarHome" 
                        Click="NavButton_Click" Tag="FlatNavTemplate.Pages.HomePage"/>
                <Button Content="Page 2" x:Uid="appbarPage2" 
                        Click="NavButton_Click" Tag="FlatNavTemplate.Pages.Page2"/>
                <!-- Add more buttons here as needed for new pages. -->
                <!-- Assign the fully qualified page name to the button's Tag property. -->
    
            </StackPanel>
        </AppBar>
    </Page.TopAppBar>
    
    
    
  3. Na página de código (MainPage.xaml.cs/vb), adicione códigos para navegar entre as páginas.

    Aqui, você usa a propriedade Tag de cada botão de navegação para especificar o nome da página para a qual navegar.

    
    private void NavButton_Click(object sender, RoutedEventArgs e)
    {
        Button b = sender as Button;
                
        if (b != null && b.Tag != null)
        {
            Type pageType = Type.GetType(b.Tag.ToString());
    
            // Make sure the page type exists, but don't navigate to it if it's already the current page.
            if (pageType != null && rootFrame.CurrentSourcePageType != pageType)
            {
                (App.Current as App).Navigate(pageType);
            }
        }   
    }
    
    
  4. Adicione um CommandBar à propriedade BottomAppBar de Page.

    Aqui, o botão Ajuda no CommandBar é compartilhado entre todas as páginas. Você pode adicionar comandos em uma página específica quando o usuário navega para essa página, e pode removê-los quando o usuário navega para fora dela. Veja Como adicionar comandos contextuais a uma barra de aplicativos para obter mais informações.

    Você pode ver o botão Ajuda do manipulador de eventos Click no código completo no final deste tutorial. Veja Guia de início rápido: adicionar ajuda do aplicativo para obter mais informações.

    Windows 8.1:  Os controles CommandBar e AppBarButton estão disponíveis somente no Windows 8.1. Para Windows 8, use AppBar e Button.

    
    <Page.BottomAppBar>
        <CommandBar x:Name="bottomAppBar" Background="#00b2f0">
            <AppBarButton Icon="Help" Label="Help" Click="HelpButton_Click"/>
        </CommandBar>
    </Page.BottomAppBar>
    
    
    
  5. Adicione uma Frame na página raiz para hospedar as páginas do aplicativo.
    
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Frame x:Name="rootFrame"/>
    </Grid>
    
    
    
  6. Adicione páginas de aplicativos entre as quais o usuário pode navegar.

    Veja HomePage.xaml e Page2.xaml no código completo no fim deste tutorial.

Comentários

Baixe a amostra de Navegação simples para ver esse código em ação.

Exemplo completo

MainPage


<Page
    x:Class="FlatNavTemplate.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:FlatNavTemplate"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.TopAppBar>
        <AppBar x:Name="topAppBar" Background="#00b2f0">
            <AppBar.Resources>
                <Style TargetType="Button">
                    <Setter Property="Width" Value="140"/>
                    <Setter Property="Height" Value="60"/>
                    <Setter Property="Margin" Value="5"/>
                </Style>
            </AppBar.Resources>
             <!--The StacklPanel doesn't resize nicely if the window gets narrow, so this way can be problamatic if there are too many pages.-->
            <StackPanel Orientation="Horizontal">
                <Button x:Uid="appbarHome" Click="NavButton_Click" Tag="FlatNavTemplate.Pages.HomePage"/>
                <Button x:Uid="appbarPage2" Click="NavButton_Click" Tag="FlatNavTemplate.Pages.Page2"/>
                <!-- Add more buttons here as needed for new pages. -->
                <!-- Assign the fully qualified page name to the button's Tag property. -->
            </StackPanel>
        </AppBar>
    </Page.TopAppBar>

    <Page.BottomAppBar>
        <CommandBar x:Name="bottomAppBar" Background="#00b2f0">
            <AppBarButton Icon="Help" Label="Help" Click="HelpButton_Click"/>
        </CommandBar>
    </Page.BottomAppBar>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Frame x:Name="rootFrame"/>
    </Grid>
</Page>


using System;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace FlatNavTemplate
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        private void NavButton_Click(object sender, RoutedEventArgs e)
        {
            Button b = sender as Button;
            
            if (b != null && b.Tag != null)
            {
                Type pageType = Type.GetType(b.Tag.ToString());

                // Make sure the page type exists, but don't navigate to it if it's already the current page.
                if (pageType != null && rootFrame.CurrentSourcePageType != pageType)
                {
                    (App.Current as App).Navigate(pageType);
                }
            }   
        }

        private void HelpButton_Click(object sender, RoutedEventArgs e)
        {
            Settings.HelpSettings helpSettingsFlyout = new Settings.HelpSettings();
            // When the settings flyout is opened from the app bar instead of from
            // the setting charm, use the ShowIndependent() method.
            helpSettingsFlyout.ShowIndependent();
            topAppBar.IsOpen = false;
            bottomAppBar.IsOpen = false;
        }
    }
}


HomePage


<Page
    x:Name="pageRoot"
    x:Class="FlatNavTemplate.Pages.HomePage"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:FlatNavTemplate.Pages"
    xmlns:common="using:FlatNavTemplate.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.Resources>
        <!-- TODO: Delete this line if the key AppName is declared in App.xaml -->
        <x:String x:Key="AppName">My Application</x:String>
    </Page.Resources>

    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.ChildrenTransitions>
            <TransitionCollection>
                <EntranceThemeTransition/>
            </TransitionCollection>
        </Grid.ChildrenTransitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- Back button and page title -->
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="120"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Image x:Name="logoimage" HorizontalAlignment="Center" Height="100" 
                   VerticalAlignment="Center" Width="100" 
                   Source="ms-appx:///Assets/square70logo.png" IsHitTestVisible="False"/>
            <TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" 
                       Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" 
                       IsHitTestVisible="false" TextWrapping="NoWrap" 
                       VerticalAlignment="Bottom" Margin="0,0,30,40"/>
        </Grid>
    </Grid>
</Page>

Page2


<Page
    x:Name="pageRoot"
    x:Class="FlatNavTemplate.Pages.Page2"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:FlatNavTemplate.Pages"
    xmlns:common="using:FlatNavTemplate.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.Resources>
        <!-- TODO: Delete this line if the key AppName is declared in App.xaml -->
        <x:String x:Key="AppName">My Application Page 2</x:String>
    </Page.Resources>

    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.ChildrenTransitions>
            <TransitionCollection>
                <EntranceThemeTransition/>
            </TransitionCollection>
        </Grid.ChildrenTransitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- Back button and page title -->
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="120"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Image x:Name="logoimage" HorizontalAlignment="Center" Height="100" 
                   VerticalAlignment="Center" Width="100" 
                   Source="ms-appx:///Assets/square70logo.png" IsHitTestVisible="False"/>
            <TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" 
                       Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" 
                       IsHitTestVisible="false" TextWrapping="NoWrap" 
                       VerticalAlignment="Bottom" Margin="0,0,30,40"/>
        </Grid>
    </Grid>
</Page>

Tópicos relacionados

Amostra de navegação simples
Amostra de controle AppBar em XAML
Guia de início rápido: adicionando barras de aplicativo
Guia de início rápido: navegando entre as páginas
Navegação simples, do início ao fim (XAML)
Design de navegação para aplicativos da Windows Store
Design de comandos para aplicativos da Windows Store

 

 

Mostrar:
© 2014 Microsoft