Interações com o Surface Dial

Surface Dial com Surface Studio e Caneta (disponível para compra na Microsoft Store).

Visão geral

Os dispositivos Windows Wheel, como o Surface Dial, são uma nova categoria de dispositivos de entrada que permitem uma série de experiências de interação de utilizador apelativas e únicas para Windows e aplicações Windows.

Com um fator de forma baseado numa ação de rotação (ou gesto), o Surface Dial tem como objetivo atuar como um dispositivo de entrada de dados secundário e multimodal, complementando a entrada de um dispositivo primário. Na maioria das vezes, o dispositivo é manipulado pela mão não dominante do utilizador enquanto realiza uma tarefa com a mão dominante (como usar tinta com uma caneta). Não foi concebido para entrada precisa de ponteiros (como toque, caneta ou rato).

O Surface Dial também suporta tanto a ação de pressionar e manter como a ação de clique. Pressionar e segurar tem uma única função: mostrar um menu de comandos. Se o menu estiver ativo, a entrada de rodar e clicar é processada pelo menu. Caso contrário, a entrada é encaminhada para a sua aplicação para processamento.

Como em todos os dispositivos de entrada Windows, pode personalizar e adaptar a experiência de interação com o Surface Dial para se adequar à funcionalidade das suas aplicações.

Integração de sistemas

O Surface Dial está fortemente integrado com o Windows e suporta um conjunto de ferramentas integradas no menu: rolagem, ampliar/reduzir, volume do sistema, e desfazer/refazer.

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

• Ferramenta de ajuste de brilho do sistema quando o utilizador está no Windows Desktop
• Uma ferramenta para faixa anterior/próxima quando conteúdo multimédia está a reproduzir

Para além deste suporte geral à plataforma, o Surface Dial está também fortemente integrado com os controlos da plataforma Windows Ink (InkCanvas e InkToolbar).

Mostrador de Superfície com Caneta de Superfície

Quando utilizados com o Surface Dial, estes controlos oferecem funcionalidades adicionais para modificar os atributos da tinta e controlar o modelo de régua na barra de ferramentas de tinta.

Quando abres o Surface Dial Menu numa aplicação de desenho que utiliza a barra de ferramentas de desenho, o menu agora inclui ferramentas para controlar o tipo de caneta e a espessura do pincel. Quando a régua está ativada, uma ferramenta correspondente é adicionada ao menu que permite ao dispositivo controlar a posição e o ângulo da régua.

Menu Surface Dial com ferramenta de seleção de canetas para a barra de ferramentas Windows Ink

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

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

Personalização do usuário

Os utilizadores podem personalizar alguns aspetos da sua experiência com o Dial através da página Definições -> Dispositivos -> Roda do Windows, incluindo ferramentas padrão, feedback háptico (ou vibração) e mão dominante (ou escrita).

Ao personalizar a experiência de utilizador do Surface Dial, deve sempre garantir que uma determinada função ou comportamento está disponível e ativado pelo utilizador.

Ferramentas personalizadas

Aqui discutimos tanto a experiência de utilizador como a orientação para programadores para personalizar as ferramentas expostas no menu Surface Dial.

Orientação de UX para ferramentas personalizadas

Garante que as tuas ferramentas correspondem ao contexto atual Quando torna claro e intuitivo o que uma ferramenta faz e como funciona a interação com o Surface Dial, ajudas os utilizadores a aprender rapidamente e a manterem-se focados na sua tarefa.

Minimizar o número de ferramentas de aplicação tanto quanto possível
O menu Surface Dial tem espaço para sete itens. Se existirem oito ou mais itens, o utilizador precisa de rodar o seletor para ver quais as ferramentas disponíveis num menu suspenso, tornando o menu difícil de navegar e as ferramentas difíceis de encontrar e selecionar.

Recomendamos fornecer uma única ferramenta personalizada para a sua aplicação ou contexto da aplicação. Fazer isso permite-lhe definir essa ferramenta com base no que o utilizador está a fazer, sem que este tenha de ativar o menu Surface Dial e selecionar uma ferramenta.

Atualizar dinamicamente o conjunto de ferramentas
Como os itens do menu do Surface Dial não suportam um estado desativado, deve adicionar e remover dinamicamente ferramentas (incluindo ferramentas predefinidas integradas) com base no contexto do utilizador (vista atual ou janela focada). Se uma ferramenta não for relevante para a atividade atual ou for redundante, remova-a.

Não removas a ferramenta de definição de volume do sistema incorporada
O controlo de volume é tipicamente sempre exigido pelo utilizador. Podem estar a ouvir música enquanto usam a tua aplicação, por isso as ferramentas de volume e próxima faixa devem estar sempre acessíveis a partir do menu Surface Dial. (A ferramenta de faixa seguinte é automaticamente adicionada ao menu quando a multimédia está a reproduzir.)

Sê consistente na organização do menu
Isto ajuda os utilizadores a descobrir e aprender que ferramentas estão disponíveis ao usar a sua aplicação, e melhora a sua eficiência ao mudar de ferramenta.

Forneça ícones de alta qualidade consistentes com os ícones incorporados
Os ícones podem transmitir profissionalismo e excelência, e inspirar confiança nos utilizadores.

• Forneça uma imagem PNG de alta qualidade de 64 x 64 píxeis (44 x 44 é a menor suportada)
• Garante que o fundo é transparente
• O ícone deve preencher a maior parte da imagem
• Um ícone branco deve ter um contorno preto para ser visível em modo de alto contraste

Use nomes concisos e descritivos
O nome da ferramenta é exibido no menu da ferramenta juntamente com o ícone da ferramenta e também é usado pelos leitores de ecrã.

• Os nomes devem ser curtos para caber dentro do círculo central do menu da roda
• Os nomes devem identificar claramente a ação principal (uma ação complementar pode ser implícita):
  • O Scroll indica o efeito das duas direções de rotação.
  • Desfazer especifica uma ação primária, mas refazer (a ação complementar) pode ser inferida e facilmente descoberta pelo utilizador

Guia para programadores

Pode personalizar a experiência do Surface Dial para complementar a funcionalidade das suas aplicações através de um conjunto abrangente de APIs de Runtime do Windows.

Como mencionado anteriormente, o menu padrão do Surface Dial está pré-preenchido com um conjunto de ferramentas integradas que cobrem uma vasta gama de funcionalidades básicas do sistema (volume do sistema, brilho do sistema, scroll, zoom, desfazer e controlo de media quando o sistema deteta reprodução contínua de áudio ou vídeo). No entanto, estas ferramentas predefinidas podem não fornecer a funcionalidade exigida pela sua aplicação.

Nas secções seguintes, descrevemos como adicionar uma ferramenta personalizada ao menu Surface Dial e especificar quais as ferramentas integradas que estão expostas.

Descarregue uma versão mais robusta deste exemplo da personalização do RadialController.

Adicionar uma ferramenta personalizada

Neste exemplo, adicionamos uma ferramenta personalizada básica que passa os dados de entrada tanto dos eventos de rotação como de clique para alguns controlos da interface XAML.

1. Primeiro, declaramos a nossa interface (apenas um deslizador e botão de alternar) em XAML.

   
   A interface da aplicação de exemplo

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

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

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

   Chamando RadialControllerMenuItem.CreateFromIcon, criamos então uma instância de RadialControllerMenuItem (myItem).

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

   Declaramos os gestores de eventos de entrada (ButtonClicked e RotationChanged) para o objeto RadialControler .

   Finalmente, definimos os gestores 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 a aplicação, usamos o Surface Dial para interagir com ela. Primeiro, pressionamos e mantemos pressionado para abrir o menu e selecionamos a nossa ferramenta personalizada. Uma vez que a ferramenta personalizada está ativada, o controlo deslizante pode ser ajustado rodando o Mostrador, e o interruptor pode ser alterado clicando no Mostrador.

A interface da aplicação de exemplo ativada usando a ferramenta personalizada Surface Dial

Especifique as ferramentas incorporadas

Pode usar a classe RadialControllerConfiguration para personalizar a coleção de itens de menu incorporados para a sua aplicação.

Por exemplo, se a sua aplicação não tiver regiões de deslocamento ou zoom nem necessitar de funcionalidade de desfazer ou refazer, estas ferramentas podem ser removidas do menu. Isto abre espaço no menu para adicionar ferramentas personalizadas para a sua aplicação.

De acordo com as diretrizes de design, não recomendamos remover as ferramentas de controlo de media (volume e faixa anterior/próxima), pois os utilizadores costumam ter música de fundo a tocar enquanto realizam outras tarefas.

Aqui, mostramos como configurar o menu Surface Dial para incluir apenas controlos de media para volume e faixa próxima/anterior.

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

Interações personalizadas

Como mencionado, o Surface Dial suporta três gestos (pressionar e manter pressionado, rodar, clicar) com as interações padrão correspondentes.

Assegure que quaisquer interações personalizadas baseadas nestes gestos fazem sentido para a ação ou ferramenta selecionada.

Prima e mantenha pressionado

Este gesto ativa e mostra o menu Surface Dial, não há funcionalidade de aplicação associada a este gesto.

Por defeito, o menu é exibido no centro do ecrã do utilizador. No entanto, o utilizador pode agarrá-lo e movê-lo para onde quiser.

Girar

O Surface Dial foi concebido principalmente para suportar rotação em interações que envolvem ajustes suaves e incrementais a valores ou controlos analógicos.

O dispositivo pode ser rodado tanto no sentido dos ponteiros do relógio como no sentido contrário, e também pode fornecer feedback háptico para indicar distâncias discretas.

Orientação UX para interações personalizadas

Ferramentas com sensibilidade rotacional contínua ou elevada devem desativar o feedback háptico

O feedback háptico corresponde à sensibilidade rotacional da ferramenta ativa. Recomendamos desativar o feedback háptico para ferramentas com sensibilidade contínua ou rotacional elevada, pois a experiência do utilizador pode tornar-se 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 a mão que está a ser usada, mas o utilizador pode definir a escrita (ou a mão dominante) nas Definições do Windows -> Dispositivo -> Caneta e Tinta do Windows.

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

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

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

Guia para programadores

À medida que o utilizador roda o dispositivo, os eventos RadialController.RotationChanged são disparados com base num delta (RadialControllerRotationChangedEventArgs.RotationDeltaInDegrees) relativo à direção da rotação. A sensibilidade (ou resolução) dos dados pode ser definida com a propriedade RadialController.RotationResolutionInDegrees .

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

Pode ativar e desativar o feedback háptico para ferramentas personalizadas definindo a propriedade RadialController.UseAutomaticHapticFeedback .

Aqui está um exemplo de como personalizar a resolução dos dados de rotação e ativar ou desativar 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 em

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

Orientação de UX

Não associe uma ação ou comando a este gesto se o utilizador não conseguir recuperar facilmente do resultado

Qualquer ação tomada pela sua aplicação com base no utilizador ao clicar no Surface Dial deve ser reversível. Certifique-se sempre de que o utilizador pode facilmente percorrer o histórico de navegação da aplicação e restaurar o estado anterior da aplicação.

Operações binárias como mute/desmute ou mostrar/esconder proporcionam boas experiências de utilizador com o gesto de clique.

As ferramentas modais não devem ser ativadas nem desativadas clicando no Surface Dial

Alguns modos de aplicação/ferramenta podem entrar em conflito ou desativar interações que dependam da rotação. Ferramentas como a régua na barra de ferramentas Windows Ink devem ser ativadas ou desativadas através de outras possibilidades da interface (a Barra de Ferramentas Ink oferece um controlo ToggleButton incorporado).

Para ferramentas modais, mapeie o item ativo do menu Surface Dial para a ferramenta alvo ou para o item do menu previamente selecionado.

Guia para programadores

Quando o Surface Dial é clicado, um evento RadialController.ButtonClicked é disparado. Os RadialControllerButtonClickedEventArgs incluem uma propriedade Contact que contém a localização e a área delimitadora do contacto do Surface Dial no ecrã do Surface Studio. Se o Surface Dial não estiver em contacto com o ecrã, esta propriedade é nula.

No ecrã

Como descrito anteriormente, o Surface Dial pode ser usado em conjunto com o Surface Studio para exibir o menu Surface Dial num modo especial no ecrã.

Neste modo, pode integrar e personalizar ainda mais as suas experiências de interação com o Dial com as suas aplicações. Exemplos de experiências únicas possíveis apenas com o Surface Dial e o Surface Studio incluem:

• Exibir ferramentas contextuais (como uma paleta de cores) com base na posição do Surface Dial, o que as torna mais fáceis de encontrar e usar
• Definir a ferramenta ativa com base na interface onde o Surface Dial está colocado
• Ampliação de uma área do ecrã com base na localização do Surface Dial
• Interações únicas do jogo baseadas na localização do ecrã

Orientação UX para interações no ecrã

As aplicações devem reagir quando o Surface Dial for detetado no ecrã

O feedback visual ajuda a indicar aos utilizadores que a sua aplicação detetou o dispositivo no ecrã do Surface Studio.

Ajuste a interface relacionada com o Surface Dial com base na localização do dispositivo

O dispositivo (e o corpo do utilizador) pode ocultar a interface crítica dependendo de onde o utilizador o coloca.

Ajuste a interface relacionada com o Surface Dial com base na interação do utilizador

Para além da oclusão de hardware, a mão e o braço do utilizador podem ocultar parte do ecrã ao usar o dispositivo.

A área ocluída depende da mão que está a ser usada com o dispositivo. Como o dispositivo foi concebido para ser usado principalmente com a mão não dominante, a interface relacionada ao Surface Dial deve ajustar-se à mão oposta especificada pelo utilizador (Definições do Windows > Dispositivos > Caneta e Tinta do Windows > Escolha com que mão escreve).

As interações devem responder à posição do Mostrador de Superfície em vez de ao movimento

A base do dispositivo foi desenhada para aderir ao ecrã em vez de deslizar, pois não é um dispositivo de apontamento de precisão. Por isso, esperamos que seja mais comum os utilizadores levantarem e colocarem o Surface Dial em vez de o arrastarem pelo ecrã.

Use a posição do ecrã para determinar a intenção do utilizador

Definir a ferramenta ativa com base no contexto da interface, como a proximidade a um controlo, canvas ou janela, pode melhorar a experiência do utilizador ao reduzir os passos necessários para executar uma tarefa.

Guia para programadores

Quando o Surface Dial é colocado na superfície digitalizadora do Surface Studio, é lançado um evento RadialController.ScreenContactStarted e a informação de contacto (RadialControllerScreenContactStartedEventArgs.Contact) é fornecida para a sua aplicação.

De forma semelhante, se o Surface Dial for clicado quando estiver em contacto com a superfície digitalizadora do Surface Studio, é disparado um evento RadialController.ButtonClicked e as informações de contacto (RadialControllerButtonClickedEventArgs.Contact) são disponibilizadas para a sua aplicação.

A informação de contacto (RadialControllerScreenContact) inclui a coordenada X/Y do centro do Surface Dial no espaço coordenado da aplicação (RadialControllerScreenContact.Position), bem como o retângulo delimitador (RadialControllerScreenContact.Bounds) em Device Independent Pixels (DIPs). Esta informação é muito útil para fornecer contexto à ferramenta ativa e fornecer feedback visual relacionado com o dispositivo ao utilizador.

No exemplo seguinte, criámos uma aplicação básica com quatro secções diferentes, cada uma com um slider e uma opção de alternar. Depois, usamos a posição no ecrã do Surface Dial para ditar qual conjunto de controlos deslizantes e interruptores é controlado pelo Surface Dial.

1. Primeiro, declaramos a nossa interface (quatro secções, cada uma com um slider e botão de alternar) em XAML.

   
   A interface da aplicação de exemplo

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

2. Aqui está o *code-behind* com os manipuladores definidos para a posição no ecrã 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 a aplicação, usamos o Surface Dial para interagir com ela. Primeiro, colocamos o dispositivo no ecrã do Surface Studio, que a aplicação deteta e associa à secção inferior direita (ver imagem). Depois carregamos e mantém pressionado o Surface Dial para abrir o menu e selecionar a nossa ferramenta personalizada. Uma vez ativada a ferramenta personalizada, o controlo deslizante pode ser ajustado rodando o Surface Dial e o interruptor pode ser acionado clicando no mesmo dispositivo.

A interface da aplicação de exemplo ativada usando a ferramenta personalizada Surface Dial

Resumo

Este tópico fornece uma visão geral do dispositivo de entrada Surface Dial com UX e orientações para programadores sobre como personalizar a experiência do utilizador para cenários fora do ecrã, bem como para cenários no ecrã quando usados com o Surface Studio.

Por favor, envie as suas perguntas, sugestões e feedback para radialcontroller@microsoft.com.

Artigos relacionados

Tutorial: Suportar o Surface Dial (e outros dispositivos de rotação) na sua aplicação Windows

Referência da API

• Classe RadialController
• Classe RadialControllerButtonClickedEventArgs
• Classe RadialControllerConfiguration
• Classe RadialControllerControlAcquiredEventArgs
• Classe RadialControllerMenu
• Classe RadialControllerMenuItem
• RadialControllerRotationChangedEventArgs Classe
• Classe RadialControllerScreenContact
• Classe RadialControllerScreenContactContinuedEventArgs
• Classe RadialControllerScreenContactStartedEventArgs
• RadialControllerMenuKnownIcon enum
• RadialControllerSystemMenuItemKind enum

Samples

Exemplos de tópicos

Personalização do RadialController

Outras amostras

Exemplo de livro de colorir

Tutorial de Início: Suporte o Surface Dial (e outros dispositivos de roda) na sua aplicação para Windows

Exemplos da Plataforma Universal Windows (C# e C++)

Exemplo de ambiente de trabalho Windows