Tutorial: Suporte o Surface Dial (e outros dispositivos de roda) na sua aplicação 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 personalizar as experiências de interação com o utilizador suportadas por dispositivos de volante, como o Surface Dial. Usamos excertos de uma aplicação de exemplo, que pode descarregar do GitHub (ver código de exemplo), para demonstrar as várias funcionalidades e as APIs RadialController associadas discutidas em cada etapa.

Focamo-nos no seguinte:

Especificar quais as ferramentas integradas que são exibidas no menu RadialController
Adicionar uma ferramenta personalizada ao menu
Controlo do feedback háptico
Personalização das interações com cliques
Personalização das interações de rotação

Para saber mais sobre a implementação destas e outras funcionalidades, consulte interações Surface Dial em aplicações Windows.

Introdução

O Surface Dial é um dispositivo de entrada secundário que ajuda os utilizadores a serem mais produtivos quando usado em conjunto com um dispositivo de entrada primário, como caneta, toque ou rato. Como dispositivo de entrada secundário, o Mostrador é normalmente usado com a mão não dominante para fornecer acesso tanto a comandos do sistema como a outras ferramentas e funcionalidades mais contextuais.

O Dial suporta três gestos básicos:

Pressiona e mantém pressionado para mostrar o menu de comandos incorporado.
Roda para destacar um item do menu (se o menu estiver ativo) ou para modificar a ação atual na aplicação (se o menu não estiver ativo).
Clique para selecionar o item destacado do menu (se o menu estiver ativo) ou para invocar um comando na aplicação (se o menu não estiver ativo).

Pré-requisitos

Um computador (ou uma máquina virtual) a correr Windows 10 Creators Update ou versões posteriores
Visual Studio 2019
SDK do Windows 10 (10.0.15063.0)
Um dispositivo de roda (apenas o Surface Dial neste momento)
Se és novo no desenvolvimento de aplicações Windows com Visual Studio, dá uma vista de olhos a estes tópicos antes de começares este tutorial:
- Instalar ferramentas para o SDK de Aplicativos Windows
- Crie uma aplicação "Olá, mundo" (XAML)

Configura os teus dispositivos

Certifica-te de que o teu dispositivo Windows está ligado.
Vai a Iniciar, seleciona Definições>Dispositivos>Bluetooth e outros dispositivos, e depois liga Bluetooth .
Remova a parte inferior do Surface Dial para abrir o compartimento das baterias e certifique-se de que há duas pilhas AAA no interior.
Se a aba da bateria estiver na parte inferior do mostrador, remova-a.
Pressiona e mantém pressionado o pequeno botão embutido ao lado das baterias até a luz Bluetooth piscar.
Volte ao seu dispositivo Windows e selecione Adicionar Bluetooth ou outro dispositivo.
No diálogo Adicionar um dispositivo , selecione Bluetooth>Surface Dial. O seu Surface Dial deverá agora ligar-se e ser adicionado à lista de dispositivos em Rato, teclado e caneta na página de definições de Bluetooth e outros dispositivos .
Teste o botão pressionando-o e mantendo-o pressionado durante alguns segundos para mostrar o menu incorporado.
Se o menu não aparecer no ecrã (o botão também deve vibrar), volta às definições Bluetooth, remove o dispositivo e tenta ligar o dispositivo novamente.

Observação

Os dispositivos do volante podem ser configurados através das definições do volante :

No menu Iniciar , selecione Definições.
Selecionar Dispositivos>Roda.

Agora está pronto para começar este tutorial.

Código de exemplo

Ao longo deste tutorial, utilizamos uma aplicação de exemplo para demonstrar os conceitos e funcionalidades discutidos.

Descarregue este exemplo e código-fonte do Visual Studio no GitHub em windows-appsample-get-started-radialcontroller exemplo:

Selecione o botão verde Clone ou download .
Se tiveres uma conta no GitHub, podes clonar o repositório para a tua máquina local escolhendo Abrir no Visual Studio.
Se não tiver uma conta no GitHub, ou apenas quiser uma cópia local do projeto, escolha Download ZIP (terá de voltar regularmente para descarregar as atualizações mais recentes).

Importante

A maior parte do código no exemplo é comentada. À medida que avançamos em cada etapa deste tópico, ser-lhe-á pedido que descomente várias secções do código. No Visual Studio, basta destacar as linhas de código, pressionar CTRL-K e depois CTRL-U.

Componentes que suportam a funcionalidade do volante

Estes objetos proporcionam a maior parte da experiência do dispositivo de roda para aplicações do Windows.

Componente	Description
Classe RadialController e classes relacionadas	Representa um dispositivo de entrada com roda ou acessório, como o Surface Dial.
IRadialControllerConfigurationInterop / IRadialControllerInterop Não abordamos esta funcionalidade aqui, para mais informações, consulte o exemplo do ambiente de trabalho do Windows.	Permite interoperabilidade com uma aplicação Windows.

Passo 1: Executar a amostra

Depois de descarregares a aplicação de exemplo do RadialControler, verifica se está a correr:

Abra o projeto de exemplo no Visual Studio .
Defina o menu suspenso das Plataformas de Solução para uma seleção não ARM.
Pressione F5 para compilar, implementar e executar.

Observação

Alternativamente, pode selecionar o item do menu Depurar>Iniciar depuração, ou selecionar o botão Executar na Máquina Local mostrado aqui: botão de construção de projeto do Visual Studio

A janela da aplicação abre-se e, após aparecer um ecrã de arranque durante alguns segundos, verá este ecrã inicial.

Aplicação vazia

Ok, agora temos a aplicação básica do Windows que vamos usar ao longo do resto deste tutorial. Nos passos seguintes, adicionamos a nossa funcionalidade RadialControler .

Passo 2: Funcionalidade básica do RadialController

Com a aplicação a funcionar e em primeiro plano, pressiona e mantém pressionado o Surface Dial para mostrar o menu RadialControl .

Ainda não fizemos qualquer personalização para a nossa aplicação, por isso o menu contém um conjunto padrão de ferramentas contextuais.

Estas imagens mostram duas variações do menu padrão. (Existem muitos outros, incluindo ferramentas básicas do sistema quando o Ambiente de Trabalho do Windows está ativo e nenhuma aplicação está em primeiro plano, ferramentas adicionais de escrita digital quando a Barra de Ferramentas de Tinta está presente, e ferramentas de mapeamento quando se utiliza a aplicação Mapas.

Menu RadialController (predefinido)	Menu RadialController (padrão com multimédia em reprodução)

Agora vamos começar com algumas personalizações básicas.

Passo 3: Adicionar controlos para a entrada do volante

Primeiro, vamos adicionar a interface da nossa aplicação:

Abre o ficheiro MainPage_Basic.xam.
Encontre o código marcado com o título deste passo ("<-- Passo 3: Adicionar controlos para a entrada do volante -->").

Descomentar as linhas seguintes.

<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 momento, apenas o botão de inicializar amostra , o controlo deslizante e o interruptor de alternância estão ativados. Os outros botões são usados em etapas posteriores para adicionar e remover itens do menu do RadialController que dão acesso ao controlo deslizante e ao interruptor de alternância.

Interface básica de aplicação de exemplo

Agora vamos adicionar o código necessário para permitir o acesso do RadialController aos nossos controlos.

Abre o ficheiro MainPage_Basic.xaml.cs.
Encontre o código marcado com o título deste passo ("// Passo 4: Personalização básica do menu RadialController").

Descomentar as seguintes linhas:

As referências de tipo Windows.UI.Input e Windows.Storage.Streams são usadas para funcionalidades nos passos seguintes:
```
// Using directives for RadialController functionality.
using Windows.UI.Input;
```

Estes objetos globais (RadialController, RadialControllerConfiguration, RadialControllerMenuItem) são usados em toda a nossa aplicação.

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

Aqui, especificamos o handler de Click para o botão que ativa os nossos controlos e inicializa o nosso item personalizado do menu RadialController .
```
InitializeSampleButton.Click += (sender, args) =>
{ InitializeSample(sender, args); };
```

De seguida, inicializamos o nosso objeto RadialController e configuramos os handlers 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 o nosso item personalizado do menu RadialController. Usamos o CreateForCurrentView para obter uma referência ao nosso objeto RadialControler , definimos a sensibilidade à rotação para "1" usando a propriedade RotationResolutionInDegrees , depois criamos o nosso RadialControllerMenuItem usando o CreateFromFontGlyph, adicionamos o elemento do menu à coleção de itens do menu RadialController e, finalmente, usamos o SetDefaultMenuItems para limpar os itens predefinidos do menu e deixamos apenas a 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;
}

Agora, volta a executar a aplicação.
Selecione o botão Inicializar controlador radial .
Com a aplicação em primeiro plano, pressione e mantenha pressionado o Surface Dial para mostrar o menu. Note que todas as ferramentas padrão foram removidas (usando o método RadialControllerConfiguration.SetDefaultMenuItems ), restando apenas a ferramenta personalizada. Aqui está o menu com a nossa ferramenta personalizada.

Menu RadialController (personalizado)

Selecione a ferramenta personalizada e experimente as interações agora suportadas pelo Surface Dial:
- Uma ação de rodar move o slider.
- Um clique define o botão para ligar ou desligar.

Ok, vamos conectar esses botões.

Neste passo, ligamos os botões Adicionar/Remover item e Reiniciar o menu RadialController para mostrar como pode personalizar dinamicamente o menu.

Abre o ficheiro MainPage_Basic.xaml.cs.
Encontre o código marcado com o título deste passo ("// Passo 5: Configurar menu em tempo de execução").

Descomenta o código nos métodos seguintes e executa a aplicação novamente, mas não seleciones nenhum botão (guarda isso para o passo seguinte).

// 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[] { });
}

Selecione o botão Remover item e depois pressione e mantenha o botão para mostrar o menu novamente.

Repara que o menu agora contém a coleção padrão de ferramentas. Lembre-se que, no Passo 3, ao configurar o nosso menu personalizado, removemos todas as ferramentas padrão e adicionámos apenas a nossa ferramenta personalizada. Também notámos que, quando o menu é definido para uma coleção vazia, os itens predefinidos para o contexto atual são reinstaurados. (Adicionámos a nossa ferramenta personalizada antes de remover as ferramentas padrão.)
Selecione o botão Adicionar item e depois pressione e mantenha o botão de seleção.

Note que o menu agora contém tanto a coleção padrão de ferramentas como a nossa ferramenta personalizada.
Selecione o botão do menu de Reiniciar RadialController e, depois, pressione e mantenha o dial pressionado.

Repara que o menu voltou ao estado original.

Passo 6: Personalize a capacidade háptica do dispositivo

O Surface Dial, e outros dispositivos de roda, podem fornecer aos utilizadores feedback háptico correspondente à interação atual (baseado em clique ou rotação).

Neste passo, mostramos como pode personalizar o feedback háptico associando os nossos controlos deslizantes e toggle switch, usando-os para especificar dinamicamente o comportamento do feedback háptico. Neste exemplo, o interruptor de alavanca deve estar ativado para que o feedback seja ativado, enquanto o valor do deslizante especifica com que frequência o feedback do clique é repetido.

Observação

O feedback háptico pode ser desativado pelo utilizador na página Definições>Dispositivos>Volante.

Abre o ficheiro App.xaml.cs.
Encontre o código marcado com o título desta etapa ("Passo 6: Personalizar a háptica do dispositivo").

Comenta a primeira e a terceira linha ("MainPage_Basic" e "MainPage") e descomenta a segunda ("MainPage_Haptics").

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

Abre o ficheiro MainPage_Haptics.xam.
Encontre o código marcado com o título deste passo ("<-- Passo 6: Personalizar a háptica do dispositivo -->").

Descomentar as linhas seguintes. (Este código da interface indica simplesmente quais as funcionalidades hápticas suportadas pelo 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>

Abra o ficheiro MainPage_Haptics.xaml.cs
Encontre o código marcado com o título deste passo ("Passo 6: Personalização de Haptics")

Descomentar as seguintes linhas:

A referência de tipo Windows.Devices.Haptics é usada para funcionalidades nos passos seguintes.
```
using Windows.Devices.Haptics;
```
Aqui, especificamos o handler do evento ControlAcquired que é ativado quando o nosso elemento personalizado do menu RadialController é selecionado.
```
radialController.ControlAcquired += (rc_sender, args) =>
{ RadialController_ControlAcquired(rc_sender, args); };
```

De seguida, definimos o handler ControlAcquired, onde desativamos o feedback háptico por defeito e inicializamos o nosso UI háptico.

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

Nos nossos manipuladores de eventos RotationChanged e ButtonClicked, ligamos os respetivos controlos deslizantes e botões de alternância aos nossos dispositivos 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"));
        }
    }
}

Finalmente, recebemos a Forma de Onda solicitada (se suportada) para o feedback tátil.

// 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 executa a aplicação novamente para experimentar a háptica personalizada, alterando o valor do deslizante e o estado do interruptor de alternância.

Passo 7: Defina interações no ecrã para o Surface Studio e dispositivos semelhantes

Combinado com o Surface Studio, o Surface Dial pode proporcionar uma experiência de utilizador ainda mais distinta.

Para além da experiência padrão de carregar e manter o menu descrita, o Surface Dial também pode ser colocado diretamente no ecrã do Surface Studio. Isto permite um menu especial "no ecrã".

Ao detetar tanto a localização do contacto como os limites do Surface Dial, o sistema lida com a oclusão causada pelo dispositivo e apresenta uma versão aumentada do menu que envolve o exterior do Dial. Esta mesma informação pode também ser usada pela sua aplicação para adaptar a interface tanto à presença do dispositivo como ao seu uso previsto, como a posição da mão e do braço do utilizador.

O exemplo que acompanha este tutorial inclui um exemplo ligeiramente mais complexo que demonstra algumas destas capacidades.

Para ver isto em ação (vai precisar de um Surface Studio):

Descarregue o exemplo num dispositivo Surface Studio (com Visual Studio instalado)
Abra a amostra no Visual Studio
Abra o ficheiro App.xaml.cs
Encontre o código marcado com o título deste passo ("Passo 7: Definir interações no ecrã para Surface Studio e dispositivos semelhantes")

Comenta a primeira e a segunda linha ("MainPage_Basic" e "MainPage_Haptics") e descomenta a terceira ("MainPage")

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

Executa a aplicação e coloca o Surface Dial em cada uma das duas regiões de controlo, alternando entre elas.

Resumo

Parabéns, concluiu o Tutorial de Iniciação: Dar suporte ao Surface Dial (e outros dispositivos baseados em volante) na sua aplicação do Windows! Mostrámos-lhe o código básico necessário para suportar um dispositivo volante nas suas aplicações Windows e como proporcionar algumas das experiências de utilizador mais avançadas suportadas pelas APIs do RadialControler .

Interações do Surface Dial