Curso Windows Phone – Efeito de transição entre as páginas da APP

Olá pessoal, tudo bom?

Neste post demonstro como criar efeitos de transição entre as páginas da APP que você estiver implementando para Windows Phone. A intenção é fazer com que a troca de páginas da sua aplicação fique mais interessante em termos visuais para o usuário da mesma, criando um efeito como se elas, durante a navegação, estivem sendo “viradas” ou “empurradas”. Vejam os passos abaixo e reparem como isso é simples:

1º passo: Fazer referência a Windows Phone Toolkit

  • Para realizar a referencia da Windows Phone Toolkit em seu projeto, de preferencia pela utilização do gerenciador de pacotes Nuget. Caso você não o tenha, faça o download e instale-o.
  • No Visual Studio, após criar um projeto para Windows Phone, vá ao menu TOOLS >> Library Package Manager >> Packaget Manager Console
    VS-Package-Manager-Console
  • No Package Manager Console, digite o comando Install-Package WPToolkit
    Nuget-Install-Package-WPToolkit

2º passo: Alterar o arquivo App.xaml.cs

No método InitializePhoneApplication(), troque a linha RootFrame = new PhoneApplicationFrame(); para RootFrame = new TransitionFrame();

...
private void InitializePhoneApplication()
{
  if (phoneApplicationInitialized)
    return;

  // Create the frame but don't set it as RootVisual yet; this allows the splash
  // screen to remain active until the application is ready to render.

  //RootFrame = new PhoneApplicationFrame();
  RootFrame = new TransitionFrame();
  RootFrame.Navigated += CompleteInitializePhoneApplication;

  // Handle navigation failures
  RootFrame.NavigationFailed += RootFrame_NavigationFailed;

  // Ensure we don't initialize again
  phoneApplicationInitialized = true;
}

3º passo: Adicionar a referência da Toolkit em todas as páginas onde você deseja que o efeito de transição aconteça

Além de adicionar o referência na página, também é necessário que se coloque o trecho de código que contempla a chamada ao TransitionService da Tookit. Veja:

<phone:PhoneApplicationPage
 x:Class="PageTransitions.MainPage"
 ...
 xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
 ...>

 <toolkit:TransitionService.NavigationInTransition>
 <toolkit:NavigationInTransition>
 <toolkit:NavigationInTransition.Backward>
 <toolkit:TurnstileTransition Mode="BackwardIn"/>
 </toolkit:NavigationInTransition.Backward>
 <toolkit:NavigationInTransition.Forward>
 <toolkit:TurnstileTransition Mode="ForwardIn"/>
 </toolkit:NavigationInTransition.Forward>
 </toolkit:NavigationInTransition>
 </toolkit:TransitionService.NavigationInTransition>
 <toolkit:TransitionService.NavigationOutTransition>
 <toolkit:NavigationOutTransition>
 <toolkit:NavigationOutTransition.Backward>
 <toolkit:TurnstileTransition Mode="BackwardOut"/>
 </toolkit:NavigationOutTransition.Backward>
 <toolkit:NavigationOutTransition.Forward>
 <toolkit:TurnstileTransition Mode="ForwardOut"/>
 </toolkit:NavigationOutTransition.Forward>
 </toolkit:NavigationOutTransition>
 </toolkit:TransitionService.NavigationOutTransition>

 ...

4º passo: Criar as páginas necessárias para a APP

Agora basta fazer a implementar a navegação entre as páginas através do NavigationService.Navigate(new Uri(…

Fonte: http://www.geekchamp.com/articles/windows-phone-7-navigation-transitions-step-by-step-guide
Fonte: http://www.geekchamp.com/articles/windows-phone-7-navigation-transitions-step-by-step-guide

Simples, não?

Post Relacionado: 

Grande abraço,
Eduardo Henrique Rizo

[twitter-follow screen_name=’eduardorizo’ show_count=’yes’]

4 comentários em “Curso Windows Phone – Efeito de transição entre as páginas da APP”

  1. Pingback: Free: Curso Windows Phone – Vários tópicos | Blog do Eduardo H. Rizo

  2. Eu fiz isto, tudo correto, agora o meu app não abre, eu já tinha feito quase tudo nele, e ele é uma lista telefônica, muito conteúdo, agora terei que refazer tudo.

    1. Bom dia, tudo bom?

      Você poderia me dizer qual erro está tendo?
      Uso esse código do post em vários APPs e nunca passei pela situação que você está apresentando…

      Post o erro aqui para tentarmos sanar o problema.

      []s
      Eduardo H. Rizo

Deixe um comentário para Diego Leite Cancelar resposta