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’]

Marcado com: , , , , , , , , , , , , , , , , ,
3 comentários sobre “Curso Windows Phone – Efeito de transição entre as páginas da APP
  1. costvin15 disse:

    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.

    • 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

  2. Diego Leite disse:

    Como faço para alterar o tempo de transição para deixar mais lento

1 Pings/Trackbacks para "Curso Windows Phone – Efeito de transição entre as páginas da APP"
  1. […] Efeito de transição entre as páginas da APP […]

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

*