Este artigo foi traduzido por máquina.

Questões de mobilidade

Navegação de telefone do Windows, parte 2: Avançado as receitas

Yochay Kiriaty

Baixe o código de exemplo

[Isso conclui a primeira parte da MSDN Magazineda coluna mensal mais recente, é importante móvel. Com a crescente importância das tecnologias móveis como, por exemplo, o Windows 7 do telefone, podemos vai regularmente apresentam especialistas dando conselhos de prática para os desenvolvedores de todos os níveis que desejam aumentar seus conhecimentos nessa área crucial de tecnologia. Recomendamos que você para nos ajudar a nossa nova coluna de forma à medida que avançarmos. Envie um e-mail para mmeditor@microsoft.com para sugerir tópicos, compartilhar idéias ou fazer perguntas. Bem-vindo todos os comentários. — ED.

No mês passado apresentamos a você o modelo de navegação do telefone do Windows e APIs (consulte relacionadas MSDN.microsoft.com/magazine/gg650662). Agora Compartilharemos dicas e truques para realizar tarefas de navegação mais avançadas. Vamos abordá os seguintes aspectos de telefone do Windows:

• Usando a APIs de navegação, você pode usar os métodos de navegar e GoBack. Esses dois métodos de envio ou retirar uma URL para o histórico de navegação (pilha back). Porque não há nenhuma API para gerenciar a pilha back, você precisa gerenciar transitórias telas por conta própria. Telas transitórias são caixas de diálogo ou avisos que você não deseja que os usuários a visitar novamente quando elas chegam, Back — por exemplo, um prompt de mensagem ou uma caixa de diálogo de logon.
• Telefone do Windows permite apenas uma navegação estar ativo por vez. Se você precisar o recurso de "leve-me doméstica", que geralmente é um atalho para um usuário navegue de volta por várias páginas, você terá que serializar a seqüência de chamadas de método GoBack um por vez; Isso pode afetar seu UX.
• Nenhum dos dois participantes de navegação — PhoneApplicationPage e PhoneApplicationFrame — têm suporte de out-of-the-box para transições de página.

Vamos dissecar esses aspectos, de modo que podem chegar a receitas passível de ação para resolvê-los.

Conteúdo transitório

Telas transitórias são telas não devem ser adicionadas à pilha back diário (o histórico do diário) — por exemplo, uma caixa de diálogo de logon. Os usuários a navegar de uma página para uma caixa de diálogo de login, mas quando sua evolução e acerto de volta, você não deseje voltar à caixa de diálogo, desejada para voltar à tela anterior.

Existem várias maneiras de criar e exibir uma tela transitória. O óbvio é usar um pop-up do Silverlight para mostrar a interface do usuário. Há dois problemas pequenos com a abordagem de Popup:

1. Um pop-up não está ciente de orientação.  Isso não é um enorme problema; Você poderia escrever um pop-up com reconhecimento de orientação ou pop-up pode ser inserido apenas à árvore visual e, em seguida, ele faria o layout de acordo com a orientação da página.
2. Não conteúdo dentro de uma tela inteira Popup é acelerada por hardware. Para a caixa de diálogo de logon da interface do usuário (e muitas páginas transitórias) será ser fino, mas imagine onde o Popup tem uma caixa de listagem com suficiente itens para percorrer ou tem um ProgressBar animado — você desejará para hardware acelerar o Popup para maximizar a capacidade de resposta do seu segmento de interface do usuário.

Devido aos seguintes problemas pequenos, recomendamos que você embutido na interface do usuário, inserindo-a árvore visual com um z-index mais alto que o conteúdo da página que estiver no. Aqui está a receita passo a passo:

1. Compactar o conteúdo a que ser embutido à árvore visual em um controle de usuário para poder inseri-lo na árvore e mostrá-lo na sua página (sem ele sendo misturados na interface do usuário da página).
2. Em PhoneApplicationPage que mostra a interface do usuário, manipular o evento BackKeyPress para descartar a interface do usuário transitório (sem navegar de volta) ou o retorno de chamada de OnBackKeyPress quando o botão Voltar é pressionado.
   1. Controles personalizados que têm vários estados (expandida e recolhida) devem expor propriedades para que a página host possa consultar em seu estado e saber se elas estão em um estado que pode consumir a pressionar o botão Back (se aplicável). Por exemplo, ListPicker no Kit de ferramentas de controle tem uma propriedade de ListPickerMode, ContextMenu tem uma propriedade IsOpen e assim por diante.
3. Oculte ApplicationBar na página ao exibir a interface do usuário transitório (se aplicável). O ApplicationBar é desenhado pelo sistema operacional e quando é opaco (opacidade = 1,0) reserva-se o espaço abaixo da área de conteúdo da sua página. Para simular a interface do usuário transitório como sendo uma nova tela, provavelmente deseja ocultar a barra de aplicativo.
4. Anime a interface de usuário temporário quando ele passa no e quando ele é descartado para que ela se mescla com o restante UX do aplicativo (se aplicável).

Código passo a passo: para ver uma tela de IU transitória, verificar TransientUISample.xaml.cs no download do código fornecido, com instruções passo a passo como comentários.

A maioria dos requisitos anteriores que deve ser intuitiva; a única pessoa que precisa de explicação é não. 2. Para satisfazer os requisitos de certificação, um PhoneApplicationPage, mostrando uma tela transitória não deve navegar quando a interface do usuário transitório está mostrando. Em vez disso, ele deve descartar a interface do usuário transitório.

Na parte 1 deste artigo, mencionamos que você deve evitar navegações de trás do hardware, manipulando o evento BackKeyPress ou OnBackKeyPress. Se sua página está hospedando um controle que tem dois estados e um deles é transitório e, em seguida, um pouco de coordenação (ou pelo menos conscientização) entre a página e o controle é necessária. Para implementar o handshake, recomendamos:

1. Controles personalizados que têm vários estados (por exemplo, ListPicker) devem inscrever-se BackKeyPress na página de hospedagem e manipulá-lo adequadamente. Se elas estiverem em um estado transitório, eles devem cancelar o pressionamento de tecla voltar e descartar seu estado transitório.
   1. Esses controles devem inscrever-se somente quando necessário. Atrasar a assinatura para o evento de BackKeyPress até que seja necessário.
   2. Preferimos que os controles se dirigir a árvore visual para localizar seu PhoneApplicationPage, mas que vimos especialistas (por exemplo, a equipe do Kit de ferramentas de controle) fazê-lo para o RootVisual de aplicativo (o que sabemos que é um PhoneApplicationFrame) e inspecionar em seu conteúdo. Isso é, obviamente, mais alto desempenho e segurança ainda porque sabemos que há apenas um thread de interface do usuário em um aplicativo do Silverlight (portanto, é improvável que o RootVisual está mudando dentro de um manipulador de eventos para o controle ou página).
2. Controles personalizados e interfaces do usuário transitórios devem expor propriedades para que a página host possa consultar em seu estado e saber se elas estão em um estado que pode consumir a pressionar o botão Voltar. Por exemplo, ListPicker no Kit de ferramentas de controle tem uma propriedade de ListPickerMode, ContextMenu tem uma propriedade IsOpen e assim por diante.
3. O host que phoneapplicationpage precisará estar ciente de quaisquer controles transitórios ou a interface do usuário que pode ser exibido e verificar os todos eles antes que ele faz qualquer navegação dentro de OnBackKeyPress.  Lembre-se, OnBackKeyPress é chamado antes de quaisquer manipuladores de evento de BackKeyPress são chamados. Se você depender de controles hospedados para lidar com seu estado transitório, certifique-se de que não chamar o método Navigate e obter à frente dos manipuladores.

Doméstica botão de navegação (e limpando a pilha de trás)

Um padrão comum de UX para outras plataformas móveis é ter uma "casa" botão de navegação que atalhos e lhe envia uma página específica. A navegação de telefone de Windows APIs diretamente não lidar com isso. Na verdade, as diretrizes UX recomendam ter um botão Home. A recomendação é ter uma estrutura de navegação avançados e relativamente plana. Se seu navegações duas ou três níveis de profundidade, é provavelmente tão fácil pressionar o botão Voltar do hardware quanto de fazer um gesto calculado mais encontrar um botão Home na tela e clicando nele duas vezes. Dito isso, se você optar por ter um botão Home, há algumas coisas que você deve considerar para implementar a navegação:

• Lembre-se de que o telefone do Windows permite uma navegação por vez. Isso significa que se você tem quatro níveis de profundidade em uma navegação, você precisará chamar o GoBack três vezes seguidas para chegar em casa. Porque as navegações simultâneas não são permitidas, você deve aguardar até que uma navegação seja concluída (quando o evento Navigated é acionado) para iniciar a navegação Avançar. Essa "seqüência de navegação" pode causar atrasos breves se sua página está levando muito tempo para carregar ou ele pode levar a "pisca" se sua página é visível enquanto você insere a pilha de back.
• As animações para o ApplicationBar são implementadas pelo sistema operacional. Isso significa que se você estiver navegando em um loop entre páginas, a interface do usuário novamente pode tremer se o ApplicationBar está sendo animada a ser mostrado em uma página em seu loop.

Então, aqui está uma receita para resolver o desafio de navegação "Casa". Você pode ver todo esse código implementado através da classe BackNavigationHelper no download que acompanha:

1. Oculte o PhoneApplicationFrame (RootVisual para o aplicativo) da tela enquanto você tirar a pilha back. Isso evitará a cintilação da interface do usuário (ele irá piscar uma vez, mas você não verá todas as telas Voltar).
   1. Se suas páginas levam muito tempo, você pode mostrar um pop-up de tela cheia com uma animação para que o usuário saiba o que está acontecendo.
   2. Você também deve definir um sinalizador antes do início de uma navegação inicial para que suas páginas não sabem para fazer muito trabalho em seu retorno de chamada OnNavigatedTo. Se você estiver navegando novamente, essas páginas será descarregadas como a navegação é concluída (de modo que qualquer trabalho de interface do usuário que estão fazendo é jogado fora).
2. Oculte o ApplicationBar (definindo sua propriedade IsVisible como false) de cada página que está sendo unwound (se aplicável).
   1. Observe que isso é necessário apenas para páginas em que o ApplicationBar é 100 por cento opaco (sua opacidade = 1. 0).
3. Desenrolar a pilha.
   1. Chame o método GoBack.
   2. Escutar Navigated (em RootVisual) e chamar o GoBack novamente, se você não ainda estiver na página "Inicial".

Redefina tudo volta ao normal quando você já unwound a pilha.

Código passo a passo: você pode ver exemplos de "leve-me doméstica" navegação em páginas na pasta HomeNavigationSamplePages no download que acompanha do código. O código interessante é, obviamente, na classe BackNavigationHelper, mas o nosso exemplo possui uma página de BackNavConfig, onde você pode selecionar as opções que deseja ativar a BackNavigationHelper (como, por exemplo, ocultando a moldura, ocultando a barra de aplicativo, validando o registro em log e assim por diante).

Transições de página

O conceito de navegação final e mais avançado, que você pode se preocupa se refere a transições de página. No contexto de navegação, acreditamos que uma transição como a percepção de uma mão-off entre uma página que você está navegando na e a página que você está navegando. A navegação ainda está acontecendo e utiliza a estrutura de navegação subjacente que discutimos anteriormente, mas como a navegação acontece, o conteúdo de PhoneApplicationPages que estão participando da navegação é animado para simular uma mão-off.

A receita para transições é um pouco mais complicada. Na verdade, como lasagna da vovó, não há uma receita única — ela exigirá alguns "ajustes" para o seu gosto (e necessidades de aplicativo). Dito isso, temos alguns princípios devem seguir, juntamente com uma explicação de amostra e código, é claro.

Princípios:

1. Siga todos os princípios de pressionamento de tecla Back descritos anteriormente. Novamente, transição é uma extensão para a navegação — não uma desculpa para certificação de falhar.
2. Compreenda o contexto e a finalidade de uma animação de transição. Telefone do Windows tem um conjunto bem definido de transições e a maioria delas possui um contexto específico ou uso. Você deve compreender o uso pretendido para que você possa implementar as transições certas no seu aplicativo. Jeff Arnold (cliente potencial movimento designer para Windows telefone) fez uma breve gravação de todas as animações e transições; é uma inspeção de deve compreender a finalidade de cada animação. Você pode encontrar o vídeo no bit.LY/eBTkjD.
3. Mantenha suas transições rápidas e short.
   1. Lembre-se que uma transição é tanto um "out" de uma página e um "em" em uma página diferente. Essas duas fases serão somadas. Mantê-las curtas. Nós diremos total de 300 ms é um bom limite superior.
   2. Atraso quanto trabalho de interface do usuário é possível durante uma transição. Se sua página pode evitar operações de layout caros ou ligação de dados, considere a possibilidade de fazer isso. Você pode fazer a transição de tela e mover rapidamente para preenchê-los posteriormente.

Figura 1 mostra um resumo das animações, seu uso, instruções e as anotações pertinentes.

Figura 1 um resumo das animações

Com os três princípios listados anteriormente em mente, pode agora passamos para a codificação de transições de página. O Kit de ferramentas de controles de telefone do Windows tem suporte para transições e possui Storyboards para as transições mais comuns.

Observação: Para acompanhar o restante deste artigo, será necessário o Silverlight para o Windows telefone Toolkit (Silverlight.codeplex.com). O código neste artigo é escrito em relação a edição de fevereiro (versões posteriores devem funcionar, muito).

Transições Toolkit usam um TransitionFrame que herda de PhoneApplicationFrame, mas tem um modelo personalizado com dois apresentadores conteúdos (onde PhoneApplicationFrame tem apenas um apresentador de conteúdo). TransitionFrame atende às alterações de sua propriedade Content e transições de novo conteúdo (página) e faz a transição de conteúdo antigo.

Cada PhoneApplicationPage determina quais as transições que quiser usar uma propriedade anexada na classe de TransitionService do Kit de ferramentas. Você pode especificar até quatro transições para cada página, conforme mostrado na a Figura 2.

Figura 2 as quatro transições de página que podem ser especificadas.

Essas transições são instâncias de uma classe NavigationTransition extensível. O toolkit inclui cinco NavigationTransitions internos: TurnstileTranstion, SlideTransition, SwivelTransition, RotateTransition e RollTransition. Novamente, o sistema é extensível, portanto, você pode adicionar seus próprios.

Instruções passo a passo para implementar transições usando o Kit de ferramentas são:

1. Baixar e adicionar uma referência para o Kit de ferramentas de controle do Silverlight.

2. Substituir o quadro de RootVisual para seu aplicativo editando o App.xaml.cs e substituí-lo por um TransitionFrame (consulte a Figura 3).

3. Aplicar propriedades de transição para suas páginas (consulte a Figura 4).

Figura 3 substituindo o quadro de RootVisual para seu aplicativo, editando o App.xaml.cs

InitializePhoneApplication() void particular {se retorno (phoneApplicationInitialized);

    / Criar o quadro, mas não defini-la como RootVisual ainda; Isso permite a abertura / / tela permaneça ativa até que o aplicativo está pronto para processar.
RootFrame = new Microsoft.Phone.Controls.TransitionFrame(); RootFrame.Navigated + = CompleteInitializePhoneApplication;

    / / Lidar com navegação falhas RootFrame.NavigationFailed + do = RootFrame_NavigationFailed;

    / / Certifique-se de não inicializamos novamente phoneApplicationInitialized = verdadeiro; }

Figura 4 a aplicação de propriedades de transição para suas páginas

< X:Class de telefone: PhoneApplicationPage = "LWP.TransitionSamples.Turnstile" xmlns="https://schemas.microsoft.com/winfx/2006/xaml/Presentation" xmlns:x="https://schemas.microsoft.com/winfx/2006/XAML" xmlns:Phone = "clr namespace:Microsoft.Phone.Controls; assembly=Microsoft.Phone" xmlns:shell = "clr namespace:Microsoft.Phone.Shell; assembly=Microsoft.Phone" xmlns:d="https://schemas.microsoft.com/Expression/Blend/2008" xmlns:MC="https://schemas.openxmlformats.org/Markup-Compatibility/2006" FontFamily = "{StaticResource PhoneFontFamilyNormal}" FontSize = "{StaticResource PhoneFontSizeNormal}" Em primeiro plano = "{StaticResource PhoneForegroundBrush}" SupportedOrientations = "Portrait" Orientação = "Portrait" MC: Ignorable = "d" d:DesignHeight = "768" d:DesignWidth = "480" shell:SystemTray.IsVisible="true" xmlns:Toolkit = "namespace:Microsoft.Phone.Controls do clr; assembly = Microsoft.Phone.Controls.Toolkit" >

  <toolkit:TransitionService.NavigationInTransition> <toolkit:NavigationInTransition> <toolkit:NavigationInTransition.Backward> < toolkit:TurnstileTransition modo = "backwardin" / > </toolkit:NavigationInTransition.Backward> <toolkit:NavigationInTransition.Forward> < toolkit:TurnstileTransition modo = "forwardin" / > </toolkit:NavigationInTransition.Forward> </toolkit:NavigationInTransition> </toolkit:TransitionService.NavigationInTransition> <toolkit:TransitionService.NavigationOutTransition> <toolkit:NavigationOutTransition> <toolkit:NavigationOutTransition.Backward> < toolkit:TurnstileTransition modo = "backwardout" / > </toolkit:NavigationOutTransition.Backward> <toolkit:NavigationOutTransition.Forward> < toolkit:TurnstileTransition modo = "forwardout" / > </toolkit:NavigationOutTransition.Forward> </toolkit:NavigationOutTransition> </toolkit:TransitionService.NavigationOutTransition>

Receitas acionáveis

Resumindo a Windows telefone Silverlight aplicativos têm um modelo de navegação de estilo da Web no qual a transição de uma página e um registro em log (ou histórico) assim, você pode voltar às páginas anteriores. Out-of-the-box, o modelo de navegação é relativamente completa e fácil de usar. Há algumas tarefas de navegação avançada — como UIs transitórias, transições ou funcionalidade do "salto para a home page" — que não são implementadas de imediato, mas este artigo de duas partes explicou as considerações de design, você deve levar em consideração ao implementar essas tarefas mais avançadas e concisa lhe concedeu, receitas viáveis para implementá-las.

Yochay Kiriaty é especialista técnico sênior da Microsoft, especializado em tecnologias de cliente, como Windows e Windows Phone. É coautor dos livros “Introducing Windows 7 for Developers” (Microsoft Press, 2009) e “Learning Windows Phone Programming” (O’Reilly Media, 2011).

Jaime Rodriguez é um dos principais especialistas da Microsoft e orienta na adoção de tecnologias de cliente emergentes, como Silverlight e Windows Phone. Siga-lhe Twitter no Twitter.com/jaimerodriguez ou no blogs.msdn.com/b/jaimer.

Graças ao especialista técnico seguir pela revisão deste artigo: Peter Torr