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(…

Simples, não?

Post Relacionado: 

Grande abraço,
Eduardo Henrique Rizo

Anúncios

Coordenador de Internet da Universidade do Oeste Paulista (Unoeste) e professor universitário de disciplinas relacionadas ao desenvolvimento de sistemas para Web, gerenciamento de servidores, serviços e redes.

Marcado com: , , , , , , , , , , , , , , , , ,
Publicado em Windows Phone
4 comentários em “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

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

Sorocaba e Região
Prestadora de serviços RIZZO GS - Sorocaba/SP

Serviços de limpeza, conservação, recepção, copa, portaria, vigia, zeladoria, jardim, elétrica, hidráulica, pintura, etc.

Contato: (15) 3357-4263 / (15) 3357-4502 - contato@rizzogs.com.br

Website: http://www.rizzogs.com.br

%d blogueiros gostam disto: