Sdílet prostřednictvím

Interakce zařízení Surface Dial

Obrázek zařízení Surface Dial se zařízením Surface Studio
Surface Dial s Surface Studiem a perem (k dispozici k nákupu v Microsoft Store).

Přehled

Zařízení s kolečkem Windows, jako je Surface Dial, jsou novou kategorií vstupních zařízení, která umožňují řadu poutavých a jedinečných prostředí interakce uživatelů pro aplikace pro Windows a Windows.

Důležité

V tomto tématu se konkrétně odkazujeme na interakce zařízení Surface Dial, ale informace platí pro všechna zařízení s otočným ovládacím prvkem Windows.

Zařízení Surface Dial, které je založeno na akci otáčení (nebo gestu), je určeno jako sekundární multimodální vstupní zařízení, které doplňuje vstup z primárního zařízení. Ve většině případů je zařízení ovládáno nedominantní rukou uživatele, zatímco dominantní rukou provádí úkol (například psaní perem). Není určen pro přesný vstup ukazatele (například dotykové ovládání, pero nebo myš).

Zařízení Surface Dial podporuje také akci stisknutí a podržení i akci kliknutí . Stisknutí a podržení má jednu funkci: zobrazí nabídku příkazů. Pokud je nabídka aktivní, otáčení a kliknutí vstupu jsou zpracovávány nabídkou. V opačném případě se vstup předá vaší aplikaci ke zpracování.

Stejně jako u všech vstupních zařízení s Windows můžete přizpůsobit a přizpůsobit prostředí interakce zařízení Surface Dial tak, aby vyhovovalo funkcím vašich aplikací.

Návod

Zařízení Surface Dial a nový Surface Studio se používají společně a nabízí ještě charakteristické uživatelské prostředí.

Kromě výchozího prostředí pro stisknutí a podržení v nabídce lze Surface Dial umístit také přímo na obrazovce zařízení Surface Studio. Tím se povolí speciální nabídka na obrazovce.

Když systém zjistí umístění kontaktu i hranice zařízení Surface Dial, použije tyto informace ke zpracování vizuálního zakrytí zařízením a zobrazení větší verze nabídky, která obklopuje vnější část otočného zařízení Dial. Vaše aplikace může stejnou informaci také použít k přizpůsobení uživatelského rozhraní pro přítomnost zařízení a jeho předpokládané využití, jako je umístění ruky a paže uživatele.

Nabídka zařízení Surface Dial mimo obrazovku

Snímek obrazovky s nabídkou zařízení Surface Dial mimo obrazovku

Nabídka na obrazovce pro Surface Dial

Snímek obrazovky s nabídkou zařízení Surface Dial na obrazovce

Systémová integrace

Zařízení Surface Dial je úzce integrované se systémem Windows a podporuje sadu integrovaných nástrojů v rámci nabídky: systémová hlasitost, posouvání, přiblížení/oddálení a vrácení zpět/znovu.

Tato kolekce integrovaných nástrojů se přizpůsobí aktuálnímu kontextu systému, aby zahrnovala:

  • Nástroj pro jas systému, když je uživatel na ploše Windows
  • Nástroj pro předchozí/další stopu během přehrávání médií

Kromě podpory této obecné platformy je surface Dial také úzce integrovaný s ovládacími prvky platformy Windows Ink (InkCanvas a InkToolbar).

Surface Dial s Perem pro Surface
Surface Dial se Surface Pen

Při použití se zařízením Surface Dial tyto ovládací prvky umožňují další funkce pro úpravy atributů rukopisu a ovládání vzorníku pravítka na panelu nástrojů rukopisu.

Když otevřete nabídku Surface Dial v aplikaci rukopisu, která používá panel nástrojů rukopisu, nabídka teď obsahuje nástroje pro ovládání typu pera a tloušťky štětce. Když je pravítko povoleno, přidá se do nabídky odpovídající nástroj, který umožňuje zařízení řídit polohu a úhel pravítka.

Nabídka Surface Dial s nástrojem pro výběr pera pro panel nástrojů Windows Ink
Nabídka Surface Dial s nástrojem pro výběr pera pro panel nástrojů Windows Ink

Nabídka Surface Dial s nástrojem pro velikost tahu pro panel nástrojů Windows Ink
Nabídka Surface Dial s nástrojem pro nastavení velikosti tahu v panelu nástrojů Windows Ink

Nabídka Surface Dial s nástrojem pravítka pro panel Windows Ink
Nabídka Surface Dial s nástrojem pravítka pro panel nástrojů Windows Ink

Přizpůsobení uživatele

Uživatelé si můžou přizpůsobit některé aspekty svého zážitku při používání Dial prostřednictvím Nastavení Windows – Zařízení – Kolečko, včetně výchozích nástrojů, kmitání (nebo haptické zpětné vazby) a ruky psaní (či dominantní).

Při přizpůsobení uživatelského prostředí zařízení Surface Dial byste měli vždy zajistit, aby byla určitá funkce nebo chování dostupné a povolené uživatelem.

Vlastní nástroje

Zde probereme pokyny pro uživatelské prostředí i vývojáře pro přizpůsobení nástrojů vystavených v nabídce Surface Dial.

Pokyny pro uživatelské rozhraní pro vlastní nástroje

Ujistěte se, že vaše nástroje odpovídají aktuálnímu kontextu . Když dáte jasně a intuitivně přehled o tom, co nástroj dělá a jak funguje interakce zařízení Surface Dial, pomůžete uživatelům rychle se učit a soustředit se na svůj úkol.

Co nejvíce minimalizovat počet nástrojů aplikací
Nabídka Surface Dial má místo pro sedm položek. Pokud je osm nebo více položek, musí uživatel otočit kolečkem, aby zjistil, které nástroje jsou k dispozici v nabídce přetečení, což ztěžuje navigaci a ztěžuje nalezení a výběr nástrojů.

Doporučujeme pro vaši aplikaci nebo kontext aplikace poskytnout jeden vlastní nástroj. Díky tomu můžete tento nástroj nastavit na základě toho, co uživatel dělá, aniž by musel aktivovat nabídku Surface Dial a vybrat nástroj.

Dynamická aktualizace kolekce nástrojů
Vzhledem k tomu, že položky nabídky Surface Dial nepodporují zakázaný stav, měli byste dynamicky přidávat a odebírat nástroje (včetně integrovaných, výchozích nástrojů) na základě kontextu uživatele (aktuálního zobrazení nebo prioritního okna). Pokud nástroj není relevantní pro aktuální aktivitu nebo je redundantní, odeberte ho.

Důležité

Když do nabídky přidáte položku, ujistěte se, že položka ještě neexistuje.

Neodstraňujte integrovaný nástroj pro nastavení systémové hlasitosti
Řízení hlasitosti obvykle vyžaduje uživatel. Při používání aplikace můžou naslouchat hudbě, takže hlasitost a další nástroje pro sledování by měly být vždy přístupné z nabídky Surface Dial. (Při přehrávání médií se do nabídky automaticky přidá další nástroj pro sledování.)

Buďte konzistentní v organizaci nabídek
To pomáhá uživatelům zjišťovat a učit se, jaké nástroje jsou při používání aplikace k dispozici, a pomáhá zlepšit jejich efektivitu při přepínání nástrojů.

Zajištění vysoce kvalitních ikon konzistentních s integrovanými ikonami
Ikony mohou vyjádřit profesionalitu a dokonalost a inspirovat důvěru u uživatelů.

  • Poskytnutí vysoce kvalitního obrázku PNG 64 x 64 pixelů (44 x 44 je nejmenší podporovaná verze)
  • Ujistěte se, že pozadí je průhledné.
  • Ikona by měla vyplnit většinu obrázku.
  • Bílá ikona by měla mít černou obrys, aby byla viditelná v režimu vysokého kontrastu.

Snímek obrazovky s ikonou s alfa pozadím

Ikona s alfa pozadím

Snímek obrazovky s ikonou zobrazenou v nabídce kolečka s výchozím motivem

Ikona zobrazená v kolečkové nabídce s výchozím motivem

Snímek obrazovky s ikonou zobrazenou v nabídce kolečka s motivem High Contrast White

Ikona zobrazená v kolečkové nabídce s motivem High Contrast White

Použití výstižných a popisných názvů
Název nástroje se zobrazí v nabídce nástrojů spolu s ikonou nástroje a používá se také čtečkami obrazovky.

  • Názvy by měly být dostatečně krátké, aby se vešly do centrálního kruhu kolečka nabídky.
  • Názvy by měly jasně identifikovat primární akci (lze předpokládat doplňkovou akci):
    • Posuvník označuje efekt obou směrů otáčení.
    • Vrácení zpět určuje primární akci, ale opakování (doplňkovou akci) si uživatel může snadno odvodit a objevit.

Pokyny pro vývojáře

Prostředí Surface Dial můžete přizpůsobit tak, aby doplňovaly funkce v aplikacích prostřednictvím komplexní sady rozhraní API prostředí Windows Runtime.

Jak jsme už zmínili, výchozí nabídka Surface Dial je předem naplněná sadou integrovaných nástrojů, které pokrývají širokou škálu základních systémových funkcí (hlasitost systému, jas systému, posun, přiblížení, zpět a ovládání médií, když systém detekuje probíhající přehrávání zvuku nebo videa). Tyto výchozí nástroje ale nemusí poskytovat funkce vyžadované vaší aplikací.

V následujících částech popisujeme, jak do nabídky Surface Dial přidat vlastní nástroj a určit, které předdefinované nástroje jsou vystavené.

Stáhněte si robustnější verzi této ukázky z přizpůsobení RadialController.

Přidání vlastního nástroje

V tomto příkladu přidáme základní vlastní nástroj, který předává vstupní data z událostí rotace i kliknutí na některé ovládací prvky uživatelského rozhraní XAML.

  1. Nejprve deklarujeme uživatelské rozhraní (jenom posuvník a přepínací tlačítko) v XAML.

    Snímek obrazovky s ukázkou paprskového kontroleru s vodorovným posuvníkem nastaveným vlevo
    Uživatelské rozhraní ukázkové aplikace

    <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. Potom v kódu přidáme vlastní nástroj do nabídky Surface Dial a deklarujeme vstupní obslužné rutiny RadialController.

    Získáme odkaz na objekt RadialController pro Surface Dial (myController) voláním CreateForCurrentView.

    Potom vytvoříme instanci RadialControllerMenuItem (myItem) voláním RadialControllerMenuItem.CreateFromIcon.

    Dále tuto položku připojíme k kolekci položek nabídky.

    Deklarujeme vstupní obslužné rutiny událostí (ButtonClicked a RotationChanged) pro objekt RadialController .

    Nakonec definujeme obslužné rutiny událostí.

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

Když aplikaci spustíme, použijeme k interakci zařízení Surface Dial. Nejprve stiskneme a podržíme, abychom otevřeli nabídku, a vybereme náš vlastní nástroj. Po aktivaci vlastního nástroje lze ovládací prvek posuvníku upravit otočením Dial a přepínač lze přepnout kliknutím na Dial.

Snímek obrazovky s ukázkou paprskového kontroleru s vodorovným posuvníkem nastaveným na střed
Uživatelské rozhraní ukázkové aplikace aktivované pomocí vlastního nástroje Surface Dial

Specifikujte vestavěné nástroje

Pomocí třídy RadialControllerConfiguration můžete přizpůsobit kolekci předdefinovaných položek nabídky pro vaši aplikaci.

Pokud například vaše aplikace nemá žádné oblasti posouvání nebo přiblížení a nevyžaduje funkci zpět nebo znovu, můžete tyto nástroje z nabídky odebrat. Otevře se místo v nabídce pro přidání vlastních nástrojů pro vaši aplikaci.

Důležité

Nabídka Surface Dial musí obsahovat alespoň jednu položku. Pokud se před přidáním některého z vlastních nástrojů odeberou všechny výchozí nástroje, obnoví se výchozí nástroje a nástroj se připojí k výchozí kolekci.

Podle pokynů k návrhu nedoporučujeme odebírat nástroje pro ovládání médií (hlasitost a předchozí/další skladba), protože uživatelé často přehrávají hudbu na pozadí, zatímco provádějí jiné úlohy.

Tady si ukážeme, jak nakonfigurovat nabídku Surface Dial tak, aby obsahovala jenom ovládací prvky médií pro hlasitost a další/předchozí skladbu.

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

Vlastní interakce

Jak už bylo zmíněno, Surface Dial podporuje tři gesta (stisknutí a podržení, otočení, kliknutí) s odpovídajícími výchozími interakcemi.

Zajistěte, aby všechny vlastní interakce na základě těchto gest dávaly smysl pro vybranou akci nebo nástroj.

Poznámka:

Zkušenost s interakcí závisí na stavu menu Surface Dial. Pokud je nabídka aktivní, zpracuje vstup; jinak vaše aplikace funguje.

Stiskněte a podržte

Toto gesto se aktivuje a zobrazí nabídku Surface Dial. K tomuto gestu není přidružená žádná funkce aplikace.

Ve výchozím nastavení se nabídka zobrazí uprostřed obrazovky uživatele. Uživatel si ho ale může vzít a přesunout kamkoli si ho zvolí.

Poznámka:

Po umístění zařízení Surface Dial na obrazovku zařízení Surface Studio se nabídka zacentruje na místo na obrazovce zařízení Surface Studio.

Otáčet

Surface Dial je primárně navržený tak, aby podporoval otáčení pro interakce, které zahrnují hladké a přírůstkové úpravy analogových hodnot nebo ovládacích prvků.

Zařízení je možné otočit jak po směru hodinových ručiček, tak i proti směru hodinových ručiček a také poskytnout haptickou zpětnou vazbu, která označuje diskrétní vzdálenosti.

Poznámka:

Haptická zpětná vazba může být zakázána uživatelem na stránce Nastavení Windows -> Zařízení -> Kolo .

Pokyny pro uživatelské rozhraní pro vlastní interakce

Nástroje s nepřetržitou nebo vysokou rotační citlivostí by měly zakázat hmatovou zpětnou vazbu.

Haptická zpětná vazba odpovídá rotační citlivosti aktivního nástroje. Doporučujeme zakázat haptickou zpětnou vazbu pro nástroje s nepřetržitou nebo vysokou rotační citlivostí, protože uživatelské prostředí může být nepříjemné.

Dominantní ruka by neměla mít vliv na interakce založené na otáčení

Zařízení Surface Dial nedokáže zjistit, kterou ruku používáte, ale uživatel může nastavit psaní (nebo dominantní ruku) v nastavení Windows –> Zařízení –> Pero a Windows Ink.

Jazyk a regionální nastavení by se měly zvážit pro všechny interakce s rotací.

Maximalizujte spokojenost zákazníků přizpůsobením interakcí lokálním nastavením a rozložení zprava doleva.

Integrované nástroje a příkazy v nabídce Kružnici se řídí těmito pokyny pro interakce založené na otáčení:

Vlevo

Up

Out

Obrázek zařízení Surface Dial

Správně

Dolů

In

Koncepční směr Mapování na Surface Dial Otočení po směru hodinových ručiček Otočení proti směru hodinových ručiček
Horizontální Mapování vlevo a vpravo na základě vrchní strany zařízení Surface Dial Správně Vlevo
Vertikální Mapování nahoru a dolů na základě levé strany zařízení Surface Dial Dolů Up
Z-osa V (nebo v blízkosti) namapované nahoru nebo doprava
Namapováno (nebo dále) na dolů/levý směr		 In Out

Pokyny pro vývojáře

Když uživatel otočí zařízením, události RadialController.RotationChanged se aktivují na základě změny (RadialControllerRotationChangedEventArgs.RotationDeltaInDegrees) vzhledem ke směru otáčení. Citlivost (nebo rozlišení) dat lze nastavit pomocí RadialController.RotationResolutionInDegrees vlastnost.

Poznámka:

Ve výchozím nastavení se událost rotačního vstupu doručí do objektu RadialController pouze v případě, že se zařízení otočí minimálně o 10 stupňů. Každá vstupní událost způsobí, že zařízení vibruje.

Obecně doporučujeme zakázat haptickou zpětnou vazbu, když je rozlišení otočení nastaveno na méně než 5 stupňů. To poskytuje plynulejší prostředí pro nepřetržité interakce.

Pro vlastní nástroje můžete povolit a zakázat haptickou zpětnou vazbu nastavením vlastnosti RadialController.UseAutomaticHapticFeedback .

Poznámka:

Nelze přepsat haptické chování systémových nástrojů, jako je řízení hlasitosti. U těchto nástrojů může hmatová zpětná vazba zakázat jenom uživatel na stránce nastavení kola.

Tady je příklad přizpůsobení rozlišení dat rotace a povolení nebo zakázání haptické zpětné vazby.

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

Klikněte

Kliknutí na zařízení Surface Dial se podobá kliknutí na levé tlačítko myši (stav otáčení zařízení nemá na tuto akci žádný vliv).

Doprovodné materiály k uživatelskému prostředí

Nenamapujte akci nebo příkaz na toto gesto, pokud uživatel nemůže snadno provést obnovení z výsledku.

Všechny akce provedené vaší aplikací na základě uživatele, který kliká na Surface Dial, musí být vratné. Vždy umožněte uživateli snadno procházet předchozí stavy aplikace a obnovit jejich stav.

Binární operace, jako je ztlumení/zrušení ztlumení nebo zobrazení/skrytí, poskytují dobré uživatelské prostředí kliknutím.

Modální nástroje by neměly být povoleny nebo zakázány kliknutím na zařízení Surface Dial.

Některé režimy aplikací nebo nástrojů mohou kolidovat s, nebo zakázat, interakce, které závisí na rotaci. Nástroje, jako například pravítko na panelu nástrojů Windows Ink, by se měly zapínat nebo vypínat pomocí jiných přístupů v uživatelském rozhraní (panel nástrojů Rukopis poskytuje integrovaný ovládací prvek ToggleButton).

U modálních nástrojů namapujte aktivní položku nabídky Surface Dial na cílový nástroj nebo na dříve vybranou položku nabídky.

Pokyny pro vývojáře

Po kliknutí na Surface Dial se aktivuje událost RadialController.ButtonClicked. RadialControllerButtonClickedEventArgs obsahují vlastnost Contact, která obsahuje umístění a ohraničující oblast kontaktu Surface Dial na obrazovce Surface Studio. Pokud zařízení Surface Dial není v kontaktu s obrazovkou, má tato vlastnost hodnotu null.

Na obrazovce

Jak je popsáno výše, zařízení Surface Dial lze použít ve spojení se zařízením Surface Studio k zobrazení nabídky Surface Dial ve speciálním režimu na obrazovce.

V tomto režimu můžete ještě více integrovat a přizpůsobit zážitky z interakce s otočným ovladačem ve vašich aplikacích. Mezi příklady jedinečných prostředí, která je možné použít jenom u zařízení Surface Dial a Surface Studio, patří:

  • Zobrazení kontextových nástrojů (například palety barev) na základě pozice zařízení Surface Dial, což usnadňuje jejich vyhledání a použití.
  • Nastavení aktivního nástroje na základě uživatelského rozhraní, na které je zařízení Surface Dial umístěné
  • Zvětšení oblasti obrazovky na základě umístění zařízení Surface Dial
  • Jedinečné interakce her na základě polohy na obrazovce

Pokyny pro uživatelské rozhraní pro interakce na obrazovce

Aplikace by měly reagovat při zjištění zařízení Surface Dial na obrazovce

Vizuální zpětná vazba pomáhá uživatelům indikovat, že vaše aplikace zjistila zařízení na obrazovce zařízení Surface Studio.

Úprava uživatelského rozhraní souvisejícího se zařízením Surface Dial na základě umístění zařízení

Zařízení (a tělo uživatele) může zakrývat kritické prvky uživatelského rozhraní podle toho, kam ho uživatel umístí.

Úprava uživatelského rozhraní souvisejícího se zařízením Surface Dial na základě interakce uživatele

Kromě hardwarového překrytí může uživatel při používání zařízení zakrýt část obrazovky rukou a paží.

Zakrývaná oblast závisí na tom, kterou rukou se zařízení používá. Vzhledem k tomu, že je zařízení navrženo pro používání zejména s nedominantní rukou, by se uživatelské rozhraní spojené se Surface Dial mělo upravit pro opačnou ruku, kterou určí uživatel (nastavení Windows nastavení > Zařízení > Pero a Windows Ink > Volba, kterou rukou píšete).

Interakce by měly místo pohybu reagovat na pozici zařízení Surface Dial.

Noha zařízení je navržená tak, aby se místo klouzání přichytává na obrazovku, protože se nejedná o přesné polohovací zařízení. Proto očekáváme, že pro uživatele bude běžnější Surface Dial zvednout a umístit, než ho táhnout po obrazovce.

Určení záměru uživatele pomocí pozice obrazovky

Nastavení aktivního nástroje na základě kontextu uživatelského rozhraní, jako je například blízkost ovládacího prvku, plátna nebo okna, může zlepšit uživatelské prostředí snížením kroků potřebných k provedení úkolu.

Pokyny pro vývojáře

Když se zařízení Surface Dial umístí na plochu digitizátoru zařízení Surface Studio, aktivuje se událost RadialController.ScreenContactStarted a kontaktní informace (RadialControllerScreenContactStartedEventArgs.Contact) se vaší aplikaci poskytne.

Podobně platí, že pokud kliknete na Surface Dial při kontaktu s povrchem digitizátoru zařízení Surface Studio, aktivuje se událost RadialController.ButtonClicked a vaší aplikaci se poskytnou kontaktní informace (RadialControllerButtonClickedEventArgs.Contact).

Kontaktní informace (RadialControllerScreenContact) zahrnují souřadnici X/Y středu zařízení Surface Dial v souřadnicovém prostoru aplikace (RadialControllerScreenContact.Position) a také ohraničující obdélník (RadialControllerScreenContact.Bounds) v pixelech nezávislých na zařízení (DIPs). Tyto informace jsou velmi užitečné pro poskytnutí kontextu aktivního nástroje a poskytnutí vizuální zpětné vazby související se zařízením uživateli.

V následujícím příkladu jsme vytvořili základní aplikaci se čtyřmi různými oddíly, z nichž každá obsahuje jeden posuvník a jeden přepínač. Pak pomocí pozice na obrazovce zařízení Surface Dial určíme, která sada posuvníků a přepínačů se řídí zařízením Surface Dial.

  1. Nejprve deklarujeme uživatelské rozhraní (čtyři oddíly, každý s posuvníkem a přepínacím tlačítkem) v XAML.

    Snímek obrazovky s ukázkou paprskového kontroleru se čtyřmi vodorovnými posuvníky nastavenými vlevo
    Uživatelské rozhraní ukázkové aplikace

    <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. Tady je kód s obslužnými rutinami definovanými pro pozici obrazovky 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;
    }
  }
}

Když aplikaci spustíme, použijeme k interakci zařízení Surface Dial. Nejprve umístíme zařízení na obrazovku Surface Studio, kterou aplikace rozpozná a přidruží k pravé dolní části (viz obrázek). Stisknutím a podržením zařízení Surface Dial otevřete nabídku a vyberte náš vlastní nástroj. Po aktivaci vlastního nástroje lze ovládací prvek posuvníku upravit otočením zařízení Surface Dial a přepínač lze aktivovat kliknutím na zařízení Surface Dial.

Snímek obrazovky s ukázkou paprskového kontroleru se čtyřmi vodorovnými posuvníky nastavenými vlevo a zvýrazněným čtvrtým kontrolerem
Uživatelské rozhraní ukázkové aplikace aktivované pomocí vlastního nástroje Surface Dial

Shrnutí

Toto téma obsahuje přehled vstupního zařízení Surface Dial s uživatelským rozhraním a pokyny pro vývojáře, jak přizpůsobit uživatelské prostředí pro scénáře mimo obrazovku a scénáře na obrazovce při použití se zařízením Surface Studio.

Posílejte prosím své dotazy, návrhy a názory na radialcontroller@microsoft.comadresu .

Kurz: Podpora zařízení Surface Dial (a dalších zařízení kol) v aplikaci pro Windows

Referenční informace k rozhraní API

Samples

Ukázky témat

Přizpůsobení radialControlleru

Další ukázky

Ukázka omalovánky

Úvodní návod: Podpora zařízení Surface Dial (a dalších kolečkových zařízení) v aplikaci pro Windows

Ukázky univerzální platformy Windows (C# a C++)

Ukázka desktopové verze Windows

  • Last updated on