Udostępnij przez

Interakcje z urządzeniami Surface Dial

Obraz urządzenia Surface Dial z Surface Studio
Surface Dial with Surface Studio and Pen (dostępne do zakupu w Sklepie Microsoft).

Przegląd

Urządzenia kołowe Windows, takie jak Surface Dial, to nowa kategoria urządzeń wejściowych, które oferują wiele atrakcyjnych i unikatowych doświadczeń interakcji użytkownika dla systemu Windows i aplikacji Windows.

Ważne

W tym temacie odwołujemy się specjalnie do interakcji z urządzeniami Surface Dial, ale informacje dotyczą wszystkich urządzeń z systemem Windows Wheel.

Dzięki faktorowi formy opartemu na akcji obracania (lub gestu), Surface Dial jest przeznaczony jako pomocnicze urządzenie wejściowe o wielu trybach, które uzupełnia dane wejściowe z urządzenia podstawowego. 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).

Funkcja Surface Dial obsługuje również akcję naciśnięcia i przytrzymania oraz akcję kliknięcia. 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.

Podobnie jak w przypadku wszystkich urządzeń wejściowych z systemem Windows, możesz spersonalizować interakcję z urządzeniem Surface Dial, aby pasowała do funkcji w aplikacjach.

Wskazówka

Używane razem, Surface Dial i nowe Surface Studio mogą zapewnić jeszcze bardziej charakterystyczne doświadczenie użytkownika.

Oprócz opisanego domyślnego menu naciśnięcia i przytrzymania, Surface Dial można również umieścić bezpośrednio na ekranie urządzenia Surface Studio. Umożliwia to specjalne menu "na ekranie".

Wykrywając zarówno lokalizację kontaktu, jak i granice tarczy Surface Dial, system używa tych informacji do obsługi okluzji urządzenia i wyświetlania większej wersji menu, która owija się poza tarczą. Te same informacje mogą być również używane przez aplikację w celu dostosowania interfejsu użytkownika zarówno do obecności urządzenia, jak i oczekiwanego użycia, na przykład umieszczenia ręki i ramienia użytkownika.

Menu poza ekranem Surface Dial

Zrzut ekranu przedstawiający menu off-screen programu Surface Dial.

Menu ekranowe Surface Dial

Zrzut ekranu przedstawiający menu ekranowe Surface Dial.

Integracja systemu

Surface Dial jest ściśle zintegrowany z systemem Windows i obsługuje zestaw wbudowanych narzędzi w menu: głośność systemowa, przewijanie, powiększanie/pomniejszanie i cofanie/ponowne wykonywanie.

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 jest na pulpicie systemu Windows
  • Poprzednie/następne narzędzie do śledzenia podczas odtwarzania multimediów

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

Surface Dial z Surface Pen
Surface Dial z piórem Surface

W przypadku użycia z urządzeniem Surface Dial te kontrole umożliwiają dodatkowe funkcje modyfikowania atrybutów tuszu i kontrolowania wzornika linijki paska narzędzi do pisma.

Po otwarciu menu Surface Dial w aplikacji do rysowania korzystającej z paska narzędzi pisma odręcznego, menu zawiera teraz narzędzia do kontrolowania typu 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 Surface Dial z narzędziem wyboru pióra dla paska narzędzi Windows Ink

Menu Surface Dial z narzędziem do rozmiaru pociągnięcia na pasku narzędzi Windows Ink
Menu Surface Dial z narzędziem do zmiany grubości pociągnięcia dla Windows Ink Toolbar

Menu Surface Dial z narzędziem linijki na pasku narzędzi Windows Ink
Menu Surface Dial z narzędziem linijki na pasku narzędzi Windows Ink

Dostosowywanie użytkownika

Użytkownicy mogą dostosować niektóre aspekty swojego środowiska Dial za pomocą strony Ustawienia systemu Windows — Urządzenia —>> Koło, w tym domyślne narzędzia, wibracje (lub informacja zwrotna haptyczna) oraz rękę pisania (lub dominującą rękę).

Podczas dostosowywania środowiska użytkownika urządzenia Surface Dial należy zawsze upewnić się, że dana funkcja lub zachowanie jest dostępna i włączona 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 narzędzia odpowiadają bieżącemu kontekstowi Gdy wyjaśnisz i intuicyjnie, co robi narzędzie i jak działa interakcja z funkcją Surface Dial, pomagasz użytkownikom szybko uczyć się i skupiać się na ich 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.

Ważne

Po dodaniu elementu do menu upewnij się, że element jeszcze nie istnieje.

Nie usuwaj wbudowanego narzędzia do ustawiania woluminów systemowych
Sterowanie głośnością jest zwykle zawsze wymagane przez użytkownika. Mogą słuchać muzyki podczas korzystania z Twojej aplikacji, więc regulacja głośności i opcja następnego utworu powinny być zawsze dostępne w 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

Zrzut ekranu przedstawiający ikonę z tłem alfa.

Ikona z tłem alfa

Zrzut ekranu przedstawiający ikonę wyświetlaną w menu koła z motywem domyślnym.

Ikona wyświetlana w menu kołowym z motywem domyślnym

Zrzut ekranu przedstawiający ikonę wyświetlaną w menu koła z motywem w wysokim kontraście białym.

Ikona wyświetlana w menu kołowym z motywem Wysoki kontrast - biały

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

Możesz dostosować doświadczenie Surface Dial, aby w pełni wykorzystać funkcjonalności w aplikacjach za pomocą kompleksowego zestawu interfejsów API środowiska uruchomieniowego systemu Windows.

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.

    Zrzut ekranu przedstawiający przykładowy kontroler promieniowy z suwakiem poziomym ustawionym po lewej stronie.
    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 dodamy niestandardowe narzędzie do menu Surface Dial i deklarujemy programy obsługi danych wejściowych Programu RadialController .

    Uzyskujemy odwołanie do obiektu RadialController dla kontrolki Surface Dial (myController), wywołując polecenie 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 funkcji Surface Dial, aby wchodzić z nią w interakcje. 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.

Zrzut ekranu przedstawiający przykładowy kontroler promieniowy z suwakiem poziomym ustawionym na środek.
Przykładowy interfejs użytkownika aplikacji aktywowany przy użyciu niestandardowego narzędzia 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.

Ważne

Menu Surface Dial musi zawierać co najmniej jeden element menu. Jeśli wszystkie narzędzia domyślne zostaną usunięte przed dodaniem jednego z narzędzi niestandardowych, zostaną przywrócone domyślne narzędzia, a narzędzie zostanie dołączone do kolekcji domyślnej.

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

W tym miejscu pokazano, jak skonfigurować menu Surface Dial tak, aby uwzględniało tylko kontrolki multimediów dla głośności i 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, funkcja 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.

Uwaga / Notatka

Środowisko interakcji zależy od stanu menu Surface Dial. Jeśli menu jest aktywne, przetwarza dane wejściowe; w przeciwnym razie przetwarza je aplikacja.

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.

Uwaga / Notatka

Gdy Surface Dial jest umieszczany na ekranie urządzenia Surface Studio, menu jest wyśrodkowane w miejscu na ekranie, gdzie znajduje się Surface Dial.

Obracać

Tarcza Surface Dial jest przede wszystkim zaprojektowana do obsługi rotacji w interakcjach, które obejmują płynne, przyrostowe regulacje 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.

Uwaga / Notatka

Sprzężenie zwrotne haptyczne może być wyłączone przez użytkownika na stronie Ustawienia systemu Windows —> Urządzenia —> Koło .

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

Urządzenie Surface Dial nie może wykryć, która ręka jest używana, ale użytkownik może ustawić rękę do pisania (lub dominującą rękę) w ustawieniach systemu Windows —Urządzenia—>> 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:

Lewo

Up

Out

Obraz przedstawiający tarczę Surface Dial

Prawo

W dół

In

Kierunek koncepcyjny Mapowanie na Surface Dial Obrót zgodnie z ruchem wskazówek zegara Obrót w kierunku odwrotnym do ruchu wskazówek zegara
Poziomy Mapowanie w lewo i w prawo na podstawie górnej części tarczy Surface Dial Prawo Lewo
Pionowy Mapowanie góra-dół w oparciu o lewą stronę urządzenia Surface Dial W dół Up
Oś Z W (lub bliżej) zamapowany na górę/w prawo
Wyjście (lub dalsze) zamapowane w dół/w lewo		 In Out

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 .

Uwaga / Notatka

Domyślnie zdarzenie wprowadzania rotacji jest dostarczane do obiektu RadialController tylko wtedy, gdy urządzenie jest obracane co najmniej 10 stopni. Każde zdarzenie wejściowe powoduje, że urządzenie wibruje.

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 .

Uwaga / Notatka

Nie można zastąpić zachowania haptycznego dla narzędzi systemowych, takich jak sterowanie głośnością. W przypadku tych narzędzi opinie haptyczne mogą być wyłączone tylko przez użytkownika ze strony ustawień koła.

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 przycisku 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 środowiska użytkownika

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

Każde działanie podjęte przez aplikację w wyniku kliknięcia urządzenia Surface Dial musi być odwracalne. 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ędzia modalne nie powinny być włączone lub wyłączone, klikając pozycję 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 elementów interfejsu użytkownika (pasek narzędzi Windows Ink udostępnia wbudowaną kontrolkę ToggleButton).

W przypadku narzędzi modalnych, przypisz aktywny element menu Surface Dial do narzędzia docelowego lub do wcześniej wybranego elementu menu.

Wskazówki dla deweloperów

Po naciśnięciu Surface Dial zostanie wyzwolone zdarzenie RadialController.ButtonClicked. Zdarzenia RadialControllerButtonClickedEventArgs zawierają właściwość Contact określającą lokalizację i obszar ograniczający kontaktu Surface Dial na ekranie Surface Studio. Jeśli karta Surface Dial nie ma kontaktu z ekranem, ta właściwość ma wartość null.

Na ekranie

Jak opisano wcześniej, tarcza Surface Dial może być używana w połączeniu z programem 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 unikalnych doświadczeń możliwych tylko z urządzeniami Surface Dial i Surface Studio to:

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

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

Aplikacje powinny odpowiadać po wykryciu na ekranie funkcji Surface Dial

Informacje zwrotne wizualne informują użytkowników, że aplikacja wykryła urządzenie na ekranie Surface Studio.

Dostosowywanie interfejsu użytkownika urządzenia Surface Dial na podstawie lokalizacji urządzenia

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.

Dostosowywanie interfejsu użytkownika dotyczącego wybierania numerów na urządzeniu Surface 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 jest zaprojektowane do używania głównie z niedominującą ręką, interfejs użytkownika urządzenia Surface Dial powinien dostosować się do odwrotnej ręki wybranej przez użytkownika (Ustawienia systemu Windows > Urządzenia > Pióro i Windows Ink > Wybierz rękę, którą piszesz).

Interakcje 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 spodziewamy się, że użytkownicy będą częściej podnosić i umieszczać urządzenie 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

Po umieszczeniu Surface Dial na powierzchni cyfrowej urządzenia Surface Studio, zostanie uruchomione zdarzenie RadialController.ScreenContactStarted, a informacje kontaktowe (RadialControllerScreenContactStartedEventArgs.Contact) zostaną przekazane do aplikacji.

Podobnie, jeśli w kontakcie z powierzchnią urządzenia Surface Studio zostanie kliknięto pozycję Surface Dial, zostanie wyzwolone zdarzenie RadialController.ButtonClicked , a informacje kontaktowe (RadialControllerButtonClickedEventArgs.Contact) są przekazywane do aplikacji.

Informacje kontaktowe (RadialControllerScreenContact) obejmują współrzędne X/Y środka pokrętła Surface Dial w przestrzeni współrzędnych aplikacji (RadialControllerScreenContact.Position), a także prostokąt ograniczający (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 tarczy Surface, aby określić, który zestaw suwaków i przełączników jest kontrolowany przez tarczę 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.

    Zrzut ekranu przedstawiający przykładowy kontroler promieniowy z czterema suwakami poziomymi ustawionymi po lewej stronie.
    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. Poniżej przedstawiono kod z procedurami obsługi zdefiniowanymi dla pozycji ekranu 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;
    }
  }
}

Po uruchomieniu aplikacji użyjemy funkcji Surface Dial, aby wchodzić z nią w interakcje. 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 nasz 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łączać, klikając Surface Dial.

Zrzut ekranu przedstawiający przykładowy kontroler promieniowy z czterema suwakami poziomymi ustawionymi po lewej stronie i wyróżnionym czwartym kontrolerem.
Przykładowy interfejs użytkownika aplikacji aktywowany przy użyciu niestandardowego narzędzia Surface Dial

Podsumowanie

Ten temat zawiera omówienie urządzenia wejściowego Surface Dial wraz ze wskazówkami dla deweloperów i środowiska użytkownika dotyczącymi dostosowywania środowiska użytkownika w scenariuszach poza ekranem, a także scenariuszy wyświetlanych na ekranie w przypadku korzystania z urządzenia Surface Studio.

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

Samouczek: obsługa funkcji Surface Dial (i innych urządzeń kołowych) w aplikacji systemu Windows

Odniesienie do API

Samples

Przykłady tematów

Dostosowywanie RadialController

Inne przykłady

Przykładowa książka kolorowa

Samouczek Pierwsze Kroki: Obsługa Surface Dial (i innych urządzeń kołowych) w aplikacjach Windows

Przykłady platformy uniwersalnej systemu Windows (C# i C++)

Przykład pulpitu z systemem Windows

  • Last updated on