[Desenvolvimento] Efeito de transição entre as páginas da APP para Windows Phone

2

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();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
...
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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<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: https://www.geekchamp.com/articles/windows-phone-7-navigation-transitions-step-by-step-guide

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

Simples, não?

Post Relacionado: 

Grande abraço,
Eduardo Henrique Rizo (@eduardorizo)

Fonte: Blog do Eduardo H. Rizo

Share.

About Author

Bacharel em Ciência da Computação pela FIPP/Unoeste, Pós-Graduado em Desenvolvimento de Sistemas Web, Segurança da Informação e Avaliação do Ensino e da Aprendizagem, Professor universitário e responsável pelo setor de desenvolvimento de sistemas web da Universidade do Oeste Paulista. MCP e MCPS pela Microsoft e nas horas vagas dedica um pouco do seu tempo escrevendo posts técnicos sobre desenvolvimento de sistemas web, windows phone, gerenciamento de servidores e outros assuntos para a comunidade.

  • Murilo

    Como eu defino o tempo desse efeito de transição?

  • Vitor

    Funciona tanto no WP7 como no WP8?