Projetando para Xbox e TV

Projete seu aplicativo do Windows para que ele fique bem e funcione bem nas telas xbox one e de televisão.

Consulte interações de gamepad e controle remoto para obter diretrizes sobre experiências de interação em aplicativos UWP na experiência de 10 pés .

Visão geral

A Plataforma Universal do Windows permite que você crie experiências deliciosas em vários dispositivos Windows. A maior parte da funcionalidade fornecida pela estrutura UWP permite que os aplicativos usem a mesma interface do usuário (interface do usuário) nesses dispositivos, sem trabalho adicional. No entanto, a personalização e a otimização do aplicativo para funcionarem bem nas telas Xbox One e TV requer considerações especiais.

A experiência de sentar em seu sofá do outro lado da sala, usando um gamepad ou controle remoto para interagir com sua TV, é chamada de experiência de 10 pés. Ele é tão nomeado porque o usuário geralmente está sentado a aproximadamente 3 metros da tela. Isso apresenta desafios exclusivos que não estão presentes na, digamos, experiência de 2 pés, ou ao interagir com um computador. Se você estiver desenvolvendo um aplicativo para Xbox One ou qualquer outro dispositivo que seja enviado para a tela de TV e use um controlador para entrada, você sempre deverá ter isso em mente.

Nem todas as etapas neste artigo são necessárias para fazer seu aplicativo funcionar bem para experiências de 3 metros, mas compreendê-las e tomar as decisões apropriadas para seu aplicativo resultará em uma melhor experiência de 3 metros adaptada para as necessidades específicas do seu aplicativo. À medida que você dá vida ao seu aplicativo no ambiente de 3 metros, considere os princípios de design a seguir.

Simples

Projetar para o ambiente de 3 metros apresenta um conjunto único de desafios. A resolução e a distância de exibição podem dificultar o processamento excessivo de informações pelas pessoas. Tente manter seu design limpo, reduzido aos componentes mais simples possíveis. A quantidade de informações exibidas em uma TV deve ser comparável ao que você veria em um celular, em vez de em um computador.

Coerente

Os aplicativos UWP no ambiente de 3 metros devem ser intuitivos e fáceis de usar. Deixe o foco claro e inconfundível. Organize o conteúdo para que o movimento pelo espaço seja consistente e previsível. Dê às pessoas o caminho mais curto para o que elas querem fazer.

Todos os filmes mostrados na captura de tela estão disponíveis no Microsoft Movies &tv.

Cativante

As experiências cinematográficas mais imersivas ocorrem na tela grande. Cenários de borda a borda, movimento elegante e uso vibrante de cor e tipografia levam seus aplicativos para o próximo nível. Seja ousada e bonita.

Otimizações para a experiência de 3 metros

Agora que você conhece os princípios de um bom design de aplicativos UWP para a experiência de 10 pés, leia a seguinte visão geral das maneiras específicas de otimizar seu aplicativo e proporcionar uma ótima experiência do usuário.

Além das considerações de design e layout anteriores, há uma série de gamepad e interação de controle remoto otimizações que você deve considerar ao criar seu aplicativo.

Dimensionamento do elemento de interface do usuário

Como o usuário de um aplicativo no ambiente de 3 metros está usando um controle remoto ou gamepad e está sentado a vários metros da tela, há algumas considerações de interface do usuário que precisam ser consideradas no seu design. Verifique se a interface do usuário tem uma densidade de conteúdo apropriada e não está muito confusa para que o usuário possa navegar e selecionar facilmente os elementos. Lembre-se: simplicidade é a chave.

Fator de escala e layout adaptável

O fator de escala ajuda a garantir que os elementos da interface do usuário sejam exibidos com o dimensionamento certo para o dispositivo no qual o aplicativo está em execução. Na área de trabalho, essa configuração pode ser encontrada em Configurações > Sistema > Display como um valor deslizante. Essa mesma configuração também existe no telefone se o dispositivo der suporte a ele.

No Xbox One, não há essa configuração de sistema; no entanto, para que os elementos de interface do usuário UWP sejam dimensionados adequadamente para TV, eles são dimensionados em um padrão de 200% para aplicativos XAML e 150% para aplicativos HTML. Desde que os elementos da interface do usuário sejam dimensionados adequadamente para outros dispositivos, eles serão dimensionados adequadamente para TV. O Xbox One renderiza seu aplicativo em 1080p (1920 x 1080 pixels). Portanto, ao trazer um aplicativo de outros dispositivos, como PC, verifique se a interface do usuário aparenta excelente em 960 x 540 px a 100% escala (ou 1280 x 720 px a 100% escala para aplicativos HTML) utilizando técnicas adaptativas.

Projetar para Xbox é um pouco diferente do design para pc, pois você só precisa se preocupar com uma resolução, 1920 x 1080. Não importa se o usuário tem uma TV com melhor resolução, os aplicativos UWP sempre serão dimensionados para 1080p.

Os tamanhos corretos dos ativos do conjunto 200% (ou 150% para aplicativos HTML) também serão extraídos para seu aplicativo ao rodar no Xbox One, independentemente da resolução da TV.

Densidade de conteúdo

Ao projetar seu aplicativo, lembre-se de que o usuário verá a interface do usuário à distância e interagirá com ela usando um controle remoto ou controle de jogo, o que leva mais tempo para navegar do que usar mouse ou toque.

Tamanhos de controles de interface do usuário

Elementos interativos da interface do usuário devem ser dimensionados a uma altura mínima de 32 epx (pixels efetivos). Esse é o padrão para controles UWP comuns e, quando usado em 200% escala, garante que os elementos da interface do usuário estejam visíveis à distância e ajude a reduzir a densidade de conteúdo.

Número de cliques

Quando o usuário está navegando de uma borda da tela de TV para a outra, não deve levar mais do que seis cliques, visando simplificar sua interface. Novamente, o princípio da simplicidade se aplica aqui.

Tamanhos de texto

Para tornar sua interface do usuário visível à distância, use as seguintes regras:

• Texto principal e conteúdo de leitura: mínimo de 15 epx
• Texto não crítico e conteúdo suplementar: mínimo de 12 epx

Ao utilizar um texto maior em sua interface do usuário, escolha um tamanho que não ocupe muito espaço da tela, permitindo que outros conteúdos possam preenchê-lo potencialmente.

Recusar-se a usar o fator de escala

Recomendamos que seu aplicativo aproveite o suporte ao fator de escala, o que o ajudará a ser executado adequadamente em todos os dispositivos dimensionando para cada tipo de dispositivo. No entanto, é possível desativar esse comportamento e projetar toda a sua interface do usuário em escala de 100%%. Observe que você não pode alterar o fator de escala para nada além de 100%.

Para aplicativos XAML, você pode recusar o fator de escala usando o seguinte snippet de código:

bool result =
    Windows.UI.ViewManagement.ApplicationViewScaling.TrySetDisableLayoutScaling(true);

result informará se você cancelou a inscrição com sucesso.

Para obter mais informações, incluindo o código de exemplo para HTML/JavaScript, consulte Como desativar o dimensionamento.

Calcule os tamanhos apropriados dos elementos da interface do usuário dobrando o valores efetivos de pixel mencionados neste tópico para valores reais de pixel (ou multiplicando por 1,5 para aplicativos HTML).

Área segura para TV

Nem todas as TVs exibem conteúdo até as bordas da tela devido a motivos históricos e tecnológicos. Por padrão, a UWP evitará exibir qualquer conteúdo da interface do usuário em áreas não seguras de TV e, em vez disso, desenhará apenas a tela de fundo da página.

A área não segura de TV é representada pela área azul na imagem a seguir.

Você pode definir a tela de fundo como uma cor estática ou temática ou para uma imagem, como demonstram os snippets de código a seguir.

Cor de tema

<Page x:Class="Sample.MainPage"
      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"/>

Imagem

<Page x:Class="Sample.MainPage"
      Background="\Assets\Background.png"/>

É assim que seu aplicativo será sem trabalho adicional.

Isso não é ideal porque dá ao aplicativo um efeito de "restrição", com partes da interface, como o painel de navegação e a grade, aparentemente cortadas. No entanto, você pode fazer otimizações para estender partes da interface do usuário até as bordas da tela para dar ao aplicativo um efeito mais cinematográfico.

Desenhando a interface do usuário até as extremidades

Recomendamos que você use certos elementos da interface do usuário para se estenderem até as bordas da tela, proporcionando maior imersão ao usuário. Eles incluem ScrollViewers, painéis de navegação e CommandBars.

Por outro lado, também é importante que elementos interativos e texto sempre evitem as bordas da tela para garantir que eles não sejam cortados em algumas TVs. Recomendamos que você desenhe apenas visuais não essenciais dentro de 5% das bordas da tela. Conforme mencionado no dimensionamento de elementos de interface do usuário, um aplicativo UWP seguindo o fator de escala padrão do console Xbox One de 200% utilizará uma área de 960 x 540 epx, portanto, na interface do usuário do aplicativo, você deve evitar colocar a interface do usuário essencial nas seguintes áreas:

• 27 epx da parte superior e inferior
• 48 epx dos lados esquerdo e direito

As seções a seguir descrevem como fazer sua interface do usuário se estender até as bordas da tela.

Limites da janela principal

Para aplicativos UWP que são direcionados exclusivamente à experiência de 3 metros, usar limites fundamentais da janela é uma opção mais simples.

OnLaunched No método de App.xaml.cs, adicione o seguinte código:

Windows.UI.ViewManagement.ApplicationView.GetForCurrentView().SetDesiredBoundsMode
    (Windows.UI.ViewManagement.ApplicationViewBoundsMode.UseCoreWindow);

Com essa linha de código, a janela do aplicativo se estenderá até as bordas da tela, portanto, você precisará mover toda a interface do usuário interativa e essencial para a área segura de TV descrita anteriormente. A interface do usuário transitória, como menus de contexto e aberta comboBoxes, permanecerá automaticamente dentro da área segura de TV.

limites da janela

Planos de fundo do painel

Os painéis de navegação normalmente são posicionados perto da borda da tela, portanto, a tela de fundo deve se estender para a área insegura da TV para evitar lacunas indesejadas. Você pode fazer isso simplesmente alterando a cor da tela de fundo do painel de navegação para a cor da tela de fundo do aplicativo.

Usar os limites da janela principal, conforme descrito anteriormente, permitirá que você desenhe sua interface do usuário para as bordas da tela, mas você deve usar margens positivas no conteúdo doSplitView para mantê-la dentro da área segura de TV.

Aqui, o plano de fundo do painel de navegação foi estendido para as bordas da tela, enquanto os itens de navegação são mantidos na área segura de TV. O conteúdo do SplitView (neste caso, uma grade de itens) foi estendido para a parte inferior da tela para que pareça contínuo e não cortado, enquanto a parte superior da grade ainda está dentro da área segura de TV. (Saiba mais sobre como fazer isso em Rolagem até o fim de listas e grelhas).

O snippet de código a seguir obtém esse efeito:

<SplitView x:Name="RootSplitView"
           Margin="48,0,48,0">
    <SplitView.Pane>
        <ListView x:Name="NavMenuList"
                  ContainerContentChanging="NavMenuItemContainerContentChanging"
                  ItemContainerStyle="{StaticResource NavMenuItemContainerStyle}"
                  ItemTemplate="{StaticResource NavMenuItemTemplate}"
                  ItemInvoked="NavMenuList_ItemInvoked"
                  ItemsSource="{Binding NavMenuListItems}"/>
    </SplitView.Pane>
    <Frame x:Name="frame"
           Navigating="OnNavigatingToPage"
           Navigated="OnNavigatedToPage"/>
</SplitView>

CommandBar é outro exemplo de um painel que normalmente é posicionado perto de uma ou mais bordas do aplicativo e, como tal, na TV, sua tela de fundo deve se estender até as bordas da tela. Ele também geralmente contém um botão Mais, representado por "..." no lado direito, que deve permanecer na área segura de TV. Veja a seguir algumas estratégias diferentes para alcançar as interações e os efeitos visuais desejados.

Opção 1: altere a cor da CommandBar tela de fundo para transparente ou a mesma cor da tela de fundo da página:

<CommandBar x:Name="topbar"
            Background="{ThemeResource SystemControlBackgroundAltHighBrush}">
            ...
</CommandBar>

Fazer isso fará com que a CommandBar pareça que está acima do mesmo fundo que o restante da página, de modo que o fundo flua de forma suave para as bordas da página.

Opção 2: adicionar um retângulo de plano de fundo cujo preenchimento é da mesma cor do CommandBar fundo, posicionado abaixo do CommandBar e cobrindo o restante da página.

<Rectangle VerticalAlignment="Top"
            HorizontalAlignment="Stretch"      
            Fill="{ThemeResource SystemControlBackgroundChromeMediumBrush}"/>
<CommandBar x:Name="topbar"
            VerticalAlignment="Top"
            HorizontalContentAlignment="Stretch">
            ...
</CommandBar>

Essas duas abordagens também se aplicam aos outros tipos de controles listados nesta seção.

Rolagem de extremidades de listas e grades

É comum que listas e grades contenham mais itens do que podem caber na tela ao mesmo tempo. Quando esse for o caso, recomendamos estender a lista ou a grade até a borda da tela. As listas e grades de rolagem horizontal devem se estender até a borda direita e as de rolagem vertical devem se estender até a parte inferior.

Embora uma lista ou grade seja estendida assim, é importante manter o foco visual e seu respectivo item dentro da área segura para TV.

A UWP tem funcionalidade que manterá o visual de foco dentro do VisibleBounds, mas você precisa adicionar preenchimento para garantir que os itens da lista/grade possam rolar para a área visível e segura. Especificamente, você adiciona uma margem positiva ao ListView ou ItemsPresenterdo GridView, como no seguinte snippet de código:

<Style x:Key="TitleSafeListViewStyle"
       TargetType="ListView">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListView">
                <Border BorderBrush="{TemplateBinding BorderBrush}"
                        Background="{TemplateBinding Background}"
                        BorderThickness="{TemplateBinding BorderThickness}">
                    <ScrollViewer x:Name="ScrollViewer"
                                  TabNavigation="{TemplateBinding TabNavigation}"
                                  HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
                                  HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                                  IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}"
                                  VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
                                  VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                                  IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}"
                                  IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
                                  IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
                                  ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}"
                                  IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
                                  BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}"
                                  AutomationProperties.AccessibilityView="Raw">
                        <ItemsPresenter Header="{TemplateBinding Header}"
                                        HeaderTemplate="{TemplateBinding HeaderTemplate}"
                                        HeaderTransitions="{TemplateBinding HeaderTransitions}"
                                        Footer="{TemplateBinding Footer}"
                                        FooterTemplate="{TemplateBinding FooterTemplate}"
                                        FooterTransitions="{TemplateBinding FooterTransitions}"
                                        Padding="{TemplateBinding Padding}"
                                        Margin="0,27,0,27"/>
                    </ScrollViewer>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Você colocaria o snippet de código anterior nos recursos da página ou do aplicativo e o acessaria da seguinte maneira:

<Page>
    <Grid>
        <ListView Style="{StaticResource TitleSafeListViewStyle}"
                  ... />

Para obter um controle mais refinado sobre como os itens são colocados em exibição, se o aplicativo for destinado à versão 1803 ou posterior, você poderá usar o evento UIElement.BringIntoViewRequested. Você pode colocá-lo no ItemsPanel para o ListView/GridView para capturá-lo antes que o ScrollViewer interno o faça, como nos seguintes trechos de código:

<GridView x:Name="gridView">
    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsWrapGrid Orientation="Horizontal"
                           BringIntoViewRequested="ItemsWrapGrid_BringIntoViewRequested"/>
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>
</GridView>

// The BringIntoViewRequested event is raised by the framework when items receive keyboard (or Narrator) focus or 
// someone triggers it with a call to UIElement.StartBringIntoView.
private void ItemsWrapGrid_BringIntoViewRequested(UIElement sender, BringIntoViewRequestedEventArgs args)
{
    if (args.VerticalAlignmentRatio != 0.5)  // Guard against our own request
    {
        args.Handled = true;
        // Swallow this request and restart it with a request to center the item.  We could instead have chosen
        // to adjust the TargetRect's Y and Height values to add a specific amount of padding as it bubbles up, 
        // but if we just want to center it then this is easier.

        // (Optional) Account for sticky headers if they exist
        var headerOffset = 0.0;
        var itemsWrapGrid = sender as ItemsWrapGrid;
        if (gridView.IsGrouping && itemsWrapGrid.AreStickyGroupHeadersEnabled)
        {
            var header = gridView.GroupHeaderContainerFromItemContainer(args.TargetElement as GridViewItem);
            if (header != null)
            {
                headerOffset = ((FrameworkElement)header).ActualHeight;
            }
        }

        // Issue a new request
        args.TargetElement.StartBringIntoView(new BringIntoViewOptions()
        {
            AnimationDesired = true,
            VerticalAlignmentRatio = 0.5, // a normalized alignment position (0 for the top, 1 for the bottom)
            VerticalOffset = headerOffset, // applied after meeting the alignment ratio request
        });
    }
}

Cores

Por padrão, a Plataforma Universal do Windows dimensiona as cores do aplicativo para o intervalo seguro de TV (consulte cores seguras para TV para obter mais informações) para que seu aplicativo fique bem em qualquer TV. Além disso, há melhorias que você pode fazer no conjunto de cores que seu aplicativo usa para melhorar a experiência visual na TV.

Tema do aplicativo

Você pode escolher um tema de aplicativo (escuro ou claro) de acordo com o que for mais adequado para seu aplicativo, ou pode optar por não aplicar tema algum. Leia mais sobre recomendações gerais para temas nas cores .

A UWP também permite que os aplicativos definam dinamicamente o tema com base nas configurações do sistema fornecidas pelos dispositivos nos quais eles são executados. Embora a UWP sempre respeite as configurações de tema especificadas pelo usuário, cada dispositivo também fornece um tema padrão apropriado. Devido à natureza do Xbox One, que deve ter mais experiências de mídia do que experiências de produtividade, ele usa como padrão um tema de sistema escuro. Se o tema do aplicativo for baseado nas configurações do sistema, espere que ele fique escuro no Xbox One.

Cor de destaque

A UWP fornece uma maneira conveniente de expor a cor de ênfase selecionada pelo usuário nas configurações do sistema.

No Xbox One, o usuário pode selecionar uma cor de usuário, assim como pode selecionar uma cor de destaque em um computador. Desde que seu aplicativo chame essas cores de destaque por meio de pincéis ou recursos de cor, a cor selecionada pelo usuário nas configurações do sistema será usada. Observe que as cores de destaque no Xbox One são por usuário, não por sistema.

Observe também que o conjunto de cores do usuário no Xbox One não é o mesmo que em computadores, telefones e outros dispositivos.

Contanto que o seu aplicativo use um recurso de pincel, como SystemControlForegroundAccentBrush, ou um recurso de cor (SystemAccentColor), ou, alternativamente, chame cores de destaque diretamente por meio da API UIColorType.Accent*, esses tons serão substituídos pelas cores de destaque disponíveis no Xbox One. As cores de pincel de alto contraste também são extraídas do sistema da mesma maneira que em um computador e telefone.

Para saber mais sobre cor de destaque em geral, consulte Cor de destaque.

Variação de cor entre TVs

Ao projetar para TV, observe que as cores são exibidas de forma bem diferente, dependendo da TV na qual são renderizadas. Não suponha que as cores sejam exatamente como no monitor. Se o aplicativo depender de diferenças sutis de cor para diferenciar partes da interface do usuário, as cores poderão se misturar e os usuários poderão ficar confusos. Tente usar cores diferentes o suficiente para que os usuários possam diferenciá-las claramente, independentemente da TV que estão usando.

Cores seguras para TV

Os valores RGB de uma cor representam intensidades para vermelho, verde e azul. As TVs não lidam muito bem com intensidades extremas — podem produzir um efeito de faixas estranho ou parecer desbotadas em determinadas TVs. Além disso, cores de alta intensidade podem causar florescimento (pixels próximos começam a desenhar as mesmas cores). Embora existam diferentes escolas de pensamento no que são consideradas cores seguras para TV, as cores dentro dos valores RGB de 16-235 (ou 10-EB em hexadecimal) são geralmente seguras de usar para TV.

Historicamente, os aplicativos no Xbox tinham que adaptar suas cores para se enquadrarem nesse intervalo de cores "seguro para TV"; no entanto, começando com o Fall Creators Update, o Xbox One dimensiona automaticamente o conteúdo de intervalo completo para o intervalo seguro de TV. Isso significa que a maioria dos desenvolvedores de aplicativos não precisa mais se preocupar com cores seguras de TV.

Se você estiver desenvolvendo um aplicativo usando DirectX 11 ou DirectX 12 e criando sua própria cadeia de troca para renderizar a interface do usuário ou vídeo, poderá especificar o espaço de cores usado chamando IDXGISwapChain3::SetColorSpace1, que informará ao sistema se ele precisa dimensionar cores ou não.

Diretrizes para controles de interface do usuário

Há vários controles de interface do usuário que funcionam bem em vários dispositivos, mas têm certas considerações quando usados na TV. Leia sobre algumas das melhores práticas para usar esses controles ao projetar para a experiência de 3 metros.

Painel de Navegação

Um painel de navegação (também conhecido como menu de hambúrguer ) é um controle de navegação comumente usado em aplicativos UWP. Normalmente, é um painel com várias opções para escolher em um menu de estilo de lista que levará o usuário para páginas diferentes. Geralmente, esse painel começa recolhido para economizar espaço e o usuário pode abri-lo clicando em um botão.

Embora os painéis de navegação sejam muito acessíveis com mouse e toque, o gamepad/remote os torna menos acessíveis, pois o usuário precisa navegar até um botão para abrir o painel. Portanto, uma boa prática é fazer com que o botão Exibir abra o painel de navegação, bem como permitir que o usuário o abra navegando até a esquerda da página. Exemplo de código sobre como implementar esse padrão de projeto pode ser encontrado no documento de navegação programática de foco . Isso fornecerá ao usuário acesso muito fácil ao conteúdo do painel. Para obter mais informações sobre como os painéis de navegação se comportam em diferentes tamanhos de tela, bem como práticas recomendadas para navegação remota/gamepad, consulte painéis de navegação.

Rótulos da Barra de Comandos

É uma boa ideia ter os rótulos colocados à direita dos ícones em um CommandBar para que sua altura seja minimizada e permaneça consistente. Você pode fazer isso definindo a propriedade CommandBar.DefaultLabelPosition para CommandBarDefaultLabelPosition.Right.

Definir essa propriedade também fará com que os rótulos sejam sempre exibidos, o que funciona bem para a experiência de 10-foot, pois minimiza o número de cliques para o usuário. Esse também é um ótimo modelo para outros tipos de dispositivo seguirem.

Dica de ferramenta

O controle Tooltip foi introduzido como uma maneira de fornecer mais informações na interface do usuário quando o usuário passa o mouse sobre um elemento ou toca e mantém o dedo sobre ele. Para gamepad e remoto, Tooltip aparece após um breve momento em que o elemento obtém o foco, permanece na tela por um curto período de tempo e, em seguida, desaparece. Esse comportamento pode ser perturbador se forem usadas muitas Tooltips. Tente evitar usar Tooltip ao projetar para TV.

Estilos de botão

Embora os botões UWP padrão funcionem bem na TV, alguns estilos visuais de botões chamam melhor a atenção para a interface do usuário, o que talvez você queira considerar para todas as plataformas, especialmente na experiência de 3 metros, que se beneficia de comunicar claramente onde o foco está localizado. Para ler mais sobre esses estilos, consulte Buttons.

Elementos de interface do usuário aninhados

A interface do usuário aninhada expõe itens acionáveis aninhados dentro de um elemento de interface do usuário que funciona como um contêiner, onde tanto o item aninhado quanto o item do contêiner podem receber foco independentemente um do outro.

A interface do usuário aninhada funciona bem para alguns tipos de entrada, mas nem sempre para gamepad e controle remoto, que dependem da navegação XY. Siga as diretrizes neste tópico para garantir que a interface do usuário seja otimizada para o ambiente de 3 metros e que o usuário possa acessar todos os elementos interacionáveis facilmente. Uma solução comum é colocar elementos aninhados da interface em um ContextFlyout.

Para obter mais informações sobre a Interface do Usuário aninhada, consulte Interface do Usuário Aninhada nos itens de lista.

MediaTransportControls

O elemento MediaTransportControls permite que os usuários interajam com suas mídias fornecendo uma experiência de reprodução padrão que lhes permite reproduzir, pausar, ativar legendas fechadas e muito mais. Esse controle é uma propriedade do MediaPlayerElement e dá suporte a duas opções de layout: linha única e linha dupla. No layout de linha única, os botões de controle deslizante e de reprodução estão todos localizados em uma linha, com o botão reproduzir/pausar localizado à esquerda do controle deslizante. No layout de linha dupla, o slider ocupa sua própria linha, com os botões de reprodução situados em uma linha inferior separada. Ao projetar para a experiência de 10 pés, o layout de linha dupla deve ser usado, pois fornece melhor navegação para o gamepad. Para habilitar o layout de linha dupla, defina no elemento na propriedade TransportControls do .

<MediaPlayerElement x:Name="mediaPlayerElement1"  
                    Source="Assets/video.mp4"
                    AreTransportControlsEnabled="True">
    <MediaPlayerElement.TransportControls>
        <MediaTransportControls IsCompact="False"/>
    </MediaPlayerElement.TransportControls>
</MediaPlayerElement>

Acesse Reprodução de Mídia para saber mais sobre como adicionar mídia ao seu aplicativo.

Experiência de pesquisa

Pesquisar conteúdo é uma das funções mais comumente executadas na experiência de 10 pés. Se o aplicativo fornecer uma experiência de pesquisa, será útil que o usuário tenha acesso rápido a ele usando o botão Y no gamepad como acelerador.

A maioria dos clientes já deve estar familiarizada com esse acelerador, mas se você quiser, poderá adicionar um glifo visual Y à interface do usuário para indicar que o cliente pode usar o botão para acessar a funcionalidade de pesquisa. Se você adicionar essa indicação, use o símbolo da fonte Segoe Xbox MDL2 Symbol ( para aplicativos XAML, \E426 para aplicativos HTML) a fim de manter a consistência com o shell do Xbox e outros aplicativos.

Como o botão Y só está disponível no gamepad, forneça outros métodos de acesso à pesquisa, como botões na interface do usuário. Caso contrário, alguns clientes podem não conseguir acessar a funcionalidade.

Na experiência de 10 pés, geralmente é mais fácil para os clientes usar uma experiência de pesquisa em tela inteira porque há espaço limitado na exibição. Se você tiver tela inteira ou tela parcial, pesquisa "no local", recomendamos que, quando o usuário abrir a experiência de pesquisa, o teclado virtual apareça já aberto, pronto para que o cliente insira os termos de pesquisa.

Gatilho de estado visual personalizado para Xbox

Para adaptar seu aplicativo UWP para a experiência de 10 pés, recomendamos que você faça alterações de layout quando o aplicativo detectar que foi iniciado em um console Xbox. Uma maneira de fazer isso é usando um gatilho de estado visual personalizado. Gatilhos de estado visual são mais úteis quando você deseja editar no Blend para Visual Studio. O snippet de código a seguir mostra como criar um gatilho de estado visual para Xbox:

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup>
        <VisualState>
            <VisualState.StateTriggers>
                <triggers:DeviceFamilyTrigger DeviceFamily="Windows.Xbox"/>
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="RootSplitView.OpenPaneLength"
                        Value="368"/>
                <Setter Target="RootSplitView.CompactPaneLength"
                        Value="96"/>
                <Setter Target="NavMenuList.Margin"
                        Value="0,75,0,27"/>
                <Setter Target="Frame.Margin"
                        Value="0,27,48,27"/>
                <Setter Target="NavMenuList.ItemContainerStyle"
                        Value="{StaticResource NavMenuItemContainerXboxStyle}"/>
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

Para criar o gatilho, adicione a classe a seguir ao seu aplicativo. Essa é a classe referenciada pelo código XAML acima:

class DeviceFamilyTrigger : StateTriggerBase
{
    private string _currentDeviceFamily, _queriedDeviceFamily;

    public string DeviceFamily
    {
        get
        {
            return _queriedDeviceFamily;
        }

        set
        {
            _queriedDeviceFamily = value;
            _currentDeviceFamily = AnalyticsInfo.VersionInfo.DeviceFamily;
            SetActive(_queriedDeviceFamily == _currentDeviceFamily);
        }
    }
}

Depois de adicionar o gatilho personalizado, seu aplicativo fará automaticamente as modificações de layout especificadas no código XAML sempre que detectar que ele está em execução em um console Xbox One.

Outra maneira de verificar se o aplicativo está em execução no Xbox e fazer os ajustes apropriados é por meio do código. Você pode usar a seguinte variável simples para verificar se o aplicativo está em execução no Xbox:

bool IsTenFoot = (Windows.System.Profile.AnalyticsInfo.VersionInfo.DeviceFamily ==
                    "Windows.Xbox");

Em seguida, você pode fazer os ajustes apropriados na interface do usuário no bloco de código após essa verificação.

Resumo

Projetar para a experiência de 10 pés tem considerações especiais a serem consideradas que o tornam diferente do design para qualquer outra plataforma. Embora você certamente possa fazer uma simples transferência do seu aplicativo UWP para o Xbox One e ele funcionará, ele não será necessariamente otimizado para a experiência a 3 metros e pode levar à frustração do usuário. Seguir as diretrizes neste artigo garantirá que seu aplicativo seja tão bom quanto pode ser na TV.

Artigos relacionados

• Guia de dispositivos para aplicativos do Windows
• Gamepad e Interações de Controle Remoto
• Som em aplicativos UWP