Dela via

Surface Dial-interaktioner

Bild av Surface Dial med Surface Studio
Surface Dial med Surface Studio och Pen (finns att köpa i Microsoft Store).

Översikt

Windows-hjulenheter, till exempel Surface Dial, är en ny kategori av indataenheter som möjliggör en mängd övertygande och unika användarinteraktionsupplevelser för Windows- och Windows-appar.

Viktigt!

I det här avsnittet refererar vi specifikt till Surface Dial-interaktioner, men informationen gäller för alla Windows-hjulenheter.

Med en formfaktor baserad på en rotationsåtgärd (eller gest) är Surface Dial avsedd som en sekundär, multimodal indataenhet som kompletterar indata från en primär enhet. I de flesta fall manipuleras enheten av en användares icke-dominerande hand när den utför en uppgift med sin dominerande hand (till exempel pennanteckning). Den är inte utformad för precisionsindata för pekdon (t.ex. touch, penna eller mus).

Surface Dial stöder också både en tryck- och håll-åtgärd och en klickåtgärd . Tryck och håll har en enda funktion: visa en meny med kommandon. Om menyn är aktiv hanterar menyn rotera- och klickkommandon. Annars skickas indata till din app för bearbetning.

Precis som med alla Windows-indataenheter kan du anpassa och skräddarsy interaktionsupplevelsen för Surface Dial så att den passar funktionerna i dina appar.

Tips/Råd

Surface Dial och nya Surface Studio används tillsammans och kan ge en ännu mer distinkt användarupplevelse.

Förutom den standardfunktion för tryck- och håll-menyn som beskrivs kan Surface Dial också placeras direkt på skärmen i Surface Studio. Detta möjliggör en särskild "på skärmen"-meny.

Genom att identifiera både kontaktplatsen och gränserna för Surface Dial använder systemet den här informationen för att hantera ocklusion av enheten och visa en större version av menyn som omsluter utsidan av urtavlan. Samma information kan också användas av din app för att anpassa användargränssnittet för både förekomsten av enheten och dess förväntade användning, till exempel placeringen av användarens hand och arm.

Surface Dial off-screen meny

Skärmbild av Surface Dials off-screen-menyn.

Surface Dial-menyn på skärmen

Skärmbild av menyn Surface Dial på skärmen.

Systemintegration

Surface Dial är tätt integrerad med Windows och har stöd för en uppsättning inbyggda verktyg på menyn: systemvolym, rullning, zooma in/ut och ångra/göra om.

Den här samlingen med inbyggda verktyg anpassas till den aktuella systemkontexten så att den omfattar:

  • Ett verktyg för systemets ljusstyrka när användaren är på Windows Desktop
  • Ett föregående/nästa spårverktyg när media spelas upp

Förutom detta allmänna plattformsstöd är Surface Dial också nära integrerat med Windows Ink-plattformskontrollerna (InkCanvas och InkToolbar).

Surface Dial med Surface Pen
Surface Dial med Surface Pen

När de används med Surface Dial möjliggör dessa kontroller ytterligare funktioner för att ändra pennattribut och styra pennverktygsfältets linjalstencil.

När du öppnar Surface Dial-menyn i ett pennanteckningsprogram som använder verktygsfältet för bläck innehåller menyn nu verktyg för att kontrollera penntyp och penseltjocklek. När linjalen är aktiverad läggs ett motsvarande verktyg till på menyn där enheten kan styra linjalens position och vinkel.

Surface Dial-menyn med pennvalsverktyget för verktygsfältet Windows Ink
Surface Dial-menyn med verktyget för pennval för verktygsfältet Windows Ink

Surface Dial-menyn med streckstorleksverktyget för verktygsfältet Windows Ink
Surface Dial-menyn med verktyget för penselbredd i verktygsfältet Windows Ink

Surface Dial-menyn med linjalverktyget för verktygsfältet Windows Ink
Surface Dial-menyn med linjalverktyget för verktygsfältet Windows Ink

Användaranpassning

Användare kan anpassa vissa aspekter av sin uppringningsupplevelse via Windows-inställningar –> Enheter –> Hjulsida , inklusive standardverktyg, vibrationer (eller haptisk feedback) och skriva (eller dominerande) hand.

När du anpassar surface dial-användarupplevelsen bör du alltid se till att en viss funktion eller ett visst beteende är tillgängligt och aktiverat av användaren.

Anpassade verktyg

Här diskuterar vi både UX- och utvecklarvägledning för att anpassa de verktyg som exponeras på Surface Dial-menyn.

UX-vägledning för anpassade verktyg

Se till att dina verktyg motsvarar den aktuella kontexten När du gör det tydligt och intuitivt vad ett verktyg gör och hur Surface Dial-interaktionen fungerar hjälper du användarna att lära sig snabbt och fokusera på sina uppgifter.

Minimera antalet appverktyg så mycket som möjligt
Surface Dial-menyn har plats för sju objekt. Om det finns åtta eller fler objekt måste användaren vrida på ratten för att se vilka verktyg som är tillgängliga i en överflyttningsmeny, vilket gör det svårt att navigera i menyn och verktygen svåra att upptäcka och välja.

Vi rekommenderar att du tillhandahåller ett enda anpassat verktyg för din app- eller appkontext. På så sätt kan du ange verktyget baserat på vad användaren gör utan att kräva att de aktiverar Surface Dial-menyn och väljer ett verktyg.

Uppdatera samlingen med verktyg dynamiskt
Eftersom menyalternativ för Surface Dial inte stöder ett inaktiverat tillstånd bör du dynamiskt lägga till och ta bort verktyg (inklusive inbyggda standardverktyg) baserat på användarkontext (aktuell vy eller fokuserat fönster). Om ett verktyg inte är relevant för den aktuella aktiviteten eller om det är redundant tar du bort det.

Viktigt!

När du lägger till ett objekt på menyn kontrollerar du att objektet inte redan finns.

Ta inte bort det inbyggda verktyget för systemvolyminställning
Volymkontroll krävs vanligtvis alltid av användaren. De kanske lyssnar på musik när du använder din app, så volym- och nästa spårverktyg bör alltid vara tillgängliga från Surface Dial-menyn. (Nästa spårverktyg läggs automatiskt till på menyn när media spelas upp.)

Var konsekvent med menyorganisationen
Detta hjälper användarna att identifiera och lära sig vilka verktyg som är tillgängliga när de använder din app och hjälper till att förbättra deras effektivitet när de byter verktyg.

Ge ikoner av hög kvalitet som överensstämmer med de inbyggda ikonerna
Ikoner kan förmedla professionalism och excellens och inspirera till förtroende för användare.

  • Tillhandahålla en PNG-bild av hög kvalitet på 64 x 64 bildpunkter (44 x 44 är den minsta som stöds)
  • Kontrollera att bakgrunden är transparent
  • Ikonen ska fylla det mesta av bilden
  • En vit ikon ska ha en svart kontur som ska visas i högkontrastläge

Skärmbild av en ikon med alfabakgrund.

Ikon med alfabakgrund

Skärmbild av en ikon som visas på hjulmenyn med standardtema.

Ikonen visas på hjulmenyn med standardtema

Skärmbild av en ikon som visas på hjulmenyn med temat Högkontrastvit.

Ikonen visas på hjulmenyn med tema med högkontrastvit

Använda koncisa och beskrivande namn
Verktygsnamnet visas i verktygsmenyn tillsammans med verktygsikonen och används också av skärmläsare.

  • Namn bör vara korta för att passa in i den centrala cirkeln på hjulmenyn
  • Namn bör tydligt identifiera den primära åtgärden (en kompletterande åtgärd kan vara underförstådd):
    • Rulla anger effekten av båda rotationsriktningarna
    • Ångra anger en primär åtgärd, men gör om (den kompletterande åtgärden) kan härledas och enkelt identifieras av användaren

Vägledning för utvecklare

Du kan anpassa Surface Dial-upplevelsen för att komplettera funktionerna i dina appar genom en omfattande uppsättning Windows Runtime-API:er.

Som tidigare nämnts är standardmenyn surface dial förifylld med en uppsättning inbyggda verktyg som täcker ett brett utbud av grundläggande systemfunktioner (systemvolym, systemets ljusstyrka, rullning, zoom, ångra och mediekontroll när systemet identifierar pågående ljud- eller videouppspelning). Dessa standardverktyg kanske dock inte tillhandahåller de funktioner som krävs av din app.

I följande avsnitt beskriver vi hur du lägger till ett anpassat verktyg på Surface Dial-menyn och anger vilka inbyggda verktyg som ska exponeras.

Ladda ned en mer robust version av det här exemplet från RadialController-anpassning.

Lägga till ett anpassat verktyg

I det här exemplet lägger vi till ett grundläggande anpassat verktyg som skickar indata från både rotationen och klickar på händelser till vissa XAML-användargränssnittskontroller.

  1. Först deklarerar vi vårt användargränssnitt (bara ett skjutreglage och en växlingsknapp) i XAML.

    Skärmbild av exempel på radiell styrning med det vågräta skjutreglaget inställt åt vänster.
    Exempelappens användargränssnitt

    <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. I koden lägger vi sedan till ett anpassat verktyg i Surface Dial-menyn och deklarerar RadialController indatahanterare.

    Vi får en referens till RadialController-objektet för Surface Dial (myController) genom att anropa CreateForCurrentView.

    Sedan skapar vi en instans av en RadialControllerMenuItem (myItem) genom att anropa RadialControllerMenuItem.CreateFromIcon.

    Sedan lägger vi till det objektet i samlingen med menyobjekt.

    Vi deklarerar indatahändelsehanterare (ButtonClicked och RotationChanged) för RadialController-objektet .

    Slutligen definierar vi händelsehanterarna.

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

När vi kör appen använder vi Surface Dial för att interagera med den. Först trycker vi och håller för att öppna menyn och väljer vårt anpassade verktyg. När det anpassade verktyget har aktiverats kan skjutreglaget justeras genom att rotera ratten och omkopplaren kan växlas genom att klicka på ratten.

Skärmbild av Radial Controller-exempel med det vågräta skjutreglaget inställt i mitten.
Exempelappens användargränssnitt aktiverat med hjälp av det anpassade verktyget Surface Dial

Ange de inbyggda verktygen

Du kan använda klassen RadialControllerConfiguration för att anpassa samlingen med inbyggda menyalternativ för din app.

Om din app till exempel inte har några rullnings- eller zoomningsregioner och inte kräver ångra/gör om-funktioner, kan dessa verktyg tas bort från menyn. Då öppnas utrymme på menyn för att lägga till anpassade verktyg för din app.

Viktigt!

Surface Dial-menyn måste ha minst ett menyalternativ. Om alla standardverktyg tas bort innan du lägger till något av dina anpassade verktyg återställs standardverktygen och verktyget läggs till i standardsamlingen.

Enligt designriktlinjerna rekommenderar vi inte att du tar bort verktygen för mediekontroll (volym och föregående/nästa spår) eftersom användarna ofta har bakgrundsmusik som spelas upp medan de utför andra uppgifter.

Här visar vi hur du konfigurerar surface dial-menyn så att den endast innehåller mediekontroller för volym och nästa/föregående spår.

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

Anpassade interaktioner

Som nämnts stöder Surface Dial tre gester (tryck och håll, rotera, klicka) med motsvarande standardinteraktioner.

Se till att alla anpassade interaktioner baserat på dessa gester är meningsfulla för den valda åtgärden eller verktyget.

Anmärkning

Interaktionsupplevelsen är beroende av tillståndet för Surface Dial-menyn. Om menyn är aktiv bearbetas indata. annars gör din app det.

Tryck och håll

Den här gesten aktiveras och visar surface dial-menyn, det finns inga appfunktioner associerade med den här gesten.

Som standard visas menyn i mitten av användarens skärm. Användaren kan dock ta tag i den och flytta den var de vill.

Anmärkning

När Surface Dial placeras på skärmen i Surface Studio centreras menyn på skärmen för Surface Dial.

Rotera

Surface Dial är främst utformad för att stödja rotation för interaktioner som innebär smidiga, inkrementella justeringar av analoga värden eller kontroller.

Enheten kan roteras både medsols och motsols, och kan också ge haptisk feedback för att indikera diskreta avstånd.

Anmärkning

Haptisk feedback kan inaktiveras av användaren på sidan Windows-inställningar –> Enheter –> Hjul .

UX-vägledning för anpassade interaktioner

Verktyg med kontinuerlig eller hög rotationskänslighet bör inaktivera haptisk feedback

Haptisk feedback överensstämmer med rotationskänsligheten hos det aktiva verktyget. Vi rekommenderar att du inaktiverar haptisk feedback för verktyg med kontinuerlig eller hög rotationskänslighet eftersom användarupplevelsen kan bli obekväm.

Dominerande hand bör inte påverka rotationsbaserade interaktioner

Surface Dial kan inte identifiera vilken hand som används, men användaren kan ange skrivningen (eller den dominerande handen) i Windows-inställningar –> Enhet –> Penna och Windows-penna.

Nationella inställningar bör beaktas för alla rotationsinteraktioner

Maximera kundnöjdheten genom att ta emot och anpassa dina interaktioner till nationella layouter och layouter från höger till vänster.

De inbyggda verktygen och kommandona på menyn Uppringning följer dessa riktlinjer för rotationsbaserade interaktioner:

Vänster

Up

Out

Bild på Surface Dial

Höger

Nere

In

Konceptuell riktning Mappa till Surface Dial Medsols rotation Motsols rotation
Vågrät Vänster- och högermappning baserat på toppen av Surface Dial Höger Vänster
Vertikal Upp- och nedmappning baserat på vänster sida av Surface Dial Nere Up
Z-axel I (eller närmare) mappas till uppåt/höger
Utåt (eller vidare) kopplad till ner/vänster		 In Out

Vägledning för utvecklare

När användaren roterar enheten utlöses RadialController.RotationChanged-händelser baserat på ett delta (RadialControllerRotationChangedEventArgs.RotationDeltaInDegrees) i förhållande till rotationsriktningen. Känsligheten (eller upplösningen) för data kan anges med egenskapen RadialController.RotationResolutionInDegrees .

Anmärkning

Som standard levereras en rotationsindatahändelse till ett RadialController-objekt endast när enheten roteras minst 10 grader. Varje indatahändelse gör att enheten vibrerar.

I allmänhet rekommenderar vi att du inaktiverar haptisk feedback när rotationsupplösningen är inställd på mindre än 5 grader. Detta ger en smidigare upplevelse för kontinuerliga interaktioner.

Du kan aktivera och inaktivera haptisk feedback för anpassade verktyg genom att ange egenskapen RadialController.UseAutomaticHapticFeedback .

Anmärkning

Du kan inte åsidosätta det haptiska beteendet för systemverktyg som volymkontrollen. För dessa verktyg kan haptisk feedback endast inaktiveras av användaren från sidan för hjulinställningar.

Här är ett exempel på hur du anpassar rotationsdatas upplösning och aktiverar eller inaktiverar haptisk feedback.

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

Klicka

Att klicka på Surface Dial liknar att klicka på den vänstra musknappen (enhetens rotationstillstånd har ingen effekt på den här åtgärden).

UX-vägledning

Mappa inte en åtgärd eller ett kommando till den här gesten om användaren inte enkelt kan återställa från resultatet

Alla åtgärder som vidtas av din app baserat på att användaren klickar på Surface Dial måste vara reversibla. Se alltid till att användaren enkelt kan navigera genom appens tillbaka-stack och återställa appens tidigare tillstånd.

Binära åtgärder som att stänga av/slå på ljudet eller visa/dölja ger bra användarupplevelser med klickgesten.

Modalverktyg bör inte aktiveras eller inaktiveras genom att klicka på Surface Dial

Vissa app-/verktygslägen kan vara i konflikt med eller inaktivera interaktioner som är beroende av rotation. Verktyg som linjalen i Windows Ink-verktygsfältet ska aktiveras eller inaktiveras via andra gränssnittsmetoder (Windows Ink-verktygsfältet innehåller en inbyggd ToggleButton-kontroll).

För modala verktyg mappar du det aktiva menyalternativet Surface Dial till målverktyget eller till det tidigare valda menyalternativet.

Vägledning för utvecklare

När man klickar på Surface Dial utlöses en RadialController.ButtonClicked-händelse. RadialControllerButtonClickedEventArgs innehåller en kontaktegenskap som innehåller platsen och avgränsningsområdet för Surface Dial-kontakten på Surface Studio-skärmen. Om Surface Dial inte är i kontakt med skärmen är den här egenskapen null.

På skärmen

Som tidigare beskrivits kan Surface Dial användas tillsammans med Surface Studio för att visa Surface Dial-menyn i ett särskilt skärmläge.

När du är i det här läget kan du integrera och anpassa dina upplevelser för uppringningsinteraktion med dina appar ytterligare. Exempel på unika upplevelser som endast är möjliga med Surface Dial och Surface Studio är:

  • Visa kontextuella verktyg (till exempel en färgpalett) baserat på surface dial-positionen, vilket gör dem enklare att hitta och använda
  • Ange det aktiva verktyget baserat på användargränssnittet som Surface Dial är placerad på
  • Förstoring av ett skärmområde baserat på platsen för Surface Dial
  • Unika spelinteraktioner baserat på skärmplats

UX-vägledning för interaktioner på skärmen

Appar bör svara när Surface Dial identifieras på skärmen

Visuell feedback hjälper till att indikera för användare att din app har identifierat enheten på skärmen i Surface Studio.

Justera Surface Dial-relaterat användargränssnitt baserat på enhetens plats

Enheten (och användarens kropp) kan blockera viktigt användargränssnitt beroende på var användaren placerar den.

Justera Surface Dial-relaterat användargränssnitt baserat på användarinteraktion

Förutom hårdvarubaserad ocklusion kan en användares hand och arm skymma en del av skärmen när hen använder enheten.

Det ockluderade området beror på vilken hand som används med enheten. Eftersom enheten är utformad för att främst användas med den icke-dominerande handen bör Surface Dial-relaterat användargränssnitt justeras för den motsatta hand som anges av användaren (Windows-inställningar > Enheter > Penna och Windows-penna > Välj vilken hand du skriver med inställning).

Interaktioner bör svara på Surface Dial-position i stället för rörelse

Enhetens fot är utformad för att hålla sig till skärmen i stället för att glida, eftersom det inte är en precisionspekande enhet. Därför förväntar vi oss att det är vanligare att användare lyfter och placerar Surface Dial i stället för att dra den över skärmen.

Använda skärmposition för att fastställa användar avsikt

Om du ställer in det aktiva verktyget baserat på användargränssnittskontext, till exempel närhet till en kontroll, arbetsyta eller ett fönster, kan du förbättra användarupplevelsen genom att minska de steg som krävs för att utföra en uppgift.

Vägledning för utvecklare

När Surface Dial placeras på Surface Studio-digitaliserarytan utlöses en RadialController.ScreenContactStarted-händelse och kontaktinformationen (RadialControllerScreenContactStartedEventArgs.Contact) tillhandahålls till din app.

På samma sätt, om Surface Dial klickas när du är i kontakt med digitaliserarytan i Surface Studio, utlöses en RadialController.ButtonClicked-händelse och kontaktinformationen (RadialControllerButtonClickedEventArgs.Contact) tillhandahålls till din app.

Kontaktinformationen (RadialControllerScreenContact) innehåller X/Y-koordinaten för mitten av Surface Dial i appens koordinatutrymme (RadialControllerScreenContact.Position) samt avgränsningsrektangeln (RadialControllerScreenContact.Bounds) i Enhetsoberoende pixlar (DIPs). Den här informationen är mycket användbar för att ge kontext till det aktiva verktyget och tillhandahålla enhetsrelaterad visuell feedback till användaren.

I följande exempel har vi skapat en grundläggande app med fyra olika avsnitt, som var och en innehåller ett skjutreglage och en växlingsknapp. Sedan använder vi Surface Dials position på skärmen för att bestämma vilken uppsättning skjutreglage som styrs av Surface Dial.

  1. Först deklarerar vi vårt användargränssnitt (fyra avsnitt, var och en med ett skjutreglage och växlingsknapp) i XAML.

    Skärmbild av Radiell Controller-exempel med fyra vågräta skjutreglage satta till vänster.
    Exempelappens användargränssnitt

    <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. Här är koden bakom med hanterare som definierats för Surface Dial-skärmposition.

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

När vi kör appen använder vi Surface Dial för att interagera med den. Först placerar vi enheten på Surface Studio-skärmen, som appen identifierar och associerar med det nedre högra avsnittet (se bild). Vi trycker sedan på och håller i Surface Dial för att öppna menyn och väljer vårt anpassade verktyg. När det anpassade verktyget har aktiverats kan skjutreglaget justeras genom att rotera Surface Dial och reglaget kan växlas genom att klicka på Surface Dial.

Skärmbild av radiell kontrollantexempel med fyra vågräta skjutreglage inställda till vänster och den fjärde styrenheten markerad.
Exempelappens användargränssnitt aktiverat med hjälp av det anpassade verktyget Surface Dial

Sammanfattning

Det här avsnittet innehåller en översikt över surface dial-indataenheten med vägledning för UX och utvecklare om hur du anpassar användarupplevelsen för scenarier utanför skärmen samt scenarier på skärmen när de används med Surface Studio.

Skicka dina frågor, förslag och feedback till radialcontroller@microsoft.com.

Handledning: Stöd för Surface Dial (och andra hjulenheter) i din Windows-app

API-referensen

Samples

Ämnesexempel

RadialController-anpassning

Andra exempel

Exempel på färgbok

Kom igång med självstudien: Att stödja Surface Dial (och andra hjulenheter) i din Windows-app

Universal Windows Platform-exempel (C# och C++)

Windows-skrivbordsexempel

  • Last updated on