Interações de controle remoto e gamepad

Muitas experiências de interação são compartilhadas entre gamepad, controle remoto e teclado

Crie experiências de interação em seus aplicativos do Windows que garantam que seu aplicativo seja utilizável e acessível por meio dos tipos de entrada tradicionais de computadores, laptops e tablets (mouse, teclado, toque e assim por diante), bem como os tipos de entrada típicos da experiência de TV e Xbox de 10 pés , como o gamepad e o controle remoto.

Consulte Projetando para Xbox e TV para obter diretrizes gerais de design sobre aplicativos do Windows na experiência 10-foot.

Visão geral

Neste tópico, discutiremos o que você deve considerar em seu design de interação (ou não, se a plataforma cuidar dela para você) e fornecer diretrizes, recomendações e sugestões para a criação de aplicativos do Windows que sejam agradáveis de usar independentemente do dispositivo, tipo de entrada ou habilidades e preferências do usuário.

Resumindo, seu aplicativo deve ser tão intuitivo e fácil de usar no ambiente de 2 pés quanto no ambiente de 3 metros (e vice-versa ). Dê suporte aos dispositivos preferenciais do usuário, torne o foco da interface do usuário claro e inconfundível, organize o conteúdo para que a navegação seja consistente e previsível e dê aos usuários o caminho mais curto possível para o que eles querem fazer.

Otimizar para experiências de 2 pés e 10 pés

No mínimo, recomendamos que você teste seus aplicativos para garantir que eles funcionem bem em cenários de 2 pés e 10 pés, e que todas as funcionalidades sejam detectáveis e acessíveis para o gamepad xbox e o controle remoto.

Aqui estão algumas maneiras adicionais de otimizar seu aplicativo para uso em distâncias de 2 pés e 10 pés e com todos os dispositivos de entrada (cada um dos quais direciona para a seção apropriada nesta seção).

Gamepad e controle remoto

Assim como o teclado e o mouse são para PC, e o toque é para smartphone e tablet, o gamepad e o controle remoto são os principais dispositivos de entrada para a experiência de 10 pés. Esta seção apresenta o que são os botões de hardware e o que eles fazem. No modo de navegação e interação de foco do XY edo Mouse, você aprenderá a otimizar seu aplicativo ao usar esses dispositivos de entrada.

A qualidade do gamepad e do funcionamento remoto que você obtém diretamente da embalagem depende de quão bem o suporte ao teclado está implementado em seu aplicativo. Uma boa maneira de garantir que seu aplicativo funcionará bem com o gamepad/remoto é garantir que ele funcione bem com o teclado no computador e, em seguida, testar com gamepad/remoto para encontrar pontos fracos na interface do usuário.

Botões de hardware

Ao longo deste documento, os botões serão referenciados pelos nomes fornecidos no diagrama a seguir.

Como você pode ver no diagrama, há alguns botões com suporte no gamepad que não têm suporte no controle remoto e vice-versa. Embora você possa usar botões que só têm suporte em um dispositivo de entrada para tornar a navegação mais rápida na interface do usuário, lembre-se de que usá-los para interações críticas pode criar uma situação em que o usuário não consegue interagir com determinadas partes da interface do usuário.

A tabela a seguir lista todos os botões de hardware compatíveis com aplicativos do Windows e qual dispositivo de entrada dá suporte a eles.

Suporte para botão embutido

A UWP mapeia automaticamente o comportamento de entrada de teclado existente para o gamepad e a entrada de controle remoto. A tabela a seguir lista esses mapeamentos internos.

*Quando nem os eventos KeyDown nem KeyUp para o botão B são tratados pelo aplicativo, o evento SystemNavigationManager.BackRequested será acionado, o que deve resultar na navegação de volta dentro do aplicativo. No entanto, você precisa implementar isso por conta própria, como no seguinte snippet de código:

// This code goes in the MainPage class

public MainPage()
{
    this.InitializeComponent();

    // Handling Page Back navigation behaviors
    SystemNavigationManager.GetForCurrentView().BackRequested +=
        SystemNavigationManager_BackRequested;
}

private void SystemNavigationManager_BackRequested(
    object sender,
    BackRequestedEventArgs e)
{
    if (!e.Handled)
    {
        e.Handled = this.BackRequested();
    }
}

public Frame AppFrame { get { return this.Frame; } }

private bool BackRequested()
{
    // Get a hold of the current frame so that we can inspect the app back stack
    if (this.AppFrame == null)
        return false;

    // Check to see if this is the top-most page on the app back stack
    if (this.AppFrame.CanGoBack)
    {
        // If not, set the event to handled and go back to the previous page in the
        // app.
        this.AppFrame.GoBack();
        return true;
    }
    return false;
}

Os aplicativos do Windows no Xbox One também dão suporte a pressionar o botão Menu para abrir menus de contexto. Para obter mais informações, consulte CommandBar e ContextFlyout.

Suporte ao acelerador

Botões de acelerador são botões que podem ser usados para acelerar a navegação por meio de uma interface do usuário. No entanto, esses botões podem ser exclusivos para um determinado dispositivo de entrada, portanto, tenha em mente que nem todos os usuários poderão usar essas funções. Na verdade, o gamepad é atualmente o único dispositivo de entrada que dá suporte a funções de acelerador para aplicativos do Windows no Xbox One.

A tabela a seguir lista o suporte do acelerador integrado à UWP, bem como o que você pode implementar por conta própria. Utilize esses comportamentos em sua interface do usuário personalizada para fornecer uma experiência de usuário consistente e amigável.

Navegação e interação de foco XY

Se o aplicativo der suporte à navegação de foco adequada para teclado, isso se traduzirá bem no gamepad e no controle remoto. A navegação com as teclas de seta é mapeada para o painel D (assim como o bastão esquerdo no gamepad) e a interação com elementos de interface do usuário é mapeada para a tecla Enter/Select (consulte Gamepad e controle remoto).

Muitos eventos e propriedades são usados tanto pelo teclado quanto pelo gamepad—eles ambos disparam eventos KeyDown e KeyUp, e ambos navegam apenas para controles que têm as propriedades IsTabStop="True" e Visibility="Visible". Para obter diretrizes de design de teclado, consulte interações de teclado.

Se o suporte ao teclado for implementado corretamente, seu aplicativo funcionará razoavelmente bem; no entanto, pode haver algum trabalho extra necessário para dar suporte a todos os cenários. Pense nas necessidades específicas do seu aplicativo para fornecer a melhor experiência de usuário possível.

Problemas de foco de depuração

O método FocusManager.GetFocusedElement informará qual elemento tem foco no momento. Isso é útil para situações em que o local do visual de foco pode não ser óbvio. Você pode registrar essas informações na janela de saída do Visual Studio da seguinte maneira:

page.GotFocus += (object sender, RoutedEventArgs e) =>
{
    FrameworkElement focus = FocusManager.GetFocusedElement() as FrameworkElement;
    if (focus != null)
    {
        Debug.WriteLine("got focus: " + focus.Name + " (" +
            focus.GetType().ToString() + ")");
    }
};

Há três razões comuns pelas quais a navegação XY pode não funcionar da maneira esperada:

• A propriedade IsTabStop ou Visibility está definida como errada.
• O controle que está ganhando foco é maior do que você imagina— a navegação XY considera o tamanho total do controle (ActualWidth e ActualHeight), não apenas a parte do controle que renderiza algo interessante.
• Um controle focalizável está em cima de outro– a navegação XY não dá suporte a controles sobrepostos.

Se a navegação XY ainda não estiver funcionando da maneira esperada após corrigir esses problemas, você poderá apontar manualmente para o elemento que deseja obter o foco usando o método descrito na substituição da navegação padrão.

Se a navegação XY estiver funcionando conforme o esperado, mas nenhum visual de foco for exibido, um dos seguintes problemas poderá ser a causa:

• Você modelou novamente o controle e não incluiu um visual de foco. Defina UseSystemFocusVisuals="True" ou adicione um visual de foco manualmente.
• Você moveu o foco chamando Focus(FocusState.Pointer). O parâmetro FocusState controla o que acontece com o visual de foco. Geralmente, você deve definir isso como FocusState.Programmatic, o que mantém o visual de foco visível se ele estava visível antes e oculto se ele estava oculto antes.

O restante desta seção entra em detalhes sobre os desafios comuns de design ao usar a navegação XY e oferece várias maneiras de resolvê-los.

Interface do usuário inacessível

Como a navegação de foco XY limita o usuário a se mover para cima, para baixo, para a esquerda e para a direita, você pode acabar com cenários em que partes da interface do usuário estão inacessíveis. O diagrama a seguir ilustra um exemplo do tipo de layout de interface do usuário que a navegação de foco XY não suporta. Observe que o elemento do meio não é acessível usando gamepad/controle remoto porque a navegação vertical e horizontal será priorizada e o elemento do meio não terá prioridade alta o suficiente para obter o foco.

Se, por algum motivo, não for possível reorganizar a interface do usuário, use uma das técnicas discutidas na próxima seção para substituir o comportamento de foco padrão.

Substituindo a navegação padrão

Embora a Plataforma Universal do Windows tente garantir que a navegação D-pad/left stick faça sentido para o usuário, ela não pode garantir o comportamento otimizado para as intenções do seu aplicativo. A melhor maneira de garantir que a navegação seja otimizada para seu aplicativo é testá-lo com um gamepad e confirmar que todos os elementos de interface do usuário podem ser acessados pelo usuário de uma maneira que faça sentido para os cenários do seu aplicativo. Caso os cenários do aplicativo requeiram um comportamento que não seja alcançado por meio da navegação de foco XY disponível, considere seguir as recomendações nas seções a seguir e/ou substituir o comportamento para colocar o foco em um item coerente.

O snippet de código a seguir mostra como você pode substituir o comportamento de navegação de foco XY:

<StackPanel>
    <Button x:Name="MyBtnLeft"
            Content="Search" />
    <Button x:Name="MyBtnRight"
            Content="Delete"/>
    <Button x:Name="MyBtnTop"
            Content="Update" />
    <Button x:Name="MyBtnDown"
            Content="Undo" />
    <Button Content="Home"  
            XYFocusLeft="{x:Bind MyBtnLeft}"
            XYFocusRight="{x:Bind MyBtnRight}"
            XYFocusDown="{x:Bind MyBtnDown}"
            XYFocusUp="{x:Bind MyBtnTop}" />
</StackPanel>

Nesse caso, quando o foco estiver no botão Home e o usuário navegar para a esquerda, ele será movido para o botão MyBtnLeft; se o usuário navegar para a direita, será movido para o botão MyBtnRight; e assim por diante.

Para impedir que o foco se mova de um controle em uma determinada direção, use a XYFocus* propriedade para apontá-la para o mesmo controle:

<Button Name="HomeButton"  
        Content="Home"  
        XYFocusLeft ="{x:Bind HomeButton}" />

Usando essas XYFocus propriedades, um pai de controle também pode forçar a navegação de seus filhos quando o próximo candidato de foco estiver fora de sua árvore visual, a menos que o filho que tenha o foco use a mesma XYFocus propriedade.

<StackPanel Orientation="Horizontal" Margin="300,300">
    <UserControl XYFocusRight="{x:Bind ButtonThree}">
        <StackPanel>
            <Button Content="One"/>
            <Button Content="Two"/>
        </StackPanel>
    </UserControl>
    <StackPanel>
        <Button x:Name="ButtonThree" Content="Three"/>
        <Button Content="Four"/>
    </StackPanel>
</StackPanel>

No exemplo acima, se o foco estiver em Button Dois e o usuário navegar para a direita, o melhor candidato de foco será Button Quatro; no entanto, o foco será movido para Button Três porque o pai UserControl o força a navegar até lá quando estiver fora de sua árvore visual.

Caminho de cliques mínimos

Tente permitir que o usuário execute as tarefas mais comuns no menor número de cliques. No exemplo a seguir, o TextBlock é colocado entre o botão Reproduzir (que inicialmente obtém o foco) e um elemento comumente usado, de modo que um elemento desnecessário seja colocado entre tarefas prioritárias.

No exemplo a seguir, o TextBlock é colocado acima do botão Reproduzir em vez disso. Basta reorganizar a interface do usuário para que elementos desnecessários não sejam colocados entre tarefas prioritárias melhorará muito a usabilidade do aplicativo.

CommandBar e ContextFlyout

Ao usar um CommandBar, tenha em mente o problema de rolagem por uma lista, conforme mencionado em Problema: elementos de interface do usuário localizados após uma longa lista/grade de rolagem. A imagem a seguir mostra um layout de interface do usuário com a CommandBar na parte inferior de uma lista/grade. O usuário necessitaria rolar a lista/grade até o final para alcançar o CommandBar.

E se você colocar o CommandBaracima da lista/grade? Embora um usuário que tenha se deslocado para baixo na lista/grade tenha que se deslocar de volta para cima para alcançar o CommandBar, isso exige um pouco menos de navegação do que a configuração anterior. Observe que isso está supondo que o foco inicial do aplicativo seja colocado ao lado ou acima do CommandBar; essa abordagem não funcionará tão bem se o foco inicial estiver abaixo da lista/grade. Se esses CommandBar itens forem itens de ação globais que não precisam ser acessados com muita frequência (como um botão Sincronizar ), talvez seja aceitável tê-los acima da lista/grade.

Embora você não possa empilhar itens de um CommandBar verticalmente, colocá-los na direção contrária da rolagem (por exemplo, à esquerda ou à direita de uma lista de rolagem vertical ou na parte superior ou inferior de uma lista de rolagem horizontal) é outra opção que você pode querer considerar se funcionar bem para o layout da interface do usuário.

Se seu aplicativo tiver um CommandBar cujos itens precisam ser facilmente acessíveis pelos usuários, convém considerar colocar esses itens dentro de um ContextFlyout e removê-los do CommandBar. ContextFlyout é uma propriedade de UIElement e é o menu de contexto associado a esse elemento. No computador, quando você clicar com o botão direito do mouse em um elemento com ContextFlyout, o menu de contexto será exibido. No Xbox One, isso acontecerá quando você pressionar o botão Menu enquanto o foco estiver nesse elemento.

Desafios de layout da interface do usuário

Alguns layouts de interface do usuário são mais desafiadores devido à natureza da navegação de foco XY e devem ser avaliados caso a caso. Embora não haja uma única maneira "certa" e qual solução você escolher esteja de acordo com as necessidades específicas do seu aplicativo, há algumas técnicas que você pode empregar para fazer uma ótima experiência de TV.

Para entender melhor isso, vamos examinar um aplicativo imaginário que ilustra alguns desses problemas e técnicas para superá-los.

Veja a seguir um aplicativo imobiliário imaginário que mostra uma lista de casas disponíveis para venda, um mapa, uma descrição de uma propriedade e outras informações. Este aplicativo apresenta três desafios que você pode superar usando as seguintes técnicas:

• Reorganizar a interface do usuário
• Engajamento focado
• Modo do mouse

Problema: elementos de interface do usuário localizados após lista/grade de rolagem longa

O ListView das propriedades mostrado na imagem seguinte é uma lista de rolagem muito longa. Se o envolvimentonão for necessário na ListView, quando o usuário navegar para a lista, o foco será colocado no primeiro item da lista. Para que o usuário acesse o botão Anterior ou Próximo , ele deve percorrer todos os itens da lista. Em casos como este em que exigir que o usuário percorra toda a lista é doloroso, ou seja, quando a lista não é curta o suficiente para que essa experiência seja aceitável, talvez você queira considerar outras opções.

Solutions

Reorganizar a interface do usuário

A menos que seu foco inicial seja colocado na parte inferior da página, os elementos de interface do usuário colocados acima de uma lista de rolagem longa normalmente são mais facilmente acessíveis do que se colocados abaixo. Se esse novo layout funcionar para outros dispositivos, alterar o layout para todas as famílias de dispositivos em vez de fazer alterações especiais de interface do usuário apenas para Xbox One pode ser uma abordagem menos dispendiosa. Além disso, colocar elementos de interface do usuário contra a direção de rolagem (ou seja, horizontalmente para uma lista de rolagem vertical ou verticalmente para uma lista de rolagem horizontal) melhorará ainda mais a acessibilidade.

Compromisso de foco

Quando o engajamento é necessário, o todo ListView se torna um único destino de foco. O usuário poderá ignorar o conteúdo da lista para chegar ao próximo elemento focalizável. Leia mais sobre quais controles dão suporte ao envolvimento e como usá-los no focus engagement.

Problema: ScrollViewer sem elementos focalizáveis

Como a navegação de foco XY depende de navegar para um elemento de interface do usuário focalizável por vez, um ScrollViewer que não contém elementos focalizáveis (como um com apenas texto, como neste exemplo) pode causar um cenário em que o usuário não é capaz de exibir todo o conteúdo no ScrollViewer. Para obter soluções para esse e outros cenários relacionados, consulte Focus engagement.

Problema: UI de rolagem livre

Quando seu aplicativo requer uma interface do usuário que permita rolagem livre, como uma superfície de desenho ou, no caso, um mapa, a navegação de foco XY simplesmente não funciona. Nesses casos, você pode ativar o modo do mouse para permitir que o usuário navegue livremente dentro de um elemento de interface do usuário.

Modo do mouse

Conforme descrito em navegação e interação com foco XY, no Xbox One o foco é movido usando um sistema de navegação XY, permitindo que o usuário mude o foco entre controles movendo-se para cima, para baixo, para a esquerda e para a direita. No entanto, alguns controles, como WebView e MapControl, exigem uma interação semelhante ao mouse em que os usuários podem mover livremente o ponteiro dentro dos limites do controle. Há também alguns aplicativos em que faz sentido que o usuário possa mover o ponteiro por toda a página, tendo uma experiência com gamepad/remoto semelhante ao que os usuários podem encontrar em um computador com um mouse.

Para esses cenários, você deve solicitar um ponteiro (modo de mouse) para toda a página ou em um controle dentro de uma página. Por exemplo, seu aplicativo pode ter uma página que tem um WebView controle que usa o modo do mouse apenas enquanto estiver dentro do controle e navegação de foco XY em todos os outros lugares. Para solicitar um ponteiro, você pode especificar se deseja quando um controle ou página está envolvido ou quando uma página tem foco.

Para aplicativos XAML e aplicativos Web hospedados em execução no Xbox One, o modo de mouse é ativado por padrão para todo o aplicativo. É altamente recomendável desativar isso e otimizar seu aplicativo para navegação XY. Para fazer isso, defina a propriedade Application.RequiresPointerMode como WhenRequested para que você só habilite o modo do mouse quando um controle ou uma página o chamar.

Para fazer isso em um aplicativo XAML, use o seguinte código em sua App classe:

public App()
{
    this.InitializeComponent();
    this.RequiresPointerMode =
        Windows.UI.Xaml.ApplicationRequiresPointerMode.WhenRequested;
    this.Suspending += OnSuspending;
}

Para obter mais informações, incluindo o código de exemplo para HTML/JavaScript, consulte Como desabilitar o modo do mouse.

O diagrama a seguir mostra os mapeamentos de botão para gamepad/remoto no modo de mouse.

Use a propriedade RequiresPointer em um controle ou página para ativar o modo do mouse nele. Essa propriedade tem três valores possíveis: Never (o valor padrão) WhenEngagede WhenFocused.

Ativando o modo do mouse em um controle

Quando o usuário ativa um controle com RequiresPointer="WhenEngaged", o modo do mouse é ativado no controle até que o usuário o desative. O snippet de código a seguir demonstra um simples MapControl que ativa o modo do mouse quando acionado.

<Page>
    <Grid>
        <MapControl IsEngagementRequired="true"
                    RequiresPointer="WhenEngaged"/>
    </Grid>
</Page>

Quando um controle estiver no modo de mouse, seus controles aninhados também estarão no modo do mouse. O modo solicitado de seus filhos será ignorado– é impossível que um pai esteja no modo de mouse, mas um filho não esteja.

Além disso, o modo solicitado de um controle só é inspecionado quando obtém o foco, de modo que o modo não será alterado dinamicamente enquanto ele tiver foco.

Ativando o modo do mouse em uma página

Quando uma página possui a propriedade RequiresPointer="WhenFocused", o modo do mouse será ativado para toda a página ao receber o foco. O snippet de código a seguir demonstra como fornecer a uma página esta propriedade:

<Page RequiresPointer="WhenFocused">
    ...
</Page>

Desabilitando o modo do mouse para conteúdo em tela inteira

Normalmente, ao exibir vídeos ou outros tipos de conteúdo em tela inteira, você desejará ocultar o cursor porque ele pode distrair o usuário. Esse cenário ocorre quando o restante do aplicativo usa o modo do mouse, mas você deseja desativá-lo ao mostrar conteúdo em tela inteira. Para fazer isso, coloque o conteúdo em tela inteira em um próprio Page, e siga as etapas abaixo.

1. No objeto App, defina RequiresPointerMode="WhenRequested".
2. Em todos os Page objetos , exceto na tela Pageinteira, defina RequiresPointer="WhenFocused".
3. Para a tela inteira Page, defina RequiresPointer="Never".

Dessa forma, o cursor nunca aparecerá ao mostrar conteúdo em tela inteira.

Foco visual

O visual de foco é a borda ao redor do elemento de interface do usuário que atualmente tem foco. Isso ajuda a orientar o usuário para que ele possa navegar facilmente na interface do usuário sem se perder.

Com uma atualização visual e várias opções de personalização adicionadas ao visual de foco, os desenvolvedores podem confiar que um único visual de foco funcionará bem em computadores e Xbox One, bem como em qualquer outro dispositivo Windows que dê suporte a teclado e/ou gamepad/remote.

Embora o mesmo visual de foco possa ser usado em diferentes plataformas, o contexto no qual o usuário o encontra é um pouco distinto na experiência de 10 pés. Você deve assumir que o usuário não está prestando atenção total a toda a tela de TV e, portanto, é importante que o elemento atualmente focado esteja claramente visível para o usuário em todos os momentos para evitar a frustração de procurar o visual.

Também é importante ter em mente que o visual de foco é exibido por padrão ao usar um gamepad ou controle remoto, mas não um teclado. Portanto, mesmo se você não implementá-lo, ele será exibido quando você executar seu aplicativo no Xbox One.

Posicionamento visual de foco inicial

Ao iniciar um aplicativo ou navegar até uma página, coloque o foco em um elemento de interface do usuário que faz sentido como o primeiro elemento no qual o usuário agiria. Por exemplo, um aplicativo de fotos pode colocar o foco no primeiro item da galeria, enquanto um aplicativo de música, ao navegar para uma visualização detalhada de uma música, pode concentrar o foco no botão de reproduzir para facilitar a execução da música.

Tente colocar o foco inicial na região superior esquerda do aplicativo (ou no canto superior direito para um fluxo da direita para a esquerda). A maioria dos usuários tende a se concentrar nesse canto primeiro porque é aí que o fluxo de conteúdo do aplicativo geralmente começa.

Tornando o foco claramente visível

Um visual de foco deve estar sempre visível na tela para que o usuário possa continuar de onde parou sem procurar o foco. Da mesma forma, deve haver um item focalizável na tela o tempo todo— por exemplo, não use pop-ups apenas com texto e sem elementos focalizáveis.

Uma exceção a essa regra seria para experiências em tela inteira, como assistir a vídeos ou visualizar imagens, nos quais não seria apropriado mostrar o visual de foco.

Revelar foco

O foco de revelação é um efeito de iluminação que anima a borda de elementos focalizáveis, como um botão, quando o usuário move o foco do gamepad ou teclado para eles. Ao animar o brilho ao redor da borda dos elementos focados, destacar o foco dá aos usuários uma melhor compreensão de onde o foco está e para onde está se dirigindo.

A função de foco de revelação está desativada por padrão. Para experiências em telas grandes (de cerca de 10 pés), você deve optar por ativar a visualização do foco definindo a propriedade Application.FocusVisualKind no construtor do aplicativo.

    if(AnalyticsInfo.VersionInfo.DeviceFamily == "Windows.Xbox")
    {
        this.FocusVisualKind = FocusVisualKind.Reveal;
    }

Para obter mais informações, consulte as diretrizes para foco de destaque.

Personalizando o visual de foco

Se você quiser personalizar o visual de foco, poderá fazer isso modificando as propriedades relacionadas ao visual de foco para cada controle. Há várias dessas propriedades que você pode aproveitar para personalizar seu aplicativo.

Você pode até mesmo optar por não usar os visuais de foco fornecidos pelo sistema desenhando seus próprios visuais de foco com estados visuais. Para saber mais, consulte VisualState.

Sobreposição leve de descarte

Para chamar a atenção do usuário para os elementos de interface do usuário que o usuário está manipulando no momento com o controlador de jogo ou controle remoto, a UWP adiciona automaticamente uma camada de "fumaça" que abrange áreas fora da interface do usuário pop-up quando o aplicativo está em execução no Xbox One. Isso não requer nenhum trabalho extra, mas é algo a ter em mente ao projetar sua interface do usuário. Você pode definir a LightDismissOverlayMode propriedade em qualquer FlyoutBase para habilitar ou desabilitar a camada de fumaça; por padrão, Auto significa que ela está habilitada no Xbox e desabilitada em outros lugares. Para obter mais informações, consulte Modal vs light dismiss.

Compromisso de foco

O foco no engajamento destina-se a facilitar o uso de um gamepad ou controle para interagir com um aplicativo.

Quando a propriedade IsFocusEngagementEnabled em um objeto FrameworkElement é definida como True, ela marca o controle como exigindo envolvimento de foco. Isso significa que o usuário deve pressionar o botão A/Selecionar para "envolver" o controle e interagir com ele. Quando terminarem, eles poderão pressionar o botão B/Voltar para desativar o controle e navegar para fora dele.

Captura de foco

A captura de foco é o que acontece quando um usuário tenta navegar na interface do usuário de um aplicativo, mas fica "preso" em um controle, tornando difícil ou até mesmo impossível sair desse controle.

O exemplo a seguir mostra uma interface de usuário que cria foco preso.

Se o usuário quiser navegar do botão esquerdo para o botão direito, seria lógico supor que tudo o que ele teria que fazer é pressionar o botão D/esquerda duas vezes. No entanto, se o Controle Deslizante não exigir envolvimento, o seguinte comportamento ocorrerá: quando o usuário pressionar a tecla da direita pela primeira vez, o foco mudará para o Slider, e, ao pressioná-la novamente, a alça do Slider se moverá para a direita. O usuário continuaria movendo a haste para a direita e não seria capaz de alcançar o botão.

Há várias abordagens para contornar esse problema. Uma delas é projetar um layout diferente, semelhante ao exemplo de aplicativo imobiliário na navegação e interação de foco XY em que realocamos os botões Anterior e Próximo acima do ListView. Empilhar os controles verticalmente em vez de horizontalmente como na imagem a seguir resolveria o problema.

Agora, o usuário pode navegar até cada um dos controles pressionando para cima e para baixo no D-pad/analógico esquerdo, e, quando o Slider estiver em foco, poderá pressionar para a esquerda e para a direita para mover a alavanca Slider, como esperado.

Outra abordagem para resolver esse problema é exigir engajamento no Slider. Se você definir IsFocusEngagementEnabled="True", isso resultará no comportamento a seguir.

Quando o Slider necessita de foco, o usuário pode acessar o botão à direita simplesmente pressionando duas vezes à direita no direcional ou no analógico. Essa solução é ótima porque não requer nenhum ajuste de interface do usuário e produz o comportamento esperado.

Controles de itens

Além do controle deslizante, há outros controles nos quais você talvez queira exigir interação, como:

• Caixa de Listagem
• ListView
• GridView
• FlipView

Ao contrário do controle Slider, esses controles não interceptam o foco dentro de si; no entanto, eles podem causar problemas de usabilidade quando contêm grandes volumes de dados. Veja a seguir um exemplo de um ListView que contém uma grande quantidade de dados.

Semelhante ao Slider exemplo, vamos tentar navegar do botão na parte superior até o botão na parte inferior com um gamepad/remoto. Começando com o foco no botão superior, pressionar para baixo no D-pad/stick colocará o foco no primeiro item no ListView ("Item 1"). Quando o usuário pressiona para baixo novamente, o próximo item da lista obtém o foco, não o botão na parte inferior. Para chegar ao botão, o usuário deve navegar por todos os itens no ListView primeiro. Se ele ListView contiver uma grande quantidade de dados, isso poderá ser inconveniente e não uma experiência de usuário ideal.

Para resolver esse problema, defina a propriedade IsFocusEngagementEnabled="True" no ListView para exigir envolvimento nele. Isso permitirá que o usuário ignore rapidamente a ListView tecla simplesmente pressionando para baixo. No entanto, eles não poderão rolar pela lista ou escolher um item dela, a menos que o ativem pressionando o botão A/Selecionar quando ele tiver foco, e em seguida, pressionem o botão B/Voltar para parar de interagir.

Visualizador de rolagem

Um pouco diferente desses controles é o ScrollViewer, que tem suas próprias peculiaridades a considerar. Por padrão, se você tiver um ScrollViewer com conteúdo focável, navegar até o ScrollViewer permitirá que você passe por seus elementos focáveis. Como em um ListView, você deve deslizar por cada item para navegar para fora do ScrollViewer.

Se o ScrollViewer não tiver conteúdo focalizável — por exemplo, se ele contiver apenas texto — você poderá definir IsFocusEngagementEnabled="True" para que o usuário possa interagir com o ScrollViewer usando o botão A/Select. Depois de interagirem, eles podem rolar pelo texto usando o D-pad/analógico esquerdo e, em seguida, pressionar o botão B/Voltar para desengajar quando terminarem.

Outra abordagem seria configurar IsTabStop="True" no ScrollViewer para que o usuário não precise acionar o controle; ele pode simplesmente focá-lo e então rolar usando o D-pad/stick esquerdo quando não houver elementos focalizáveis dentro do ScrollViewer.

Configurações padrão de engajamento em foco

Alguns controles fazem com que o foco fique preso normalmente o suficiente para garantir que suas configurações padrão exijam engajamento de foco, enquanto outros têm o envolvimento de foco desativado por padrão, mas podem se beneficiar de ativá-lo. A tabela a seguir lista esses controles e seus comportamentos de envolvimento de foco padrão.

Todos os outros controles do Windows não resultarão em alterações comportamentais ou visuais quando IsFocusEngagementEnabled="True".

Resumo

Você pode criar aplicativos do Windows otimizados para um dispositivo ou experiência específico, mas a Plataforma Universal do Windows também permite criar aplicativos que podem ser usados com êxito em dispositivos, em experiências de 2 pés e 10 pés, e independentemente da capacidade do dispositivo ou do usuário de entrada. Usar as recomendações neste artigo pode garantir que seu aplicativo seja tão bom quanto pode ser na TV e em um computador.

Artigos relacionados

• Projetando para TV e Xbox
• Guia de dispositivos para aplicativos do Windows