Interações com o Surface Dial

Artigo
01/19/2024

Imagem do Surface Dial com o Surface Studio
Surface Dial com Surface Studio e Caneta (disponível para aquisição na Microsoft Store).

Visão geral

Os dispositivos de wheel do Windows, como o Surface Dial, são uma nova categoria de dispositivo de entrada que permite uma série de experiências interativas do usuário atraentes e exclusivas para Windows e aplicativos do Windows.

Importante

Neste tópico, nos referimos especificamente às interações do Surface Dial, mas as informações são aplicáveis a todos os dispositivos de wheel do Windows.

Com um fator forma baseado em uma ação (ou gesto) de rotação, o Surface Dial é pensado como um dispositivo de entrada secundário e multimodal que complementa a entrada de um dispositivo primário. Na maioria dos casos, o dispositivo é manipulado pela mão não dominante do usuário durante a execução de uma tarefa com a mão dominante (como escrita à tinta com uma caneta). Ele não foi projetado para entrada de ponteiro de precisão (como touch, caneta ou mouse).

O Surface Dial também dá suporte a uma ação de pressionar e segurar e uma ação de clicar. Pressionar e segurar tem uma só função: exibir um menu de comandos. Se o menu estiver ativo, a entrada de girar e clicar será processada pelo menu. Caso contrário, a entrada será passada para o aplicativo para processamento.

Assim como acontece com todos os dispositivos de entrada do Windows, você pode personalizar e projetar a experiência interativa do Surface Dial conforme a funcionalidade de seus aplicativos.

Dica

Utilizados em conjunto, o Surface Dial e o novo Surface Studio podem proporcionar uma experiência do usuário ainda mais diferenciada.

Além da experiência de menu de pressionar e segurar padrão descrita, o Surface Dial também pode ser colocado diretamente na tela do Surface Studio. Isso habilita um menu especial "na tela".

Ao detectar o local do contato e os limites do Surface Dial, o sistema usa essas informações para manipular a oclusão pelo dispositivo e exibir uma versão maior do menu que envolve a parte externa do controle circular. Essas mesmas informações também podem ser usadas pelo seu aplicativo para adaptar a interface do usuário tanto para a presença do dispositivo quanto para seu uso previsto, como a colocação da mão e do braço do usuário.

Menu fora da tela do Surface Dial

Menu na tela do Surface Dial

Integração do sistema

O Surface Dial está totalmente integrado com o Windows e dá suporte um conjunto de ferramentas internas no menu: volume do sistema, rolar, aplicar mais zoom/menos zoom e desfazer/refazer.

Esta coleção de ferramentas internas se adapta ao contexto do sistema atual para incluir:

Uma ferramenta de brilho do sistema quando o usuário está na área de trabalho do Windows
Uma ferramenta de faixa anterior/seguinte quando a mídia está sendo reproduzida

Além desse suporte geral à plataforma, o Surface Dial também está totalmente integrado aos controles de plataforma do Windows Ink (InkCanvas e InkToolbar).

Surface Dial com caneta Surface

Quando usados com o Surface Dial, esses controles habilitam funcionalidades adicionais para modificar atributos de tinta e controlar o estêncil da régua da barra de ferramentas de tinta.

Quando você abre o Menu do Surface Dial em um aplicativo de tinta digital que usa a barra de ferramentas de tinta, o menu agora inclui ferramentas para controlar o tipo de caneta e a espessura do pincel. Quando a régua está habilitada, uma ferramenta correspondente é adicionada ao menu que permite que o dispositivo controle a posição e o ângulo da régua.

Menu do Surface Dial com a ferramenta Seleção de caneta para a barra de ferramentas do Windows Ink

Menu do Surface Dial com a ferramenta de tamanho de traço para a barra de ferramentas do Windows Ink

Menu Surface Dial com a ferramenta de régua para a barra de ferramentas do Windows Ink

Personalização do usuário

Os usuários podem personalizar alguns aspectos de sua experiência de Controle circular por meio da página Configurações do Windows –> Dispositivos –> Wheel, incluindo ferramentas padrão, vibração (ou feedback háptico) e escrita (ou dominante) da mão.

Ao personalizar a experiência do usuário do Surface Dial, você deve sempre garantir que uma função ou comportamento específico esteja disponível e habilitado pelo usuário.

Ferramentas personalizadas

Aqui discutimos as diretrizes de experiência do usuário e do desenvolvedor para personalizar as ferramentas expostas no menu do Surface Dial.

Diretrizes de experiência do usuário para ferramentas personalizadas

Suas ferramentas devem corresponder ao contexto atual Ao deixar claro e intuitivo o que uma ferramenta faz e como funciona a interação do Surface Dial, você ajuda os usuários a aprender rapidamente e manter o foco nas tarefas.

Minimize ao máximo o número de ferramentas do aplicativo
O menu do Surface Dial tem espaço para sete itens. Se houver oito ou mais itens, o usuário precisará ativar o controle circular para ver quais ferramentas estão disponíveis em um menu suspenso de excedente, tornando o menu difícil de navegar e as ferramentas difíceis de descobrir e selecionar.

Recomendamos fornecer uma só ferramenta personalizada para seu aplicativo ou contexto de aplicativo. Isso permite que você defina essa ferramenta com base no que o usuário está fazendo sem exigir que ele ative o menu do Surface Dial e selecione uma ferramenta.

Atualizar dinamicamente a coleção de ferramentas
Como os itens de menu do Surface Dial não dão suporte a um estado desabilitado, você deve adicionar e remover dinamicamente ferramentas (incluindo ferramentas internas padrão) com base no contexto do usuário (modo de exibição atual ou janela focada). Se uma ferramenta não for relevante para a atividade atual ou for redundante, remova-a.

Importante

Ao adicionar um item ao menu, verifique se o item ainda não existe.

Não remova a ferramenta interna de configuração de volume do sistema
O controle de volume costuma ser sempre exigido pelo usuário. Ele pode estar ouvindo música enquanto usa o aplicativo, portanto, as ferramentas de volume e próxima faixa devem estar sempre acessíveis no menu do Surface Dial. (A ferramenta de próxima faixa é adicionada automaticamente ao menu quando a mídia está sendo reproduzida.)

Seja consistente com a organização do menu
Isso ajuda os usuários a descobrir e aprender quais ferramentas estão disponíveis ao usar seu aplicativo e ajuda a melhorar sua eficiência ao alternar entre ferramentas.

Fornecer ícones de alta qualidade consistentes com os ícones internos
Os ícones podem transmitir profissionalismo e excelência e inspirar confiança nos usuários.

Fornecer uma imagem PNG de 64 x 64 pixels de alta qualidade (44 x 44 é a menor com suporte)
Verifique se o segundo plano é transparente
O ícone deve preencher a maior parte da imagem
Um ícone branco deve ter um contorno preto para ficar visível no modo de alto contraste

Ícone com segundo fundo alfa

Ícone exibido no menu de wheel com tema padrão

Ícone exibido no menu de wheel com tema Branco de Alto Contraste

Usar nomes concisos e descritivos
O nome da ferramenta é exibido no menu da ferramenta junto com o ícone da ferramenta e também é usado pelos leitores de tela.

Os nomes devem ser curtos para caber dentro do círculo central do menu de wheel
Os nomes devem identificar claramente a ação principal (uma ação complementar pode estar implícita):
- A rolagem indica o efeito de ambas as direções de rotação
- Desfazer especifica uma ação principal, mas refazer (a ação complementar) pode ser inferido e descoberto com facilidade pelo usuário

Diretrizes para desenvolvedores

Você pode personalizar a experiência do Surface Dial para complementar a funcionalidade em seus aplicativos por meio de um conjunto abrangente de APIs do Windows Runtime.

Como já mencionado, o menu padrão do Surface Dial é pré-preenchido com um conjunto de ferramentas internas que abrangem uma ampla gama de recursos básicos do sistema (volume do sistema, brilho do sistema, rolagem, zoom, desfazer e controle de mídia quando o sistema detecta reprodução contínua de áudio ou vídeo). Porém, essas ferramentas padrão podem não fornecer a funcionalidade exigida pelo seu aplicativo.

Nas seções a seguir, descrevemos como adicionar uma ferramenta personalizada ao menu do Surface Dial e especificamos quais ferramentas internas são expostas.

Faça download de uma versão mais robusta dessa amostra da personalização do RadialController.

Adicionar uma ferramenta personalizada

Neste exemplo, adicionamos uma ferramenta personalizada básica que passa os dados de entrada dos eventos de rotação e clique para alguns controles de interface do usuário XAML.

Primeiro, declaramos nossa interface do usuário (apenas um controle deslizante e um botão de alternância) em XAML.

Captura de tela do Exemplo de Controlador Radial com o controle deslizante horizontal definido à esquerda.
Interface do usuário do aplicativo de amostra

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="*"/>
  </Grid.RowDefinitions>
  <StackPanel x:Name="HeaderPanel" 
    Orientation="Horizontal" 
    Grid.Row="0">
      <TextBlock x:Name="Header"
        Text="RadialController customization sample"
        VerticalAlignment="Center"
        Style="{ThemeResource HeaderTextBlockStyle}"
        Margin="10,0,0,0" />
  </StackPanel>
  <StackPanel Orientation="Vertical" 
    VerticalAlignment="Center" 
    HorizontalAlignment="Center"
    Grid.Row="1">
      <!-- Slider for rotation input -->
      <Slider x:Name="RotationSlider"
        Width="300"
        HorizontalAlignment="Left"/>
      <!-- Switch for click input -->
      <ToggleSwitch x:Name="ButtonToggle"
        HorizontalAlignment="Left"/>
  </StackPanel>
</Grid>

Em seguida, no code-behind, adicionamos uma ferramenta personalizada ao menu do Surface Dial e declaramos os manipuladores de entrada RadialController.

Obtemos uma referência ao objeto RadialController para o Surface Dial (myController) chamando CreateForCurrentView.

Então criamos uma instância de um RadialControllerMenuItem (myItem) chamando RadialControllerMenuItem.CreateFromIcon.

Em seguida, acrescentamos esse item à coleção de itens de menu.

Declaramos os manipuladores de eventos de entrada (ButtonClicked e RotationChanged) para o objeto RadialController.

Por fim, definimos os manipuladores de eventos.

public sealed partial class MainPage : Page
{
    RadialController myController;

    public MainPage()
    {
        this.InitializeComponent();
        // Create a reference to the RadialController.
        myController = RadialController.CreateForCurrentView();

        // Create an icon for the custom tool.
        RandomAccessStreamReference icon =
          RandomAccessStreamReference.CreateFromUri(
            new Uri("ms-appx:///Assets/StoreLogo.png"));

        // Create a menu item for the custom tool.
        RadialControllerMenuItem myItem =
          RadialControllerMenuItem.CreateFromIcon("Sample", icon);

        // Add the custom tool to the RadialController menu.
        myController.Menu.Items.Add(myItem);

        // Declare input handlers for the RadialController.
        myController.ButtonClicked += MyController_ButtonClicked;
        myController.RotationChanged += MyController_RotationChanged;
    }

    // Handler for rotation input from the RadialController.
    private void MyController_RotationChanged(RadialController sender,
      RadialControllerRotationChangedEventArgs args)
    {
        if (RotationSlider.Value + args.RotationDeltaInDegrees > 100)
        {
            RotationSlider.Value = 100;
            return;
        }
        else if (RotationSlider.Value + args.RotationDeltaInDegrees < 0)
        {
            RotationSlider.Value = 0;
            return;
        }
        RotationSlider.Value += args.RotationDeltaInDegrees;
    }

    // Handler for click input from the RadialController.
    private void MyController_ButtonClicked(RadialController sender,
      RadialControllerButtonClickedEventArgs args)
    {
        ButtonToggle.IsOn = !ButtonToggle.IsOn;
    }
}

Quando executamos o aplicativo, usamos o Surface Dial para interagir com ele. Primeiro, pressionamos e seguramos para abrir o menu e selecionar nossa ferramenta personalizada. Quando a ferramenta personalizada é ativada, o controle deslizante pode ser ajustado girando o controle circular e a opção pode ser alternada clicando no controle circular.

Captura de tela do Exemplo de Controlador Radial com o controle deslizante horizontal definido no meio.
A interface do usuário do aplicativo de amostra ativada usando a ferramenta personalizada do Surface Dial

Especificar as ferramentas internas

Você pode usar a classe RadialControllerConfiguration para personalizar a coleção de itens de menu internos para seu aplicativo.

Por exemplo, se seu aplicativo não tiver regiões de rolagem ou zoom e não exigir a funcionalidade de desfazer/refazer, essas ferramentas poderão ser removidas do menu. Isso abre espaço no menu para adicionar ferramentas personalizadas para seu aplicativo.

Importante

O menu do Surface Dial deve ter pelo menos um item de menu. Se todas as ferramentas padrão forem removidas antes de você adicionar uma de suas ferramentas personalizadas, as ferramentas padrão serão restauradas e sua ferramenta será acrescentada à coleção padrão.

De acordo com as diretrizes de design, não recomendamos remover as ferramentas de controle de mídia (volume e faixa anterior/seguinte), pois os usuários geralmente têm música de fundo tocando enquanto executam outras tarefas.

Aqui, mostramos como configurar o menu do Surface Dial para incluir apenas controles de mídia para volume e faixa seguinte/anterior.

public MainPage()
{
  ...
  //Remove a subset of the default system tools
  RadialControllerConfiguration myConfiguration = 
  RadialControllerConfiguration.GetForCurrentView();
  myConfiguration.SetDefaultMenuItems(new[] 
  {
    RadialControllerSystemMenuItemKind.Volume,
      RadialControllerSystemMenuItemKind.NextPreviousTrack
  });
}

Interações com o cliente

Como mencionado, o Surface Dial dá suporte a três gestos (pressionar e segurar, girar, clicar) com as interações padrão correspondentes.

Todas as interações personalizadas baseadas nesses gestos devem fazer sentido para a ação ou ferramenta selecionada.

Observação

A experiência interativa depende do estado do menu do Surface Dial. Se o menu estiver ativo, ele processará a entrada; caso contrário, seu aplicativo fará isso.

Pressionar e segurar

Esse gesto ativa e mostra o menu do Surface Dial, não há nenhuma funcionalidade de aplicativo associada a esse gesto.

Por padrão, o menu é exibido no centro da tela do usuário. Porém, o usuário pode pegá-lo e movê-lo para qualquer lugar que escolher.

Observação

Quando o Surface Dial é colocado na tela do Surface Studio, o menu é centralizado na localização na tela do Surface Dial.

Girar

O Surface Dial foi projetado principalmente para dar suporte à rotação para interações que envolvam ajustes suaves e incrementais em valores ou controles analógicos.

O dispositivo pode ser girado nos sentidos horário e anti-horário, e também pode fornecer feedback háptico para indicar distâncias discretas.

Observação

O feedback tátil pode ser desabilitado pelo usuário na página Configurações do Windows –>Dispositivos –> Wheel.

Diretrizes de experiência do usuário para interações personalizadas

Ferramentas com sensibilidade rotacional contínua ou alta devem desabilitar o feedback háptico

O feedback háptico corresponde à sensibilidade rotacional da ferramenta ativa. Recomendamos desabilitar o feedback háptico para ferramentas com sensibilidade de rotação contínua ou alta, pois a experiência do usuário pode ficar desconfortável.

A mão dominante não deve afetar as interações baseadas na rotação

O Surface Dial não consegue detetar qual mão está sendo usada, mas o usuário pode definir a escrita (ou a mão dominante) em Ajustes do Windows –> Dispositivo–-> Caneta e Windows Ink.

A localidade deve ser considerada para todas as interações de rotação

Maximize a satisfação do cliente acomodando e adaptando suas interações aos layouts de localidade e da direita para a esquerda.

As ferramentas e comandos internos no menu Discagem seguem estas diretrizes para interações baseadas em rotação:

Esquerda

Operante

Saída

Imagem do Surface Dial

Right

Para baixo

Direção conceitual	Como mapear para o Surface Dial	Rotação no sentido horário	Rotação no sentido anti-horário
Horizontal	Mapeamento para a esquerda e para a direita com base na parte superior do Surface Dial	Right	Esquerda
Vertical	Mapeamento para cima e para baixo com base no lado esquerdo do Surface Dial	Para baixo	Operante
Eixo Z	Em (ou mais perto) mapeado para cima/direita Fora (ou mais) mapeado para baixo/esquerda	Em	Saída

Diretrizes para desenvolvedores

À medida que o usuário gira o dispositivo, os eventos RadialController.RotationChanged são acionados com base em um delta (RadialControllerRotationChangedEventArgs.RotationDeltaInDegrees) relativo à direção da rotação. A sensibilidade (ou resolução) dos dados pode ser definida com a propriedade RadialController.RotationResolutionInDegrees.

Observação

Por padrão, um evento de entrada rotacional é entregue a um objeto RadialController apenas quando o dispositivo é girado pelo menos 10 graus. Cada evento de entrada faz com que o dispositivo vibre.

Em geral, recomendamos desabilitar o feedback háptico quando a resolução de rotação está definida para menos de 5 graus. Isso proporciona uma experiência mais suave para interações contínuas.

Você pode habilitar e desabilitar o feedback háptico para ferramentas personalizadas definindo a propriedade RadialController.UseAutomaticHapticFeedback.

Observação

Não é possível substituir o comportamento háptico para ferramentas do sistema, como o controle de volume. Para essas ferramentas, o feedback háptico pode ser desabilitado apenas pelo usuário na página de configurações da wheel.

Aqui está um exemplo de como personalizar a resolução dos dados de rotação e habilitar ou desabilitar o feedback háptico.

private void MyController_ButtonClicked(RadialController sender, 
  RadialControllerButtonClickedEventArgs args)
{
  ButtonToggle.IsOn = !ButtonToggle.IsOn;

  if(ButtonToggle.IsOn)
  {
    //high resolution mode
    RotationSlider.LargeChange = 1;
    myController.UseAutomaticHapticFeedback = false;
    myController.RotationResolutionInDegrees = 1;
  }
  else
  {
    //low resolution mode
    RotationSlider.LargeChange = 10;
    myController.UseAutomaticHapticFeedback = true;
    myController.RotationResolutionInDegrees = 10;
  }
}

Clique

Clicar no Surface Dial é semelhante a clicar no botão esquerdo do mouse (o estado de rotação do dispositivo não tem efeito sobre esta ação).

Diretrizes de experiência do usuário

Não mapeie uma ação ou comando para esse gesto se o usuário não puder se recuperar com facilidade do resultado

Qualquer ação executada pelo aplicativo com base em o usuário clicar no Surface Dial deve ser reversível. Sempre habilite o usuário a atravessar com facilidade a pilha traseira do aplicativo e restaurar um estado anterior do aplicativo.

Operações binárias como mute/unmute ou mostrar/ocultar proporcionam boas experiências do usuário com o gesto de clique.

As ferramentas modais não devem ser habilitadas ou desabilitadas clicando no Surface Dial

Alguns modos de aplicativo/ferramenta podem entrar em conflito ou desabilitar interações que dependem de rotação. Ferramentas como a régua na barra de ferramentas do Windows Ink devem ser ativadas ou desativadas por meio de outros recursos da interface do usuário (a Barra de Ferramentas de Tinta fornece um controle ToggleButton interno).

Para ferramentas modais, mapeie o item de menu ativo do Surface Dial para a ferramenta de destino ou para o item de menu selecionado antes.

Diretrizes para desenvolvedores

Quando o Surface Dial é clicado, um evento RadialController.ButtonClicked é acionado. O RadialControllerButtonClickedEventArgs inclui uma propriedade Contact que contém a localização e a área delimitadora do contato do Surface Dial na tela do Surface Studio. Se o Surface Dial não estiver em contato com a tela, essa propriedade será nula.

Na tela

Conforme já descrito, o Surface Dial pode ser usado em conjunto com o Surface Studio para exibir o menu do Surface Dial em um modo especial na tela.

Nesse modo, você pode integrar e personalizar ainda mais suas experiências interativas do Dial com seus aplicativos. Exemplos de experiências únicas possíveis apenas com o Surface Dial e o Surface Studio incluem:

Exibição de ferramentas contextuais (como uma paleta de cores) com base na posição do Surface Dial, o que facilita sua localização e uso
Definir a ferramenta ativa com base na interface do usuário em que o Surface Dial é colocado
Ampliar uma área da tela com base na localização do Surface Dial
Interações de jogo exclusivas com base na localização da tela

Diretrizes de experiência do usuário para interações na tela

Os aplicativos devem responder quando o Surface Dial é detectado na tela

O feedback visual ajuda a indicar aos usuários que seu aplicativo detectou o dispositivo na tela do Surface Studio.

Ajustar a interface do usuário relacionada ao Surface Dial com base na localização do dispositivo

O dispositivo (e o corpo do usuário) pode ocluir interface do usuário crítica, dependendo de onde o usuário o coloca.

Ajustar a IU relacionada ao Surface Dial com base na interação do usuário

Além da oclusão do hardware, a mão e o braço do usuário podem ocluir parte da tela ao usar o dispositivo.

A área ocluída depende de qual mão está sendo usada com o dispositivo. Como o dispositivo foi projetado para ser usado principalmente com a mão não dominante, a interface do usuário relacionada ao Surface Dial deve ser ajustada para a mão oposta especificada pelo usuário (configuração Configurações do Windows > Dispositivos > Caneta e Windows Ink > Escolha com qual mão você escreve com).

As interações devem responder à posição do Surface Dial, em vez de ao movimento

O pé do dispositivo é projetado para grudar na tela, em vez de deslizar, pois não é um dispositivo apontador de precisão. Portanto, esperamos que seja mais comum que os usuários levantem e posicionem o Surface Dial, em vez de arrastá-lo pela tela.

Usar a posição da tela para determinar a intenção do usuário

Definir a ferramenta ativa com base no contexto da interface do usuário, como a proximidade de um controle, tela ou janela, pode melhorar a experiência do usuário reduzindo as etapas necessárias para executar uma tarefa.

Diretrizes para desenvolvedores

Quando o Surface Dial é colocado na superfície do digitalizador do Surface Studio, um evento radialController.ScreenContactStarted é acionado e as informações de contato (RadialControllerScreenContactStartedEventArgs.Contact) são fornecidas ao seu aplicativo.

Da mesma forma, se o Surface Dial for clicado quando em contato com a superfície do digitalizador do Surface Studio, um evento RadialController.ButtonClicked será acionado e as informações de contato (RadialControllerButtonClickedEventArgs.Contact) serão fornecidas ao seu aplicativo.

As informações de contato (RadialControllerScreenContact) incluem as coordenadas X/Y do centro do Surface Dial no espaço de coordenadas do aplicativo (RadialControllerScreenContact.Position), bem como o retângulo delimitador (RadialControllerScreenContact.Bounds) nos DIPs (pixels independentes de dispositivo). Essas informações são muito úteis para fornecer contexto à ferramenta ativa e dar feedback visual relacionado ao dispositivo para o usuário.

No exemplo a seguir, criamos um aplicativo básico com quatro seções diferentes, cada uma delas com um controle deslizante e um botão de alternância. Em seguida, usamos a posição na tela do Surface Dial para determinar qual conjunto de controles deslizantes e alternâncias são controlados pelo Surface Dial.

Primeiro, declaramos nossa interface do usuário (quatro seções, cada uma com um controle deslizante e um botão de alternância) em XAML.

Captura de tela do Exemplo de controlador radial com quatro controles deslizantes horizontais definidos à esquerda.
Interface do usuário do aplicativo de amostra

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="*"/>
  </Grid.RowDefinitions>
  <StackPanel x:Name="HeaderPanel" 
        Orientation="Horizontal" 
        Grid.Row="0">
    <TextBlock x:Name="Header"
      Text="RadialController customization sample"
      VerticalAlignment="Center"
      Style="{ThemeResource HeaderTextBlockStyle}"
      Margin="10,0,0,0" />
  </StackPanel>
  <Grid Grid.Row="1" x:Name="RootGrid">
    <Grid.RowDefinitions>
      <RowDefinition Height="*"/>
      <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*"/>
      <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid x:Name="Grid0"
      Grid.Row="0"
      Grid.Column="0">
      <StackPanel Orientation="Vertical" 
        VerticalAlignment="Center" 
        HorizontalAlignment="Center">
        <!-- Slider for rotational input -->
        <Slider x:Name="RotationSlider0"
          Width="300"
          HorizontalAlignment="Left"/>
        <!-- Switch for button input -->
        <ToggleSwitch x:Name="ButtonToggle0"
            HorizontalAlignment="Left"/>
      </StackPanel>
    </Grid>
    <Grid x:Name="Grid1"
      Grid.Row="0"
      Grid.Column="1">
      <StackPanel Orientation="Vertical" 
        VerticalAlignment="Center" 
        HorizontalAlignment="Center">
        <!-- Slider for rotational input -->
        <Slider x:Name="RotationSlider1"
          Width="300"
          HorizontalAlignment="Left"/>
        <!-- Switch for button input -->
        <ToggleSwitch x:Name="ButtonToggle1"
            HorizontalAlignment="Left"/>
      </StackPanel>
    </Grid>
    <Grid x:Name="Grid2"
      Grid.Row="1"
      Grid.Column="0">
      <StackPanel Orientation="Vertical" 
        VerticalAlignment="Center" 
        HorizontalAlignment="Center">
        <!-- Slider for rotational input -->
        <Slider x:Name="RotationSlider2"
          Width="300"
          HorizontalAlignment="Left"/>
        <!-- Switch for button input -->
        <ToggleSwitch x:Name="ButtonToggle2"
            HorizontalAlignment="Left"/>
      </StackPanel>
    </Grid>
    <Grid x:Name="Grid3"
      Grid.Row="1"
      Grid.Column="1">
      <StackPanel Orientation="Vertical" 
        VerticalAlignment="Center" 
        HorizontalAlignment="Center">
        <!-- Slider for rotational input -->
        <Slider x:Name="RotationSlider3"
          Width="300"
          HorizontalAlignment="Left"/>
        <!-- Switch for button input -->
        <ToggleSwitch x:Name="ButtonToggle3"
            HorizontalAlignment="Left"/>
      </StackPanel>
    </Grid>
  </Grid>
</Grid>

Aqui está o code-behind com manipuladores definidos para a posição da tela do Surface Dial.

Slider ActiveSlider;
ToggleSwitch ActiveSwitch;
Grid ActiveGrid;

public MainPage()
{
  ...

  myController.ScreenContactStarted += 
    MyController_ScreenContactStarted;
  myController.ScreenContactContinued += 
    MyController_ScreenContactContinued;
  myController.ScreenContactEnded += 
    MyController_ScreenContactEnded;
  myController.ControlLost += MyController_ControlLost;

  //Set initial grid for Surface Dial input.
  ActiveGrid = Grid0;
  ActiveSlider = RotationSlider0;
  ActiveSwitch = ButtonToggle0;
}

private void MyController_ScreenContactStarted(RadialController sender, 
  RadialControllerScreenContactStartedEventArgs args)
{
  //find grid at contact location, update visuals, selection
  ActivateGridAtLocation(args.Contact.Position);
}

private void MyController_ScreenContactContinued(RadialController sender, 
  RadialControllerScreenContactContinuedEventArgs args)
{
  //if a new grid is under contact location, update visuals, selection
  if (!VisualTreeHelper.FindElementsInHostCoordinates(
    args.Contact.Position, RootGrid).Contains(ActiveGrid))
  {
    ActiveGrid.Background = new 
      SolidColorBrush(Windows.UI.Colors.White);
    ActivateGridAtLocation(args.Contact.Position);
  }
}

private void MyController_ScreenContactEnded(RadialController sender, object args)
{
  //return grid color to normal when contact leaves screen
  ActiveGrid.Background = new 
  SolidColorBrush(Windows.UI.Colors.White);
}

private void MyController_ControlLost(RadialController sender, object args)
{
  //return grid color to normal when focus lost
  ActiveGrid.Background = new 
    SolidColorBrush(Windows.UI.Colors.White);
}

private void ActivateGridAtLocation(Point Location)
{
  var elementsAtContactLocation = 
    VisualTreeHelper.FindElementsInHostCoordinates(Location, 
      RootGrid);

  foreach (UIElement element in elementsAtContactLocation)
  {
    if (element as Grid == Grid0)
    {
      ActiveSlider = RotationSlider0;
      ActiveSwitch = ButtonToggle0;
      ActiveGrid = Grid0;
      ActiveGrid.Background = new SolidColorBrush( 
        Windows.UI.Colors.LightGoldenrodYellow);
      return;
    }
    else if (element as Grid == Grid1)
    {
      ActiveSlider = RotationSlider1;
      ActiveSwitch = ButtonToggle1;
      ActiveGrid = Grid1;
      ActiveGrid.Background = new SolidColorBrush( 
        Windows.UI.Colors.LightGoldenrodYellow);
      return;
    }
    else if (element as Grid == Grid2)
    {
      ActiveSlider = RotationSlider2;
      ActiveSwitch = ButtonToggle2;
      ActiveGrid = Grid2;
      ActiveGrid.Background = new SolidColorBrush( 
        Windows.UI.Colors.LightGoldenrodYellow);
      return;
    }
    else if (element as Grid == Grid3)
    {
      ActiveSlider = RotationSlider3;
      ActiveSwitch = ButtonToggle3;
      ActiveGrid = Grid3;
      ActiveGrid.Background = new SolidColorBrush( 
        Windows.UI.Colors.LightGoldenrodYellow);
      return;
    }
  }
}

Quando executamos o aplicativo, usamos o Surface Dial para interagir com ele. Primeiro, colocamos o dispositivo na tela do Surface Studio, que o aplicativo detecta e associa à seção inferior direita (consulte a imagem). Em seguida, pressionamos sem soltar o Surface Dial para abrir o menu e selecionar a nossa ferramenta personalizada. Quando a ferramenta personalizada é ativada, o controle deslizante pode ser ajustado girando o Surface Dial e a opção pode ser alternada clicando no Surface Dial.

Captura de tela do Exemplo de controlador radial com quatro controles deslizantes horizontais definidos à esquerda e o quarto controlador destacado.
A interface do usuário do aplicativo de amostra ativada usando a ferramenta personalizada do Surface Dial

Resumo

Este tópico apresenta uma visão geral do dispositivo de entrada do Surface Dial com experiência do usuário e diretrizes do desenvolvedor sobre como personalizar a experiência do usuário para cenários fora da tela, bem como cenários na tela quando usado com o Surface Studio.

Envie suas perguntas, sugestões e feedback para radialcontroller@microsoft.com.

Tutorial: Dar suporte ao Surface Dial (e a outros dispositivos de wheel de rolagem) no aplicativo do Windows

Referência de API

Amostras

Amostras de tópico

Personalização do RadialController

Outras amostras

Amostra de livro de colorir

Tutorial de introdução: Dar suporte ao Surface Dial (e a outros dispositivos de wheel de rolagem) no aplicativo do Windows

Amostras da Plataforma Universal do Windows (C# e C++)

Exemplo de área de trabalho do Windows

Compartilhar via

Interações com o Surface Dial

Visão geral

Integração do sistema

Personalização do usuário

Ferramentas personalizadas

Diretrizes de experiência do usuário para ferramentas personalizadas

Diretrizes para desenvolvedores

Interações com o cliente

Pressionar e segurar

Girar

Diretrizes de experiência do usuário para interações personalizadas

Diretrizes para desenvolvedores

Clique

Diretrizes de experiência do usuário

Diretrizes para desenvolvedores

Na tela

Diretrizes de experiência do usuário para interações na tela

Diretrizes para desenvolvedores

Resumo

Referência de API

Amostras

Amostras de tópico

Outras amostras

Recursos adicionais

Compartilhar via

Interações com o Surface Dial

Visão geral

Integração do sistema

Personalização do usuário

Ferramentas personalizadas

Diretrizes de experiência do usuário para ferramentas personalizadas

Diretrizes para desenvolvedores

Interações com o cliente

Pressionar e segurar

Girar

Diretrizes de experiência do usuário para interações personalizadas

Diretrizes para desenvolvedores

Clique

Diretrizes de experiência do usuário

Diretrizes para desenvolvedores

Na tela

Diretrizes de experiência do usuário para interações na tela

Diretrizes para desenvolvedores

Resumo

Artigos relacionados

Referência de API

Amostras

Amostras de tópico

Outras amostras

Recursos adicionais