Idioma: HTML | XAML

Guia de início rápido: navegando entre as páginas (aplicativos do Tempo de Execução do Windows em C#/VB/C++ e XAML)

Applies to Windows and Windows Phone

Este tópico abrange conceitos básicos de navegação e demonstra como criar um aplicativo que navega entre duas páginas.

Para ajudá-lo a escolher qual o melhor padrão de navegador para o seu aplicativo, veja Padrões de navegação.

Veja os padrões de Navegação simples e Navegação hierárquica em ação como parte da nossa série Recursos do aplicativo, do começo ao fim.

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

Você pode criar várias páginas no seu aplicativo e dar suporte à navegação do usuário entre as páginas do aplicativo, algo semelhante a navegar pelas páginas de um único site. O Microsoft Visual Studio tem modelos de página que dão suporte de navegação básica para aplicativos do Tempo de Execução do Windows em C# ou Microsoft Visual Basic. Neste tópico, usamos os modelos de página para criar um aplicativo simples com suporte para navegação.

Observação  

Quando falamos de navegação para aplicativos do Tempo de Execução do Windows, estamos nos referindo à navegação entre as páginas de um aplicativo, e não à navegação entre aplicativos.

Pré-requisitos

Este tópico supõe que você é capaz de criar um aplicativo básico do Tempo de Execução do Windows em C# ou Visual Basic. Para obter instruções sobre como criar o seu primeiro aplicativo do Tempo de Execução do Windows, veja Criar seu primeiro aplicativo do Tempo de Execução do Windows em C# ou Visual Basic.

Criando o aplicativo de navegação

Hh771188.wedge(pt-br,WIN.10).gifCriando o aplicativo em branco

  1. No menu Visual Studio, selecione Arquivo > Novo Projeto.
  2. No painel esquerdo da caixa de diálogo Novo Projeto, selecione o nó Visual C#, Visual Basic ou Visual C++.
  3. No painel central, selecione Aplicativo em Branco.
  4. Na caixa Nome, digite AplicativoBranco e selecione o botão OK.

    A solução é criada e os arquivos de projeto aparecem no Gerenciador de Soluções. Para obter mais informações sobre os arquivos de projeto, veja Modelos de projeto C#, VB e C++ para aplicativos do Tempo de Execução do Windows.

    Importante  Quando você executa o Visual Studio pela primeira vez, ele pede para você obter uma licença de desenvolvedor. Para saber mais, veja Obter uma licença de desenvolvedor.

  5. Para executar o programa, no menu Visual Studio, selecione Depurar > Iniciar Depuração ou pressione F5.

    Uma página em branco é exibida.

  6. Pressione Shift+F5 para parar a depuração e voltar ao Visual Studio.

Em seguida, adicione duas páginas ao projeto. Elas funcionam como as páginas em que navegamos. Execute as seguintes etapas duas vezes para adicionar duas páginas.

Hh771188.wedge(pt-br,WIN.10).gifAdicionando a página básica

  1. No Gerenciador de Soluções, abre o menu de atalho do nó do projeto AplicativoBranco e selecione Adicionar > Novo Item.
  2. Na caixa de diálogo Adicionar Novo Item, selecione Página em Branco no painel central.
  3. Na caixa Nome, digite página1 (ou página2) e selecione o botão Adicionar.

Depois de concluir as etapas anteriores duas vezes, os seguintes arquivos devem ter sido adicionados ao projeto.

  • BasicPage1.xaml
  • BasicPage1.xaml.cs ou BasicPage1.xaml.vb
  • BasicPage2.xaml
  • BasicPage2.xaml.cs ou BasicPage2.xaml.vb

Agora, precisamos usar as páginas que adicionamos no aplicativo. Faça as seguintes mudanças em BasicPage1.xaml.

  • Encontre o elemento TextBlock denominado pageTitle e altere a propriedade Text para Page 1. O XAML deve ter uma aparência como esta (o "..." representa outros atributos que você não está mudando):

    
    
    <TextBlock x:Name="pageTitle" Text="Page 1" .../>
    
    
  • Adicione o seguinte XAML como um segundo elemento filho à raiz Grid. O elemento StackPanel deve ser um irmão para o Grid que contém o botão de voltar e o título da página.

    
    <StackPanel Grid.Row="1"
                Margin="120,0,120,60">
        <HyperlinkButton Content="Click to go to page 2" Click="HyperlinkButton_Click"/>
    </StackPanel>
    
    

Faça as seguintes mudanças em BasicPage2.xaml.

  • Encontre o elemento TextBlock denominado pageTitle e altere a propriedade Text para Page 2. O XAML deve ter a seguinte aparência:

    
    
    <TextBlock x:Name="pageTitle" Grid.Column="1" Text="Page 2" 
               Style="{StaticResource PageHeaderTextStyle}"/>
    
    
  • Adicione o seguinte XAML como um segundo elemento filho à raiz Grid. O elemento StackPanel deve ser um irmão para o Grid que contém o botão de voltar e o título da página.

    
    <StackPanel Grid.Row="1"
                Margin="120,0,120,60">
        <TextBlock HorizontalAlignment="Left" Name="tb1" Text="Hello World!"/>
    </StackPanel>
    
    

Adicione o código a seguir à classe BasicPage1 em BasicPage1.xaml.cs ou BasicPage1.xaml.vb.


private void HyperlinkButton_Click(object sender, RoutedEventArgs e)
{
    this.Frame.Navigate(typeof(BasicPage2));
}

Agora que preparamos as novas páginas, precisamos fazer com que BasicPage1 seja o primeiro item a ser exibido quando o aplicativo é iniciado. Abra app.xaml.cs/vb e altere o método OnLaunched para chamar Frame.Navigate usando BasicPage1, em vez do BlankPage. A linha relevante de código tem esta aparência:



    if(!rootFrame.Navigate(typeof(BasicPage1), e.Arguments))
    { ... }

Observação  Aqui, o código usa o valor de retorno de Navigate para emitir uma exceção de aplicativo, para o caso de falha na navegação para o quadro da janela inicial do aplicativo. Quando Navigate retorna true, a navegação acontece.

Agora, você está pronto para testar o aplicativo. Inicie o aplicativo e clique no link que diz Clique para acessar a página 2. A segunda página deve aparecer com a informação "Página 2" na parte superior. Observe que há um botão de voltar à esquerda do título da página. Clique no botão para retornar à primeira página.

As classes Frame e Page

Antes de adicionarmos mais funcionalidade a nosso aplicativo, vamos ver como as páginas que adicionamos fornecem suporte de navegação para o aplicativo.

O arquivo App.xaml.cs/vb/cpp cria um Frame, caso ainda não exista, e torna o Frame o conteúdo da janela atual. Se o conteúdo do quadro for nulo, o aplicativo navegará para a home page, conforme especificado no App.xaml code behind. Por exemplo, no Aplicativo de Grade, o código é rootFrame.Navigate(typeof(GroupedItemsPage), "AllGroups") ).

A classe Frame é responsável, principalmente, pela navegação e implementa métodos como Navigate, GoBack e GoForward. Você usa o método Navigate para exibir o conteúdo na Frame. No exemplo anterior, o método App.OnLaunched cria uma Frame e passa BasicPage1 para o método Navigate. Em seguida, o método define a janela atual do aplicativo para a Frame. O resultado é que a janela do aplicativo contém uma Frame que contém BasicPage1

BasicPage1 é uma subclasse da classe Page. A classe Page tem uma propriedade Frame, uma propriedade somente leitura que obtém a Frame que contém a Page. Quando o manipulador de eventos Click do HyperlinkButton chama Frame.Navigate(typeof(BasicPage2)), a Frame na janela do aplicativo exibe o conteúdo de BasicPage2.

Gerenciador de suspensão

Importante  

A classe auxiliar SuspensionManager é fornecida nos seguintes modelos de projeto:

Aplicativos do WindowsAplicativo de Hub, aplicativo de grade, aplicativo dividido
Aplicativos do Windows PhoneAplicativo de Hub, aplicativo Pivot
Aplicativos UniversaisAplicativo de Hub

 

A classe auxiliar SuspensionManager não é fornecida com os modelos de Aplicativo em Branco.

Durante a instalação, o SuspensionManager registra o Frame. O SuspensionManager é uma classe auxiliar fornecida na pasta Comum no modelo e fornece a implementação usada para armazenar e carregar o estado quando o aplicativo é encerrado.

Todos os aplicativos se movem por meio de um ciclo de vida de aplicativo como ditado pelo sistema operacional. Sempre que um aplicativo é encerrado pelo sistema por motivos, como restrições de recursos, desligamentos, reinicializações, etc., você como o desenvolvedor deve restaurar os dados após reiniciar o aplicativo. SuspensionManager é fornecido para ajudá-lo com essa tarefa.

SuspensionManager captura o estado de sessão global para simplificar o gerenciamento do tempo de vida do processo de um aplicativo. O estado da sessão é automaticamente desmarcado sob uma variedade de condições e deve ser usado apenas para armazenar informações que seria conveniente carregadas em sessões, mas que deve ser descartado quando um aplicativo trava ou é atualizado. Basicamente, isso inclui dados transitórios de interface do usuário.

SuspensionManager tem duas propriedades: SessionState e KnownTypes.

  • SessionState fornece acesso ao estado de sessão global para a sessão atual. Este estado é serializado pelo método SaveAsync e é restaurado pelo método RestoreAsync. Todos os dados são salvos e restaurados usando DataContractSerialization e devem ser os mais compactos possível. Cadeias de caracteres são outros tipos de dados independentes que são fortemente recomendados.
  • KnownTypes armazena uma lista de tipos personalizados para o DataContractSerializer que é usado pelos métodos SaveAsync e RestoreAsync ao ler e gravar o estado de sessão. Inicialmente, tipos vazios adicionais podem ser adicionados para personalizar o processo de serialização.

SuspensionManager armazena o estado em um dicionário, SessionState. O dicionário armazena FrameState em relação a uma chave que está exclusivamente associada a um Frame. Cada dicionário FrameState mantém o estado de cada página no estado de navegação para o quadro específico. Cada página armazena o parâmetro de navegação, bem como qualquer outro estado que o usuário decida adicionar.

É assim que funciona: quando um Frame é criado, se você deseja que o estado seja armazenado para esse quadro, ele deve ser imediatamente registrado. Eles são registrados com a chamada (SuspensionManager.RegisterFrame(rootFrame, "AppFrame")) a seguir. Cada quadro deve ter uma chave exclusiva associada a ele. Geralmente a maioria dos aplicativos só tem um único quadro. Se você declarar um segundo quadro, ele precisará ser registrado também. Quando um quadro é registrado, duas propriedades anexadas são definidas no quadro. A primeira é a chave que você associou ao quadro e a segunda é o dicionário de estado de sessão que será associado ao quadro. Os quadros que foram registrados anteriormente terão sua navegação e seu estado imediatamente restaurados. Quadros também podem ser cancelados; todo o estado e o histórico de navegação serão descartados.

E agora para chamadas importantes: SaveAsync e RestoreAsync. SaveAsync é usada para salvar o SessionState inteiro. Todos os quadros que foram registrados por meio do SuspensionManager.RegisterFrame também preservarão sua pilha de navegação atual, que por sua vez proporciona à sua página ativa a oportunidade de salvar seus dados. O SessionState é então serializado usando um DataContractSerializer e gravado em um arquivo armazenado na pasta local, conforme definido pelo ApplicationData.

RestoreAsync é usada para ler o SessionState salvo anteriormente. Todos os quadros que foram registrados por meio do RegisterFrame também restaurarão seu estado de navegação anterior, que proporcionará à sua página ativa a oportunidade de restaurar seu estado. Novamente como na SaveAsync, um DataContractSerializer é usado para desserializar o estado armazenado em um arquivo na pasta local do Aplicativo.

Há dois erros comuns que as pessoas cometem ao tentar armazenar o estado do seu aplicativo.

  • Os tipos armazenados por páginas individuais devem ser capazes de serem serializados pelo DataContractSerializer em C# e VB. Para fazer isso, qualquer tipo personalizado deve ser registrado antes de poder ser salvo ou restaurado. SuspensionManager fornece a coleção de KnownTypes que passa os tipos na coleção para o DataContractSerializer. Conforme o SuspensionManager é chamado para restaurar o estado na substituição de OnLaunched do code-behind por App.xaml, um bom lugar para registrar tipos é o construtor de aplicativo.
    
            public App()
            {
                this.InitializeComponent();
                this.Suspending += OnSuspending;
                SuspensionManager.KnownTypes.Add(typeof(MyCustomType));
            }
    
    
    
  • Os parâmetros passados no uso da navegação devem ser capazes de ser serializados pela plataforma. Quando estamos salvando e restaurando a pilha de navegação, chamamos Frame.GetNavigationState() e Frame.SetNavigationState(). Ambas essas chamadas fazem uso de um formato de serialização interno e todos os tipos passados como o parâmetro em Frame.Navigate() devem ser capazes de serem serializados pela plataforma.
O uso de SuspensionManager está envolvido na implementação da NavigationHelper.

NavigationHelper é uma implementação de uma página que fornece as seguintes conveniências importantes:

  • Manipuladores de eventos para Navigate, GoBack e GoForward.
  • Mouse e atalhos de teclado para navegação
  • Gerenciamento de estado para navegação e gerenciamento do tempo de vida do processo.

Além de fornecer a implementação descrita, o NavigationHelper também precisa ser chamado nos manipuladores de eventos OnNavigatedTo() e OnNavigatedFrom(), que são implementados em cada página. Quando esses eventos ocorrem, o NavigationHelper chama uma implementação específica de página de LoadState() e SaveState(). Você pode personalizar a implementação dessas funções em cada página. Elas devem ser usadas no lugar de OnNavigatedTo() e OnNavigatedFrom(), respectivamente.

  • Applies to Windows Phone

Observação  No Windows Phone, OnNavigatedFrom() é chamado quando o aplicativo for suspenso. OnNavigatedTo() não é chamado quando o aplicativo for reiniciado.

OnNavigatedFrom() é chamado quando a página está para ser exibida em um Frame. Quando estamos navegando para uma nova página, carregamos o estado associado à página. Se a página estiver sendo restaurada, o estado em que a página foi salva anteriormente será restaurado. LoadState é então chamado de tal forma que cada página possa reagir. LoadState tem dois parâmetros; o parâmetro de navegação original passado para OnNavigateTo e o estado da página anterior, se houver.

OnNavigatedFrom() é chamado quando a página não vai mais ser exibida em um Frame. Quando estamos navegando para fora de uma página, permitimos que a página salve seu estado atual. Um dicionário vazio é passado para SaveState(). Cada página pode substituir os objetos SaveState e de repositório no dicionário com chave (cadeia de caracteres para objeto). Esse dicionário é então associado à página e adicionado ao SessionState que o SuspensionManager acompanha para um determinado quadro.

Observação  

  • Todos os dados que são armazenados na página individual devem estar disponíveis para serem serializados pelo DataContractSerializer.
  • Também é importante armazenar aqui somente as informações de interface do usuário transitórias, porque esse estado será perdido se o aplicativo for fechado por qualquer meio que não seja Encerrado.

Suporte de navegação em modelos de página

Quando criamos as páginas de navegação, usamos o modelo Página Básica. Esse modelo, e outros que têm suporte para navegação, cria uma página que fornece um botão Voltar no canto superior esquerdo da página. O botão é estilizado para que possa ser visto apenas quando está habilitado. É por este motivo que você não vê o botão Voltar na primeira página, mas o vê na segunda.

Os modelos de página a seguir oferecem este mesmo suporte de navegação.

  • Página Básica
  • Página de Detalhes do Grupo
  • Página de Itens Agrupados
  • Página de Detalhes do Item
  • Página de Itens
  • Página Dividida
  • Página Hub
  • Página de Resultados da Pesquisa

Transmitindo informações entre páginas

Nosso aplicativo navega entre duas páginas, mas, na realidade, ainda não apresentou nada de interessante. Geralmente, quando um aplicativo tem várias páginas, as páginas precisam compartilhar informações. Vamos transmitir algumas informações da primeira para a segunda página.

Em BasicPage1.xaml, substitua o StackPanel que você adicionou anteriormente com este XAML.


<StackPanel Grid.Row="1"
    Margin="120,0,120,60">
    <TextBlock Text="Enter your name"/>
    <TextBox Width="200" HorizontalAlignment="Left" Name="tb1"/>
    <HyperlinkButton Content="Click to go to page 2" Click="HyperlinkButton_Click"/>
</StackPanel>


Em BasicPage1.xaml.cs ou BasicPage1.xaml.vb, substitua o manipulador de eventos HyperlinkButton_Click pelo código a seguir.


private void HyperlinkButton_Click(object sender, RoutedEventArgs e)
{
    this.Frame.Navigate(typeof(BasicPage2), tb1.Text);
}


Em BasicPage2.xaml.cs ou BasicPage2.xaml.vb, preencha o método navigationHelper_LoadState vazio com:


private void navigationHelper_LoadState(object sender, LoadStateEventArgs e)
{
    string name = e.NavigationParameter as string;

    if (!string.IsNullOrWhiteSpace(name))
    {
        tb1.Text = "Hello, " + name;
    }
    else
    {
        tb1.Text = "Name is required.  Go back and enter a name.";
    }
}

Execute o aplicativo, digite seu nome na caixa de texto e clique no link que diz Clique para acessar a página 2. Depois de chamar this.Frame.Navigate(typeof(BasicPage2), tb1.Text); no evento Click do HyperlinkButton, a propriedade tb1.Text é transmitida quando BasicPage2 é carregado. Em seguida, o método navigationHelper_LoadState de BlankPage2 obtém o valor dos dados de evento e usa-o para exibir uma mensagem.

Armazenando uma página em cache

Depois que executou o último exemplo, você pode ter observado que se clicar no botão Voltar em BasicPage2, a TextBox na BasicPage1 está vazia quando aparece. Vamos supor que o usuário do aplicativo deseja voltar e fazer uma alteração na página anterior. Se a BasicPage1 tivesse muitos campos para preencher, o usuário não gostaria de ver todos os campos redefinidos quando o aplicativo voltasse para essa página. Você pode especificar que uma página foi armazenada em cache utilizando a propriedade NavigationCacheMode. No construtor de BasicPage1, defina NavigationCacheMode como Enabled.


public BasicPage1()
{
    this.InitializeComponent();
    ...
    this.NavigationCacheMode = 
        Windows.UI.Xaml.Navigation.NavigationCacheMode.Enabled;
}


Agora, quando você executa o aplicativo e navega da BasicPage2 de volta para BasicPage1, a TextBox em BasicPage1 retém seu valor.

Resumo

Neste tópico você aprendeu como criar um aplicativo simples que navega entre páginas. Você aprendeu como transmitir informações de uma página para outra e também como especificar se uma página deve ser armazenada em cache.

Próximas etapas

Para ver um exemplo completo, que usa conjuntamente muitos dos recursos Page e Frame, consulte Exemplo de navegação XAML. O exemplo engloba recursos não abordados aqui, incluindo:

Tópicos relacionados

Navegando entre as páginas
Para designers
Padrões de navegação
Padrões de comando
Layout
Botão Voltar
Diretrizes do controle hub
Diretrizes de barras de aplicativos (aplicativos do Tempo de Execução do Windows)
Tornando a barra de aplicativos acessível
Para desenvolvedores (aplicativos do Tempo de Execução do Windows em C#/VB/C++ e XAML)
Windows.UI.Xaml.Controls Hub class
Windows.UI.Xaml.Controls AppBar class
Windows.UI.Xaml.Controls CommandBar class
O seu primeiro aplicativo - Parte 3: Navegação, layout e exibições
O seu primeiro aplicativo - Adicionar navegações e exibições no aplicativo da Windows Store C++ (tutorial 3 de 4)
Exemplo de controle Hub XAML
Amostra de controle AppBar em XAML
Exemplo de navegação XAML
Adicionando barras de aplicativos (XAML)

 

 

Mostrar:
© 2014 Microsoft