Interakcje Surface Dial

Surface Dial z Surface Studio i piórem.

Przegląd

Urządzenia z pokrętłem Windows, takie jak Surface Dial, to nowa kategoria urządzeń wejściowych, które umożliwiają korzystanie z wielu atrakcyjnych i unikatowych doświadczeń interakcji użytkownika dla aplikacji Windows i Windows.

Z formą opartą na obracaniu (lub geście), Surface Dial jest zaprojektowane jako pomocnicze, wielomodalne urządzenie wejściowe, które uzupełnia dane z urządzenia głównego. W większości przypadków urządzenie jest manipulowane przez niedominującą rękę użytkownika podczas wykonywania zadania dominującą ręką (na przykład rysowanie za pomocą rysika). Nie jest przeznaczony do precyzyjnego wprowadzania wskaźników (takich jak dotyk, pióro lub mysz).

Surface Dial obsługuje również akcję naciśnij i przytrzymaj oraz akcję kliknięcie. Naciśnij i przytrzymaj ma jedną funkcję: wyświetlanie menu poleceń. Jeśli menu jest aktywne, obracanie i klikanie danych wejściowych jest przetwarzane przez menu. W przeciwnym razie dane wejściowe są przekazywane do aplikacji do przetwarzania.

Tak jak we wszystkich urządzeniach wejściowych Windows, można personalizować i dopasowywać środowisko interakcji Surface Dial, aby odpowiadało funkcjonalności w aplikacjach.

Integracja systemu

Surface Dial jest ściśle zintegrowana z Windows i obsługuje zestaw wbudowanych narzędzi w menu: głośność systemu, przewijanie ekranu, powiększanie/pomniejszanie i cofanie/ponawianie.

Ta kolekcja wbudowanych narzędzi dostosowuje się do bieżącego kontekstu systemu w celu uwzględnienia następujących elementów:

• Narzędzie do jasności systemu, gdy użytkownik znajduje się na pulpicie systemu Windows
• Poprzednie/następne narzędzie do śledzenia podczas odtwarzania multimediów

Oprócz tej ogólnej obsługi platformy Surface Dial jest również ściśle zintegrowana z kontrolkami platformy Windows Ink (InkCanvas i InkToolbar).

Surface Dial w zestawie z Surface Pen

W przypadku użycia z Surface Dial te elementy sterujące umożliwiają dodatkowe funkcje modyfikowania atrybutów pisma odręcznego i kontrolowania szablonu linijki w pasku narzędzi pisma odręcznego.

Po otwarciu menu Surface Dial w aplikacji do rysowania używającej paska narzędzi do pisania odręcznego, menu zawiera teraz narzędzia do kontrolowania rodzaju pióra i grubości pędzla. Po włączeniu linijki do menu zostanie dodane odpowiednie narzędzie, które umożliwia urządzeniu sterowanie położeniem i kątem linijki.

menu Surface Dial z narzędziem wyboru pióra dla paska narzędzi Windows Ink

menu
menu Surface Dial z narzędziem do ustawiania rozmiaru pociągnięcia na pasku narzędzi Windows Ink

menu Surface Dial z narzędziem linijki do paska narzędzi Windows Ink

Dostosowywanie użytkownika

Użytkownicy mogą dostosować niektóre aspekty środowiska Dial za pomocą strony Windows Ustawienia -> Urządzenia -> Wheel, w tym domyślne narzędzia, drgania (lub informacje zwrotne haptyczne) oraz ręki pisania (lub dominującej).

Podczas dostosowywania środowiska użytkownika Surface Dial należy zawsze upewnić się, że dana funkcja lub zachowanie są dostępne i włączone przez użytkownika.

Narzędzia niestandardowe

W tym miejscu omówimy zarówno środowisko użytkownika, jak i wskazówki dla deweloperów dotyczące dostosowywania narzędzi uwidocznionych w menu Surface Dial.

Wskazówki dotyczące środowiska użytkownika dla narzędzi niestandardowych

Upewnij się, że Twoje narzędzia odpowiadają bieżącemu kontekstowi Gdy jasno i intuicyjnie przedstawi, co robi narzędzie i jak działa interakcja z Surface Dial, pomagasz użytkownikom szybko się uczyć i koncentrować na swoim zadaniu.

Zminimalizuj maksymalną liczbę narzędzi aplikacji
Menu Surface Dial ma miejsce na siedem elementów. Jeśli istnieje osiem lub więcej elementów, użytkownik musi obrócić pokrętło, aby zobaczyć, które narzędzia są dostępne w przepełnionym menu rozwijanym, co utrudnia nawigację i sprawia, że narzędzia są trudne do odnalezienia i wybrania.

Zalecamy udostępnienie jednego niestandardowego narzędzia dla aplikacji lub jej kontekstu. Dzięki temu można ustawić to narzędzie na podstawie tego, co robi użytkownik, bez konieczności aktywowania menu Surface Dial i wybierania narzędzia.

Dynamiczne aktualizowanie kolekcji narzędzi
Ponieważ elementy menu Surface Dial nie obsługują stanu wyłączonego, należy dynamicznie dodawać i usuwać narzędzia (w tym wbudowane, domyślne narzędzia) na podstawie kontekstu użytkownika (bieżącego widoku lub okna ukierunkowanego). Jeśli narzędzie nie jest istotne dla bieżącego działania lub jest ono nadmiarowe, usuń je.

Nie usuwaj wbudowanego narzędzia do ustawiania woluminów systemowych
Sterowanie głośnością jest zwykle zawsze wymagane przez użytkownika. Użytkownicy mogą słuchać muzyki podczas korzystania z aplikacji, więc głośność i następny utwór powinny być zawsze dostępne z menu Surface Dial. (Następne narzędzie śledzenia jest automatycznie dodawane do menu podczas odtwarzania multimediów).

Zachowaj spójność z organizacją menu
Pomaga to użytkownikom odkrywać i uczyć się, jakie narzędzia są dostępne podczas korzystania z aplikacji, i pomagają zwiększyć wydajność podczas przełączania narzędzi.

Udostępnianie ikon wysokiej jakości spójnych z wbudowanymi ikonami
Ikony mogą przekazywać profesjonalizm i doskonałość oraz inspirować zaufanie do użytkowników.

• Zapewnij obraz PNG o wysokiej jakości w rozdzielczości 64 x 64 pikseli (44 x 44 to najmniejszy obsługiwany rozmiar)
• Upewnij się, że tło jest przezroczyste
• Ikona powinna wypełnić większość obrazu
• Biała ikona powinna mieć czarny kontur, aby była widoczna w trybie dużego kontrastu

Używanie zwięzłych i opisowych nazw
Nazwa narzędzia jest wyświetlana w menu narzędzi wraz z ikoną narzędzia i jest również używana przez czytniki zawartości ekranu.

• Nazwy powinny być krótkie, aby zmieścić się wewnątrz centralnego okręgu menu koła
• Nazwy powinny wyraźnie identyfikować podstawowe działanie (działanie uzupełniające może być domyślne):
  • Przewijanie wskazuje efekt obu kierunków obrotu
  • Cofnij określa akcję podstawową, ale Przywróć (działanie uzupełniające) można wywnioskować i jest łatwo dostępna dla użytkownika.

Wskazówki dla deweloperów

Doświadczenie z Surface Dial można dostosować, aby współgrało z funkcjonalnością w aplikacjach, korzystając z kompleksowego zestawu interfejsów API Windows Runtime.

Jak wspomniano wcześniej, domyślne menu Surface Dial jest wstępnie wypełnione zestawem wbudowanych narzędzi obejmujących szeroką gamę podstawowych funkcji systemowych (głośność systemowa, jasność systemu, przewijanie, powiększanie, cofanie i sterowanie multimediami, gdy system wykrywa trwające odtwarzanie audio lub wideo). Jednak te narzędzia domyślne mogą nie udostępniać funkcji wymaganych przez aplikację.

W poniższych sekcjach opisano sposób dodawania niestandardowego narzędzia do menu Surface Dial i określania, które wbudowane narzędzia są uwidocznione.

Pobierz bardziej niezawodną wersję tego przykładu z dostosowywania Programu RadialController.

Dodawanie niestandardowego narzędzia

W tym przykładzie dodamy podstawowe narzędzie niestandardowe, które przekazuje dane wejściowe zarówno z zdarzeń rotacji, jak i kliknięciach do niektórych kontrolek interfejsu użytkownika XAML.

1. Najpierw deklarujemy nasz interfejs użytkownika (tylko suwak i przycisk przełączania) w języku XAML.

   
   Przykładowy interfejs użytkownika aplikacji

   <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. Następnie, w kodzie zaplecza, dodajemy niestandardowe narzędzie do menu Surface Dial i deklarujemy programy obsługi wejścia RadialController.

   Uzyskujemy odwołanie do obiektu RadialController dla obiektu Surface Dial (myController), wywołując CreateForCurrentView.

   Następnie utworzymy wystąpienie RadialControllerMenuItem (myItem), wywołując RadialControllerMenuItem.CreateFromIcon.

   Następnie dołączymy ten element do kolekcji elementów menu.

   Deklarujemy programy obsługi zdarzeń wejściowych (ButtonClicked i RotationChanged) dla obiektu RadialController.

   Na koniec definiujemy programy obsługi zdarzeń.

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

Po uruchomieniu aplikacji użyjemy Surface Dial do interakcji z nią. Najpierw naciskamy i przytrzymajmy, aby otworzyć menu i wybrać nasze narzędzie niestandardowe. Po aktywowaniu niestandardowego narzędzia można dostosować kontrolkę suwaka, obracając pokrętło, a przełącznik można przełączać, klikając pokrętło.

Przykładowy interfejs użytkownika aplikacji aktywowany przy użyciu narzędzia niestandardowego Surface Dial

Określanie wbudowanych narzędzi

Możesz użyć klasy RadialControllerConfiguration, aby dostosować kolekcję wbudowanych elementów menu dla aplikacji.

Jeśli na przykład aplikacja nie ma żadnych regionów przewijania ani powiększania i nie wymaga funkcji cofania/ponowienia, te narzędzia można usunąć z menu. Spowoduje to otwarcie miejsca w menu w celu dodania niestandardowych narzędzi dla aplikacji.

Zgodnie z wytycznymi projektowymi nie zalecamy usuwania narzędzi kontroli multimediów (głośności i poprzedniego/następnego utworu), ponieważ użytkownicy często mają odtwarzanie muzyki w tle podczas wykonywania innych zadań.

Pokazujemy, jak skonfigurować menu Surface Dial, aby zawierało tylko kontrolkę multimediów do regulacji głośności i zmiany następnego/poprzedniego utworu.

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

Interakcje niestandardowe

Jak wspomniano, Surface Dial obsługuje trzy gesty (naciśnij i przytrzymaj, obróć, kliknij) z odpowiednimi interakcjami domyślnymi.

Upewnij się, że wszystkie niestandardowe interakcje na podstawie tych gestów mają sens dla wybranej akcji lub narzędzia.

Naciśnij i przytrzymaj

Ten gest aktywuje się i pokazuje menu Surface Dial, nie ma żadnych funkcji aplikacji skojarzonych z tym gestem.

Domyślnie menu jest wyświetlane w środku ekranu użytkownika. Jednak użytkownik może go chwycić i przenieść tam, gdzie wybierze.

Obracać

Surface Dial jest przeznaczona przede wszystkim do obsługi rotacji w interakcjach, które obejmują płynne i stopniowe korekty wartości analogowych lub elementów sterujących.

Urządzenie można obracać zarówno zgodnie z ruchem wskazówek zegara, jak i przeciwnie do ruchu wskazówek zegara, a także zapewnia haptyczne informacje zwrotne, aby wskazać dyskretne odległości.

Wskazówki dotyczące doświadczenia użytkownika dla interakcji niestandardowych

Narzędzia z ciągłą lub wysoką czułością obrotową powinny wyłączać informacje zwrotne haptyczne

Sprzężenie zwrotne haptyczne odpowiada czułości obrotowej aktywnego narzędzia. Zalecamy wyłączenie haptycznego sprzężenia zwrotnego dla narzędzi z ciągłą lub wysoką czułością rotacji, ponieważ doświadczenie użytkownika może stać się niewygodne.

Dominująca ręka nie powinna mieć wpływu na interakcje oparte na rotacji

Surface Dial nie może wykryć, która ręka jest używana, ale użytkownik może ustawić pisanie (lub dominującą rękę) w Ustawienia Windows -> Urządzenie -> Pióro i Windows Ink.

Należy wziąć pod uwagę ustawienia regionalne we wszystkich interakcjach związanych z rotacją

Maksymalizuj zadowolenie klientów, uwzględniając i dostosowując swoje interakcje do ustawień regionalnych i układów od prawej do lewej.

Wbudowane narzędzia i polecenia w menu Wybierania numerów są zgodne z następującymi wytycznymi dotyczącymi interakcji opartych na rotacji:

Wskazówki dla deweloperów

Gdy użytkownik obraca urządzenie, zdarzenia RadialController.RotationChanged są wyzwalane na podstawie różnicy (RadialControllerRotationChangedEventArgs.RotationDeltaInDegrees) względem kierunku obrotu. Czułość (lub rozdzielczość) danych można ustawić za pomocą właściwości RadialController.RotationResolutionInDegrees .

Ogólnie, zalecamy wyłączenie haptycznego sprzężenia zwrotnego, gdy rozdzielczość obrotu jest ustawiona na mniej niż 5 stopni. Zapewnia to bezproblemowe środowisko dla ciągłych interakcji.

Możesz włączyć i wyłączyć haptyczne opinie dla narzędzi niestandardowych, ustawiając właściwość RadialController.UseAutomaticHapticFeedback .

Oto przykład dostosowywania rozdzielczości danych rotacji i włączania lub wyłączania sprzężenia zwrotnego haptycznego.

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

Kliknij

Kliknięcie Surface Dial jest podobne do kliknięcia lewego przycisku myszy (stan obrotu urządzenia nie ma wpływu na tę akcję).

Wskazówki dotyczące UX

Nie mapuj akcji ani polecenia na ten gest, jeśli użytkownik nie może łatwo odzyskać wyniku

Każda akcja podjęta przez aplikację na podstawie kliknięcia Surface Dial musi być odwracalna. Zawsze włącz użytkownikowi łatwe przechodzenie przez stos zaplecza aplikacji i przywracanie poprzedniego stanu aplikacji.

Operacje binarne, takie jak wyciszenie/włączenie dźwięku lub pokaż/ukryj, zapewniają dobre doświadczenia użytkownika za pomocą gestu kliknięcia.

Narzędzi modalnych nie należy włączać ani wyłączać za pomocą kliknięcia Surface Dial

Niektóre tryby aplikacji/narzędzi mogą powodować konflikt lub wyłączać interakcje zależne od rotacji. Narzędzia, takie jak linijka na pasku narzędzi Windows Ink, powinny być włączane lub wyłączane za pośrednictwem innych funkcji interfejsu użytkownika (pasek narzędzi Windows Ink udostępnia wbudowaną kontrolkę ToggleButton).

W przypadku narzędzi modalnych zamapuj aktywny element menu Surface Dial na narzędzie docelowe lub do wcześniej wybranego elementu menu.

Wskazówki dla deweloperów

Po kliknięciu Surface Dial zostanie wyzwolone zdarzenie RadialController.ButtonClicked. RadialControllerButtonClickedEventArgs zawiera właściwość Contact, która zawiera lokalizację i obszar ograniczający kontakt Surface Dial na ekranie Surface Studio. Jeśli Surface Dial nie ma kontaktu z ekranem, ta właściwość ma wartość null.

Na ekranie

Jak opisano wcześniej, Surface Dial można używać w połączeniu z Surface Studio do wyświetlania menu Surface Dial w trybie specjalnym na ekranie.

W tym trybie możesz jeszcze bardziej zintegrować i dostosować swoje interakcje z Dial w aplikacjach. Przykłady unikatowych doświadczeń możliwych tylko dzięki Surface Dial i Surface Studio obejmują:

• Wyświetlanie narzędzi kontekstowych (takich jak paleta kolorów) na podstawie położenia Surface Dial, co ułatwia znajdowanie i używanie
• Ustawianie aktywnego narzędzia na podstawie interfejsu użytkownika, na którym jest umieszczony Surface Dial
• Powiększanie obszaru ekranu na podstawie lokalizacji urządzenia Surface Dial
• Unikatowe interakcje z grami na podstawie lokalizacji ekranu

Wskazówki dotyczące interakcji użytkownika na ekranie

Aplikacje powinny reagować, gdy Surface Dial jest wykrywany na ekranie

Informacja zwrotna wizualna pomaga zasygnalizować użytkownikom, że Twoja aplikacja wykryła urządzenie na ekranie Surface Studio.

Dostosuj interfejs użytkownika zależnie od lokalizacji urządzenia związany z Surface Dial

Urządzenie (i ciało użytkownika) może zasłaniać krytyczny interfejs użytkownika w zależności od tego, gdzie użytkownik go umieszcza.

Dostosuj interfejs użytkownika związany z Surface Dial na podstawie interakcji użytkownika

Oprócz okluzji sprzętowej, ręka i ramię użytkownika mogą zasłaniać część ekranu podczas korzystania z urządzenia.

Zasłonięty obszar zależy od tego, którą ręką użytkownik posługuje się urządzeniem. Ponieważ urządzenie ma być używane głównie z nie dominującą ręką, interfejs użytkownika związany z Surface Dial powinien być dostosowany do odwrotnej ręki określonej przez użytkownika (Windows Ustawienia Urządzenia Pióro & Windows pisma odręcznego Wybierz, z którą ręką piszesz).

Interactions powinny reagować na pozycję Surface Dial, a nie ruch

Stopa urządzenia jest zaprojektowana tak, aby przylegała do ekranu, a nie ślizgała się, ponieważ nie jest to precyzyjne urządzenie wskazujące. W związku z tym oczekujemy, że użytkownicy będą częściej podnosić i umieszczać Surface Dial, a nie przeciągać go po ekranie.

Określanie intencji użytkownika przy użyciu pozycji ekranu

Ustawienie aktywnego narzędzia na podstawie kontekstu interfejsu użytkownika, takiego jak bliskość kontrolki, kanwy lub okna, może poprawić środowisko użytkownika, zmniejszając kroki wymagane do wykonania zadania.

Wskazówki dla deweloperów

Gdy Surface Dial zostanie umieszczone na powierzchni cyfrowej Surface Studio, zdarzenie RadialController.ScreenContactStarted jest wyzwolone, a informacje kontaktowe (RadialControllerScreenContactStartedEventArgs.Contact) są dostarczane do aplikacji.

Podobnie, jeśli Surface Dial zostanie kliknięty, będąc w kontakcie z powierzchnią digitalizatora Surface Studio, wyzwalane jest zdarzenie RadialController.ButtonClicked, a informacje kontaktowe (RadialControllerButtonClickedEventArgs.Contact) są dostarczane do aplikacji.

Informacje kontaktowe (RadialControllerScreenContact) zawierają współrzędną X/Y środka Surface Dial w przestrzeni współrzędnych aplikacji (RadialControllerScreenContact.Position), a także prostokąt graniczny (RadialControllerScreenContact.Bounds) w pikselach niezależnych od urządzenia (DIPs). Te informacje są bardzo przydatne do udostępniania kontekstu aktywnemu narzędziu i przekazywania użytkownikowi opinii wizualnej związanej z urządzeniem.

W poniższym przykładzie utworzyliśmy podstawową aplikację z czterema różnymi sekcjami, z których każda zawiera jeden suwak i jeden przełącznik. Następnie użyjemy położenia ekranu Surface Dial, aby określić, który zestaw suwaków i przełączników jest kontrolowany przez Surface Dial.

1. Najpierw deklarujemy nasz interfejs użytkownika (cztery sekcje, z których każdy ma suwak i przycisk przełącznika) w języku XAML.

   
   Przykładowy interfejs użytkownika aplikacji

   <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. Oto kod z procedurami obsługi zdefiniowanymi dla Surface Dial pozycji ekranu.

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

Po uruchomieniu aplikacji użyjemy Surface Dial do interakcji z nią. Najpierw umieszczamy urządzenie na ekranie Surface Studio, który aplikacja wykrywa i kojarzy z prawą dolną sekcją (zobacz obraz). Następnie naciskamy i przytrzymujemy Surface Dial, aby otworzyć menu i wybrać nasze narzędzie niestandardowe. Po aktywowaniu niestandardowego narzędzia można dostosować kontrolkę suwaka, obracając Surface Dial, a przełącznik można przełączyć, klikając Surface Dial.

Przykładowy interfejs użytkownika aplikacji aktywowany przy użyciu narzędzia niestandardowego Surface Dial

Podsumowanie

Ten temat zawiera omówienie urządzenia wejściowego Surface Dial z interfejsem użytkownika oraz wskazówki dla deweloperów dotyczące dostosowywania doświadczenia użytkownika zarówno dla scenariuszy poza ekranem, jak i scenariuszy na ekranie, używanych z Surface Studio.

Wyślij pytania, sugestie i opinie na radialcontroller@microsoft.comadres .

Powiązane artykuły

Tutorial: Obsługuj Surface Dial (i inne urządzenia kołowe) w Twojej aplikacji Windows

Odniesienie do API

• klasa RadialController
• klasa RadialControllerButtonClickedEventArgs
• RadialControllerConfiguration klasa
• klasa RadialControllerControlAcquiredEventArgs
• klasa RadialControllerMenu
• Klasa RadialControllerMenuItem
• klasa RadialControllerRotationChangedEventArgs
• Klasa RadialControllerScreenContact
• RadialControllerScreenContactContinuedEventArgs klasa
• klasa RadialControllerScreenContactStartedEventArgs
• RadialControllerMenuKnownIcon wyliczenie
• RadialControllerSystemMenuItemKind wyliczenie

Próbki

Przykłady tematów

Dostosowywanie RadialController

Inne przykłady

przykład Coloring Book

Pobierz samouczek: obsługa Surface Dial (i innych urządzeń kołowych) w aplikacji Windows

Przykłady dla platformy Universal Windows Platform (C# i C++)

Przykład pulpitu Windows