Compartilhar via

Tutorial: Dar suporte ao Surface Dial (e outros dispositivos de roda) em seu aplicativo do Windows

Imagem do Surface Dial com o Surface Studio
Surface Dial com Surface Studio e Surface Pen (disponível para compra na Microsoft Store).

Este tutorial explica como customizar as experiências de interação do usuário compatíveis com dispositivos giratórios, como o Surface Dial. Usamos snippets de um aplicativo de exemplo, que você pode baixar do GitHub (consulte o código de exemplo), para demonstrar os vários recursos e as APIs radialController associadas discutidas em cada etapa.

Nos concentramos no seguinte:

  • Especificando quais ferramentas internas são exibidas no menu RadialController
  • Adicionando uma ferramenta personalizada ao menu
  • Controlando feedback háptico
  • Personalizando interações de clique
  • Personalizando interações de rotação

Para obter mais informações sobre como implementar esses e outros recursos, consulte interações do Surface Dial em aplicativos do Windows.

Introdução

O Surface Dial é um dispositivo de entrada secundário que ajuda os usuários a serem mais produtivos quando usados junto com um dispositivo de entrada principal, como caneta, toque ou mouse. Como um dispositivo de entrada secundário, o Dial normalmente é usado com a mão não dominante para fornecer acesso aos comandos do sistema e a outras ferramentas e funcionalidades mais contextuais.

O Dial dá suporte a três gestos básicos:

  • Pressione e segure para exibir o menu interno de comandos.
  • Gire para realçar um item de menu (se o menu estiver ativo) ou modificar a ação atual no aplicativo (se o menu não estiver ativo).
  • Clique para selecionar o item de menu realçado (se o menu estiver ativo) ou para invocar um comando no aplicativo (se o menu não estiver ativo).

Pré-requisitos

Configurar seus dispositivos

  1. Verifique se o dispositivo Windows está ativado.
  2. Vá para Iniciar, selecione Configurações>de Dispositivos>Bluetooth e outros dispositivos e ative o Bluetooth .
  3. Remova a parte inferior do Surface Dial para abrir o compartimento da bateria e verifique se há duas baterias AAA dentro.
  4. Se a guia da bateria estiver presente na parte inferior do Dial, remova-a.
  5. Pressione e segure o botão pequeno de entrada ao lado das baterias até a luz Bluetooth piscar.
  6. Volte para seu dispositivo Windows e selecione Adicionar Bluetooth ou outro dispositivo.
  7. Na caixa de diálogo Adicionar um dispositivo , selecione Bluetooth>Surface Dial. O Surface Dial agora deve se conectar e ser adicionado à lista de dispositivos em Mouse, teclado e caneta na página de Configurações de Bluetooth e outros dispositivos.
  8. Teste o Dial pressionando-o e mantendo-o pressionado por alguns segundos para exibir o menu interno.
  9. Se o menu não for exibido na tela (o Dial também deve vibrar), volte para as configurações de Bluetooth, remova o dispositivo e tente conectar o dispositivo novamente.

Observação

Os dispositivos Wheel podem ser configurados por meio das configurações do Wheel:

  1. No menu Iniciar , selecione Configurações.
  2. Selecione Dispositivos>Roda.
    Tela de configurações de roda

Agora você está pronto para iniciar este tutorial.

Código de exemplo

Ao longo deste tutorial, usamos um aplicativo de exemplo para demonstrar os conceitos e a funcionalidade discutidos.

Baixe este exemplo do Visual Studio e o código-fonte do GitHub em windows-appsample-get-started-radialcontroller sample:

  1. Selecione o botão clonar ou baixar verde.
    Clonando o repositório
  2. Se você tiver uma conta do GitHub, poderá clonar o repositório em seu computador local escolhendo Abrir no Visual Studio.
  3. Se você não tiver uma conta do GitHub ou quiser apenas uma cópia local do projeto, escolha Baixar ZIP (você terá que fazer check-back regularmente para baixar as atualizações mais recentes).

Importante

A maior parte do código no exemplo está comentado. Conforme passamos por cada etapa deste tópico, você será solicitado a descomentar várias seções do código. No Visual Studio, basta realçar as linhas de código e pressionar CTRL-K e, em seguida, CTRL-U.

Componentes que dão suporte à funcionalidade de roda

Esses objetos fornecem a maior parte da experiência do dispositivo de roda para aplicativos do Windows.

Componente Description
Classe RadialController e relacionados Representa um dispositivo ou acessório de entrada de roda, como o Surface Dial.
IRadialControllerConfigurationInterop / IRadialControllerInterop
Não abordamos essa funcionalidade aqui, para obter mais informações, consulte o exemplo da área de trabalho do Windows.		 Habilita a interoperabilidade com um aplicativo do Windows.

Etapa 1: Executar o exemplo

Depois de baixar o aplicativo de exemplo RadialController, verifique se ele é executado:

  1. Abra o projeto de exemplo no Visual Studio.
  2. Defina a lista suspensa Plataformas de Solução como uma seleção que não seja Arm.
  3. Pressione F5 para compilar, implantar e executar.

Observação

Como alternativa, você pode selecionar o item de menu Depuração>Iniciar depuração ou selecionar o botão Máquina Local Executar mostrado aqui: botão do projeto de Build do Visual Studio

A janela do aplicativo abre e, depois que uma tela de introdução for exibida por alguns segundos, você verá essa tela inicial.

Aplicativo vazio

Agora temos o aplicativo básico do Windows que usaremos ao longo do restante deste tutorial. Nas etapas a seguir, adicionamos nossa funcionalidade RadialController .

Etapa 2: Funcionalidade básica do RadialController

Com o aplicativo em execução e em primeiro plano, pressione e segure o Surface Dial para exibir o menu RadialController .

Ainda não fizemos nenhuma personalização para nosso aplicativo, portanto, o menu contém um conjunto padrão de ferramentas contextuais.

Essas imagens mostram duas variações do menu padrão. (Há muitas outras, incluindo apenas ferramentas básicas do sistema quando a Área de Trabalho do Windows está ativa e nenhum aplicativo está em primeiro plano, ferramentas de escrita à tinta adicionais quando um InkToolbar está presente e ferramentas de mapeamento quando você está usando o aplicativo Mapas.

Menu RadialController (padrão) Menu RadialController (padrão com reprodução de mídia)
Menu padrão do Radial Controller Menu RadialController padrão com música

Agora vamos começar com uma personalização básica.

Etapa 3: Adicionar controles para entrada de roda

Primeiro, vamos adicionar a interface do usuário para nosso aplicativo:

  1. Abra o arquivo MainPage_Basic.xaml.

  2. Localize o código marcado com o título desta etapa ("<-- Etapa 3: Adicionar controles para entrada de roda -->").

  3. Descomente as linhas a seguir.

    <Button x:Name="InitializeSampleButton" 
        HorizontalAlignment="Center" 
        Margin="10" 
        Content="Initialize sample" />
<ToggleButton x:Name="AddRemoveToggleButton"
                HorizontalAlignment="Center" 
                Margin="10" 
                Content="Remove Item"
                IsChecked="True" 
                IsEnabled="False"/>
<Button x:Name="ResetControllerButton" 
        HorizontalAlignment="Center" 
        Margin="10" 
        Content="Reset RadialController menu" 
        IsEnabled="False"/>
<Slider x:Name="RotationSlider" Minimum="0" Maximum="10"
        Width="300"
        HorizontalAlignment="Center"/>
<TextBlock Text="{Binding ElementName=RotationSlider, Mode=OneWay, Path=Value}"
            Margin="0,0,0,20"
            HorizontalAlignment="Center"/>
<ToggleSwitch x:Name="ClickToggle"
                MinWidth="0" 
                Margin="0,0,0,20"
                HorizontalAlignment="center"/>

Neste ponto, somente o botão Inicializar exemplo, o controle deslizante e o interruptor estão habilitados. Os outros botões são usados em etapas posteriores para adicionar e remover itens do menu RadialController que fornecem acesso ao controle deslizante e à tecla de alternância.

Interface do usuário básica do aplicativo de exemplo

Etapa 4: Personalizar o menu RadialController básico

Agora vamos adicionar o código necessário para habilitar o acesso radialController aos nossos controles.

  1. Abra o arquivo MainPage_Basic.xaml.cs.
  2. Localize o código marcado com o título desta etapa ("// Etapa 4: personalização básica do menu RadialController").
  3. Descomente as seguintes linhas:

    • As referências de tipo Windows.UI.Input e Windows.Storage.Streams são usadas para funcionalidade nas etapas seguintes:

      // Using directives for RadialController functionality.
using Windows.UI.Input;

    • Esses objetos globais (RadialController, RadialControllerConfiguration, RadialControllerMenuItem) são usados em todo o nosso aplicativo.

      private RadialController radialController;
private RadialControllerConfiguration radialControllerConfig;
private RadialControllerMenuItem radialControllerMenuItem;

    • Aqui, especificamos o manipulador clique para o botão que habilita nossos controles e inicializa nosso item de menu RadialController personalizado.

      InitializeSampleButton.Click += (sender, args) =>
{ InitializeSample(sender, args); };

    • Em seguida, inicializamos nosso objeto RadialController e configuramos manipuladores para os eventos RotationChanged e ButtonClicked .

      // Set up the app UI and RadialController.
private void InitializeSample(object sender, RoutedEventArgs e)
{
    ResetControllerButton.IsEnabled = true;
    AddRemoveToggleButton.IsEnabled = true;

    ResetControllerButton.Click += (resetsender, args) =>
    { ResetController(resetsender, args); };
    AddRemoveToggleButton.Click += (togglesender, args) =>
    { AddRemoveItem(togglesender, args); };

    InitializeController(sender, e);
}

    • Aqui, inicializamos nosso item de menu RadialController personalizado. Usamos CreateForCurrentView para obter uma referência ao nosso objeto RadialController , definimos a sensibilidade de rotação como "1" usando a propriedade RotationResolutionInDegrees , criamos nosso RadialControllerMenuItem usando CreateFromFontGlyph, adicionamos o item de menu à coleção de itens de menu RadialController e, por fim, usamos SetDefaultMenuItems para limpar os itens de menu padrão e deixar apenas nossa ferramenta personalizada.

      // Configure RadialController menu and custom tool.
private void InitializeController(object sender, RoutedEventArgs args)
{
    // Create a reference to the RadialController.
    radialController = RadialController.CreateForCurrentView();
    // Set rotation resolution to 1 degree of sensitivity.
    radialController.RotationResolutionInDegrees = 1;

    // Create the custom menu items.
    // Here, we use a font glyph for our custom tool.
    radialControllerMenuItem =
        RadialControllerMenuItem.CreateFromFontGlyph("SampleTool", "\xE1E3", "Segoe MDL2 Assets");

    // Add the item to the RadialController menu.
    radialController.Menu.Items.Add(radialControllerMenuItem);

    // Remove built-in tools to declutter the menu.
    // NOTE: The Surface Dial menu must have at least one menu item. 
    // If all built-in tools are removed before you add a custom 
    // tool, the default tools are restored and your tool is appended 
    // to the default collection.
    radialControllerConfig =
        RadialControllerConfiguration.GetForCurrentView();
    radialControllerConfig.SetDefaultMenuItems(
        new RadialControllerSystemMenuItemKind[] { });

    // Declare input handlers for the RadialController.
    // NOTE: These events are only fired when a custom tool is active.
    radialController.ButtonClicked += (clicksender, clickargs) =>
    { RadialController_ButtonClicked(clicksender, clickargs); };
    radialController.RotationChanged += (rotationsender, rotationargs) =>
    { RadialController_RotationChanged(rotationsender, rotationargs); };
}

// Connect wheel device rotation to slider control.
private void RadialController_RotationChanged(
    object sender, RadialControllerRotationChangedEventArgs args)
{
    if (RotationSlider.Value + args.RotationDeltaInDegrees >= RotationSlider.Maximum)
    {
        RotationSlider.Value = RotationSlider.Maximum;
    }
    else if (RotationSlider.Value + args.RotationDeltaInDegrees < RotationSlider.Minimum)
    {
        RotationSlider.Value = RotationSlider.Minimum;
    }
    else
    {
        RotationSlider.Value += args.RotationDeltaInDegrees;
    }
}

// Connect wheel device click to toggle switch control.
private void RadialController_ButtonClicked(
    object sender, RadialControllerButtonClickedEventArgs args)
{
    ClickToggle.IsOn = !ClickToggle.IsOn;
}
  4. Agora, execute o aplicativo novamente.
  5. Selecione o botão Inicializar controlador radial .
  6. Com o aplicativo em primeiro plano, pressione e segure o Surface Dial para exibir o menu. Observe que todas as ferramentas padrão foram removidas (usando o método RadialControllerConfiguration.SetDefaultMenuItems ), deixando apenas a ferramenta personalizada. Aqui está o menu com nossa ferramenta personalizada.
Menu RadialController (personalizado)
Menu RadialController personalizado
  1. Selecione a ferramenta personalizada e experimente as interações agora com suporte por meio do Surface Dial:
    • Uma ação de rotação move o controle deslizante.
    • Um clique configura o alternador para ligado ou desligado.

Ok, vamos conectar esses botões.

Etapa 5: Configurar o menu em runtime

Nesta etapa, conectamos os botões Adicionar/Remover item e Redefinir RadialController para mostrar como você pode personalizar dinamicamente o menu.

  1. Abra o arquivo MainPage_Basic.xaml.cs.

  2. Localize o código marcado com o título desta etapa ("// Etapa 5: Configurar menu em runtime").

  3. Descompacte o código nos métodos a seguir e execute o aplicativo novamente, mas não selecione nenhum botão (salve-o para a próxima etapa).

    // Add or remove the custom tool.
private void AddRemoveItem(object sender, RoutedEventArgs args)
{
    if (AddRemoveToggleButton?.IsChecked == true)
    {
        AddRemoveToggleButton.Content = "Remove item";
        if (!radialController.Menu.Items.Contains(radialControllerMenuItem))
        {
            radialController.Menu.Items.Add(radialControllerMenuItem);
        }
    }
    else if (AddRemoveToggleButton?.IsChecked == false)
    {
        AddRemoveToggleButton.Content = "Add item";
        if (radialController.Menu.Items.Contains(radialControllerMenuItem))
        {
            radialController.Menu.Items.Remove(radialControllerMenuItem);
            // Attempts to select and activate the previously selected tool.
            // NOTE: Does not differentiate between built-in and custom tools.
            radialController.Menu.TrySelectPreviouslySelectedMenuItem();
        }
    }
}

// Reset the RadialController to initial state.
private void ResetController(object sender, RoutedEventArgs arg)
{
    if (!radialController.Menu.Items.Contains(radialControllerMenuItem))
    {
        radialController.Menu.Items.Add(radialControllerMenuItem);
    }
    AddRemoveToggleButton.Content = "Remove item";
    AddRemoveToggleButton.IsChecked = true;
    radialControllerConfig.SetDefaultMenuItems(
        new RadialControllerSystemMenuItemKind[] { });
}

  4. Selecione o botão Remover item e depois pressione e segure o Dial para exibir o menu novamente.

    Observe que o menu agora contém a coleção padrão de ferramentas. Lembre-se de que, na Etapa 3, ao configurar nosso menu personalizado, removemos todas as ferramentas padrão e adicionamos apenas nossa ferramenta personalizada. Também observamos que, quando o menu é definido como uma coleção vazia, os itens padrão para o contexto atual são restabelecidos. (Adicionamos nossa ferramenta personalizada antes de remover as ferramentas padrão.)

  5. Selecione o botão Adicionar item e pressione e mantenha pressionada a tecla Dial.

    Observe que o menu agora contém a coleção padrão de ferramentas e nossa ferramenta personalizada.

  6. Selecione o botão de menu Redefinir RadialController e pressione e segure o Botão de Discagem.

    Observe que o menu está de volta ao estado original.

Etapa 6: Personalizar os hápticos do dispositivo

O Surface Dial e outros dispositivos de roda podem fornecer aos usuários feedback tátil correspondente à interação atual, seja por clique ou rotação.

Nesta etapa, mostramos como você pode personalizar o feedback háptico associando nosso controle deslizante e interruptor de alternância e usando-os para especificar dinamicamente o comportamento do feedback háptico. Para este exemplo, a chave de alternância deve ser definida como ativada para que os comentários sejam habilitados, enquanto o valor do controle deslizante especifica a frequência com que os comentários de clique são repetidos.

Observação

Os feedbacks táteis podem ser desabilitados pelo usuário na página Configurações>Dispositivos>Roda.

  1. Abra o arquivo App.xaml.cs.

  2. Localize o código marcado com o título desta etapa ("Etapa 6: Personalizar a háptica do dispositivo").

  3. Comente a primeira e a terceira linhas ("MainPage_Basic" e "MainPage") e descomente a segunda ("MainPage_Haptics").

    rootFrame.Navigate(typeof(MainPage_Basic), e.Arguments);
rootFrame.Navigate(typeof(MainPage_Haptics), e.Arguments);
rootFrame.Navigate(typeof(MainPage), e.Arguments);

  4. Abra o arquivo MainPage_Haptics.xaml.

  5. Localize o código marcado com o título desta etapa ("<-- Etapa 6: Personalizar os haptics do dispositivo -->").

  6. Descomente as linhas a seguir. (Esse código de interface do usuário simplesmente indica quais recursos hápticos são compatíveis com o dispositivo atual.)

    <StackPanel x:Name="HapticsStack" 
            Orientation="Vertical" 
            HorizontalAlignment="Center" 
            BorderBrush="Gray" 
            BorderThickness="1">
    <TextBlock Padding="10" 
                Text="Supported haptics properties:" />
    <CheckBox x:Name="CBDefault" 
                Content="Default" 
                Padding="10" 
                IsEnabled="False" 
                IsChecked="True" />
    <CheckBox x:Name="CBIntensity" 
                Content="Intensity" 
                Padding="10" 
                IsEnabled="False" 
                IsThreeState="True" 
                IsChecked="{x:Null}" />
    <CheckBox x:Name="CBPlayCount" 
                Content="Play count" 
                Padding="10" 
                IsEnabled="False" 
                IsThreeState="True" 
                IsChecked="{x:Null}" />
    <CheckBox x:Name="CBPlayDuration" 
                Content="Play duration" 
                Padding="10" 
                IsEnabled="False" 
                IsThreeState="True" 
                IsChecked="{x:Null}" />
    <CheckBox x:Name="CBReplayPauseInterval" 
                Content="Replay/pause interval" 
                Padding="10" 
                IsEnabled="False" 
                IsThreeState="True" 
                IsChecked="{x:Null}" />
    <CheckBox x:Name="CBBuzzContinuous" 
                Content="Buzz continuous" 
                Padding="10" 
                IsEnabled="False" 
                IsThreeState="True" 
                IsChecked="{x:Null}" />
    <CheckBox x:Name="CBClick" 
                Content="Click" 
                Padding="10" 
                IsEnabled="False" 
                IsThreeState="True" 
                IsChecked="{x:Null}" />
    <CheckBox x:Name="CBPress" 
                Content="Press" 
                Padding="10" 
                IsEnabled="False" 
                IsThreeState="True" 
                IsChecked="{x:Null}" />
    <CheckBox x:Name="CBRelease" 
                Content="Release" 
                Padding="10" 
                IsEnabled="False" 
                IsThreeState="True" 
                IsChecked="{x:Null}" />
    <CheckBox x:Name="CBRumbleContinuous" 
                Content="Rumble continuous" 
                Padding="10" 
                IsEnabled="False" 
                IsThreeState="True" 
                IsChecked="{x:Null}" />
</StackPanel>

  7. Abrir o arquivo de MainPage_Haptics.xaml.cs

  8. Localize o código marcado com o título desta etapa ("Etapa 6: personalização háptica")

  9. Descomente as seguintes linhas:

    • A referência de tipo Windows.Devices.Haptics é usada para funcionalidade nas etapas subsequentes.

      using Windows.Devices.Haptics;

    • Aqui, especificamos o manipulador para o evento ControlAcquired que é disparado quando nosso item de menu RadialController personalizado é selecionado.

      radialController.ControlAcquired += (rc_sender, args) =>
{ RadialController_ControlAcquired(rc_sender, args); };

    • Em seguida, definimos o manipulador ControlAcquired , em que desabilitamos os comentários hápticos padrão e inicializamos nossa interface do usuário háptica.

      private void RadialController_ControlAcquired(
    RadialController rc_sender,
    RadialControllerControlAcquiredEventArgs args)
{
    // Turn off default haptic feedback.
    radialController.UseAutomaticHapticFeedback = false;

    SimpleHapticsController hapticsController =
        args.SimpleHapticsController;

    // Enumerate haptic support.
    IReadOnlyCollection<SimpleHapticsControllerFeedback> supportedFeedback =
        hapticsController.SupportedFeedback;

    foreach (SimpleHapticsControllerFeedback feedback in supportedFeedback)
    {
        if (feedback.Waveform == KnownSimpleHapticsControllerWaveforms.BuzzContinuous)
        {
            CBBuzzContinuous.IsEnabled = true;
            CBBuzzContinuous.IsChecked = true;
        }
        else if (feedback.Waveform == KnownSimpleHapticsControllerWaveforms.Click)
        {
            CBClick.IsEnabled = true;
            CBClick.IsChecked = true;
        }
        else if (feedback.Waveform == KnownSimpleHapticsControllerWaveforms.Press)
        {
            CBPress.IsEnabled = true;
            CBPress.IsChecked = true;
        }
        else if (feedback.Waveform == KnownSimpleHapticsControllerWaveforms.Release)
        {
            CBRelease.IsEnabled = true;
            CBRelease.IsChecked = true;
        }
        else if (feedback.Waveform == KnownSimpleHapticsControllerWaveforms.RumbleContinuous)
        {
            CBRumbleContinuous.IsEnabled = true;
            CBRumbleContinuous.IsChecked = true;
        }
    }

    if (hapticsController?.IsIntensitySupported == true)
    {
        CBIntensity.IsEnabled = true;
        CBIntensity.IsChecked = true;
    }
    if (hapticsController?.IsPlayCountSupported == true)
    {
        CBPlayCount.IsEnabled = true;
        CBPlayCount.IsChecked = true;
    }
    if (hapticsController?.IsPlayDurationSupported == true)
    {
        CBPlayDuration.IsEnabled = true;
        CBPlayDuration.IsChecked = true;
    }
    if (hapticsController?.IsReplayPauseIntervalSupported == true)
    {
        CBReplayPauseInterval.IsEnabled = true;
        CBReplayPauseInterval.IsChecked = true;
    }
}

    • Em nossos manipuladores de eventos RotationChanged e ButtonClicked, conectamos o controle deslizante e os controles de botão de alternância correspondentes aos nossos hápticos personalizados.

      // Connect wheel device rotation to slider control.
private void RadialController_RotationChanged(
    object sender, RadialControllerRotationChangedEventArgs args)
{
    ...
    if (ClickToggle.IsOn && 
        (RotationSlider.Value > RotationSlider.Minimum) && 
        (RotationSlider.Value < RotationSlider.Maximum))
    {
        SimpleHapticsControllerFeedback waveform = 
            FindWaveform(args.SimpleHapticsController, 
            KnownSimpleHapticsControllerWaveforms.BuzzContinuous);
        if (waveform != null)
        {
            args.SimpleHapticsController.SendHapticFeedback(waveform);
        }
    }
}

private void RadialController_ButtonClicked(
    object sender, RadialControllerButtonClickedEventArgs args)
{
    ...

    if (RotationSlider?.Value > 0)
    {
        SimpleHapticsControllerFeedback waveform = 
            FindWaveform(args.SimpleHapticsController, 
            KnownSimpleHapticsControllerWaveforms.Click);

        if (waveform != null)
        {
            args.SimpleHapticsController.SendHapticFeedbackForPlayCount(
                waveform, 1.0, 
                (int)RotationSlider.Value, 
                TimeSpan.Parse("1"));
        }
    }
}

    • Por fim, obtemos o Waveform solicitado (se houver suporte) para os comentários hápticos.

      // Get the requested waveform.
private SimpleHapticsControllerFeedback FindWaveform(
    SimpleHapticsController hapticsController,
    ushort waveform)
{
    foreach (var hapticInfo in hapticsController.SupportedFeedback)
    {
        if (hapticInfo.Waveform == waveform)
        {
            return hapticInfo;
        }
    }
    return null;
}

Agora, rode o aplicativo novamente para experimentar o feedback tátil personalizado ao alterar o valor do controle deslizante e o estado do interruptor.

Etapa 7: Definir interações na tela para o Surface Studio e dispositivos semelhantes

Emparelhado com o Surface Studio, o Surface Dial pode fornecer uma experiência de usuário ainda mais distinta.

Além da experiência de menu de pressionamento e retenção 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 tanto a localização do contato quanto os limites do Surface Dial, o sistema lida com a oclusão causada pelo dispositivo e exibe uma versão maior do menu que se espalha ao redor da parte externa do Dial. Essas mesmas informações também podem ser usadas pelo aplicativo para adaptar a interface do usuário tanto para a presença do dispositivo quanto para o uso previsto, como o posicionamento da mão e do braço do usuário.

O exemplo que acompanha este tutorial inclui um exemplo um pouco mais complexo que demonstra alguns desses recursos.

Para ver isso em ação (você precisará de um Surface Studio):

  1. Baixe o exemplo em um dispositivo Surface Studio (com o Visual Studio instalado)

  2. Abra o exemplo no Visual Studio

  3. Abrir o arquivo App.xaml.cs

  4. Localize o código marcado com o título desta etapa ("Etapa 7: Definir interações na tela para o Surface Studio e dispositivos semelhantes")

  5. Comente a primeira e a segunda linhas ("MainPage_Basic" e "MainPage_Haptics") e descomente a terceira ("MainPage")

    rootFrame.Navigate(typeof(MainPage_Basic), e.Arguments);
rootFrame.Navigate(typeof(MainPage_Haptics), e.Arguments);
rootFrame.Navigate(typeof(MainPage), e.Arguments);

  6. Execute o aplicativo e coloque o Surface Dial em cada uma das duas regiões de controle, alternando entre elas.
    RadialController na tela

Resumo

Parabéns, você concluiu o Tutorial de Introdução: Suporte ao Surface Dial (e outros dispositivos de roda) em seu aplicativo do Windows! Mostramos o código básico necessário para oferecer suporte a um dispositivo de roda em seus aplicativos do Windows e como proporcionar algumas das experiências de usuário mais ricas compatíveis com as APIs RadialController.

Interações do Surface Dial

Referência de API

Samples

Exemplos de tópico

Personalização do RadialController

Outros exemplos

Exemplo de Livro de Colorir

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

Exemplo da área de trabalho do Windows

  • Last updated on