Utvecklarguide för Touch-interaktioner

Utforma din app med förväntan att touch är användarnas primära indatametod. Om du använder WinUI-kontroller kräver stöd för pekplatta, mus och penna ingen ytterligare programmering, eftersom WinUI-appar tillhandahåller detta kostnadsfritt.

Tänk dock på att ett användargränssnitt som är optimerat för touch inte alltid är överlägset ett traditionellt användargränssnitt. Både ger fördelar och nackdelar som är unika för en teknik och ett program. I övergången till ett touch-first-användargränssnitt är det viktigt att förstå de viktigaste skillnaderna mellan touch,pekplatta, penna, mus och tangentbordsinmatning.

Importerande API:er: Microsoft. UI. Xaml.Input, Windows. UI. Core, Windows. Devices.Input

Många enheter har skärmar med flera pekskärmar som stöder användning av en eller flera fingrar (eller beröringskontakter) som indata. Beröringskontakterna och deras rörelse tolkas som beröringsgester och manipuleringar för att stödja olika användarinteraktioner.

Windows app innehåller ett antal olika mekanismer för hantering av pekindata, så att du kan skapa en uppslukande upplevelse som användarna kan utforska med tillförsikt. Här går vi igenom grunderna i att använda pekindata i en Windows app.

Beröringsinteraktioner kräver tre saker:

• En pekkänslig skärm.
• Direktkontakten (eller närheten till, om displayen har närhetssensorer och stöder hovringsidentifiering) av en eller flera fingrar på displayen.
• Förflyttning av beröringskontakterna (eller brist på dem, baserat på ett tidströskelvärde).

Indata som tillhandahålls av touchsensorn kan vara:

• Tolkas som en fysisk gest för direkt manipulering av ett eller flera gränssnittselement, till exempel panorering, rotation, storleksändring eller flytt. (Däremot anses det vara indirekt manipulation att interagera med ett element via dess properties window, dialogruta eller andra användargränssnitt.)
• Identifieras som en alternativ indatametod, till exempel mus eller penna.
• Används för att komplettera eller ändra aspekter av andra indatametoder, till exempel att smeta ett pennstreck ritat med en penna.

Touch-indata innebär vanligtvis direkt manipulering av ett element på skärmen. Elementet svarar omedelbart på alla beröringskontakter inom sitt träfftestområde och reagerar på lämpligt sätt på efterföljande förflyttning av kontakterna, inklusive borttagning.

Anpassade touchgester och interaktioner bör utformas noggrant. De bör vara intuitiva, dynamiska och identifierbara, och de bör låta användarna utforska din app med tillförsikt.

Se till att appens funktionalitet exponeras konsekvent på alla indataenheter som stöds. Om det behövs kan du använda någon form av indirekt inmatningsläge, till exempel textinmatning för tangentbordsinteraktioner eller gränssnittsanvisningarna för mus och penna.

Kom ihåg att traditionella indataenheter (till exempel mus och tangentbord) är bekanta och tilltalande för många användare. De kan erbjuda snabbhet, noggrannhet och taktil feedback som beröring inte kan.

Genom att tillhandahålla unika och distinkta interaktionsupplevelser för alla indataenheter stöds det bredaste utbudet av funktioner och preferenser, tilltala bredast möjliga målgrupp och locka fler kunder till din app.

Jämföra krav för pekinteraktion

I följande tabell visas några av skillnaderna mellan indataenheter som du bör tänka på när du utformar pekoptimerade Windows-appar.

Använd pekfeedback

Lämplig visuell feedback under interaktioner med din app hjälper användarna att känna igen, lära sig och anpassa sig till hur deras interaktioner tolkas av både appen och Windows-plattformen. Visuell feedback kan indikera lyckade interaktioner, reläsystemstatus, förbättra känslan av kontroll, minska fel, hjälpa användare att förstå systemet och indataenheten och uppmuntra interaktion.

Visuell feedback är viktig när användaren förlitar sig på pekindata för aktiviteter som kräver noggrannhet och precision baserat på plats. Visa feedback när och var pekindata identifieras, för att hjälpa användaren att förstå eventuella anpassade målregler som definieras av din app och dess kontroller.

Targeting

Målinriktning optimeras genom:

• Pekmålstorlekar

  Tydliga storleksriktlinjer säkerställer att program ger ett bekvämt användargränssnitt som innehåller objekt och kontroller som är enkla och säkra att rikta in sig på.

• Kontaktgeometri

  Hela kontaktområdet i fingret avgör det mest sannolika målobjektet.

• Scrubbing

  Objekt i en grupp kan enkelt omdirigeras genom att dra fingret mellan dem (till exempel alternativknappar). Det aktuella objektet aktiveras när touchen släpps.

• Gungande

  Tätt packade objekt (till exempel hyperlänkar) riktas enkelt om genom att trycka ner fingret och, utan att glida, gunga det fram och tillbaka över objekten. På grund av ocklusion identifieras det aktuella objektet via ett verktygstips eller statusfältet och aktiveras när beröringen släpps.

Noggrannhet

Utforma för slarviga interaktioner med hjälp av:

• Snappunkter som kan göra det enklare att stanna vid önskade stoppunkter när användare interagerar med innehåll.
• Riktade "skenor" som kan hjälpa till med vertikal eller vågrät panorering, även när handen rör sig i en liten båge. Mer information finns i Riktlinjer för panorering.

Ocklusion

Finger- och handocklusion undviks genom:

• Storlek och placering av användargränssnittet

  Gör gränssnittselementen tillräckligt stora så att de inte kan täckas helt av ett fingertoppskontaktområde.

  Placera menyer och popup-fönster ovanför kontaktytan när det är möjligt.

• Tooltips

  Visa knappbeskrivningar när en användare underhåller fingerkontakt på ett objekt. Detta är användbart för att beskriva objektfunktioner. Användaren kan dra fingertoppen från objektet för att undvika att anropa verktygstipset.

  För små objekt förskjuter du verktygstips så att de inte täcks av fingertoppsområdet. Detta är användbart för inriktning.

• Handtag för precision

  Där precision krävs (till exempel textval) tillhandahåller du markeringshandtag som förskjuts för att förbättra noggrannheten. Mer information finns i Guidelines för att välja text och bilder (Windows Runtime appar).

Tidshantering

Undvik ändringar i tidsläge till förmån för direkt manipulering. Direkt manipulering simulerar direkt fysisk hantering i realtid av ett objekt. Objektet svarar när fingrarna flyttas.

En tidsinteraktion inträffar däremot efter en touchinteraktion. Tidsinställd interaktion beror vanligtvis på osynliga tröskelvärden som tid, avstånd eller hastighet för att avgöra vilket kommando som ska utföras. Tidsberoende interaktioner har ingen visuell feedback förrän systemet utför åtgärden.

Direkt manipulering ger ett antal fördelar jämfört med tidsenliga interaktioner:

• Direkt visuell feedback under interaktioner gör att användarna känner sig mer engagerade, trygga och har kontroll.
• Direkta manipuleringar gör det säkrare att utforska ett system eftersom de är reversibla – användarna kan enkelt gå tillbaka genom sina åtgärder på ett logiskt och intuitivt sätt.
• Interaktioner som direkt påverkar objekt och efterliknar verkliga interaktioner är mer intuitiva, upptäckbara och minnesvärda. De förlitar sig inte på obskyra eller abstrakta interaktioner.
• Tidsberoende interaktioner kan vara svåra att utföra, eftersom användarna måste nå godtyckliga och osynliga tröskelvärden.

Dessutom rekommenderas följande starkt:

• Manipuleringar bör inte särskiljas med antalet fingrar som används.
• Interaktioner bör stödja sammansatta manipuleringar. Nyp till exempel för att zooma medan du drar fingrarna för att panorera.
• Interaktioner bör inte särskiljas efter tid. Samma interaktion bör ha samma resultat oavsett hur mycket tid det tar att utföra den. Tidsbaserade aktiveringar medför obligatoriska fördröjningar för användare och förringar både den uppslukande karaktären av direkt manipulering och uppfattningen om systemets svarstider.

  Anmärkning

  Ett undantag till detta är när du använder specifika tidsspecifika interaktioner för att hjälpa till med inlärning och utforskning (till exempel genom att trycka och hålla i).

• Lämpliga beskrivningar och visuella tips har stor effekt på användningen av avancerade interaktioner.

Appvyer

Justera användarinteraktionsupplevelsen genom inställningarna för panorering/rullning och zoomning i dina appvyer. En appvy avgör hur en användare kommer åt och manipulerar din app och dess innehåll. Vyer ger också beteenden som tröghetsrörelse, kantstuds och snäppunkter.

Panorerings- och rullningsinställningarna för ScrollViewer-kontrollen avgör hur användare navigerar i en enda vy, när innehållet i vyn inte passar i visningsporten. En enda vy kan till exempel vara en sida i en tidning eller bok, mappstrukturen för en dator, ett bibliotek med dokument eller ett fotoalbum.

Zoominställningar gäller för både optisk zoom (stöds av ScrollViewer-kontrollen ) och kontrollen Semantisk zoom . Semantisk zoom är en pekoptimerad teknik för att presentera och navigera i stora uppsättningar relaterade data eller innehåll i en enda vy. Det fungerar genom att använda två distinkta klassificeringslägen eller zoomnivåer. Detta motsvarar panorering och rullning i en enda vy. Panorering och rullning kan användas tillsammans med semantisk zoomning.

Använd appvyer och händelser för att ändra funktionerna för panorering/rullning och zoomning. Detta kan ge en smidigare interaktionsupplevelse än vad som är möjligt genom hanteringen av pekare- och gesthändelser.

Mer information om appvyer finns i Kontroller, layouter och text.

Anpassade touchinteraktioner

Om du implementerar ditt eget interaktionsstöd bör du tänka på att användarna förväntar sig en intuitiv upplevelse med direkt interaktion med användargränssnittselementen i din app. Vi rekommenderar att du modellerar dina anpassade interaktioner på plattformskontrollbiblioteken för att hålla saker konsekventa och identifierbara. Kontrollerna i dessa bibliotek ger fullständig användarinteraktion, inklusive standardinteraktioner, animerade fysikeffekter, visuell feedback och tillgänglighet. Skapa endast anpassade interaktioner om det finns ett tydligt, väldefinierat krav och grundläggande interaktioner inte stöder ditt scenario.

Om du vill tillhandahålla anpassat pekstöd kan du hantera olika UIElement- händelser. Dessa händelser grupperas i tre abstraktionsnivåer.

• Statiska gesthändelser utlöses när en interaktion har slutförts. Gesthändelser inkluderar Tryck, Dubbeltryck, Högertryckoch Hållning.

  Du kan inaktivera gesthändelser för specifika element genom att ange IsTapEnabled, IsDoubleTapEnabled, IsRightTapEnabledoch IsHoldingEnabled till false.

• Pekarhändelser som PointerPressed och PointerMoved ger information på låg nivå för varje beröringskontakt, inklusive pekarrörelse och möjligheten att särskilja press- och versionshändelser.

  En pekare är en allmän indatatyp med en enhetlig händelsemekanism. Den visar grundläggande information, till exempel skärmposition, på den aktiva indatakällan, som kan vara touch, pekplatta, mus eller penna.

• Manipulationsgester, till exempel ManipulationStarted, indikerar en pågående interaktion. De börjar utlösas när användaren rör vid ett element och fortsätter tills användaren lyfter sina fingrar eller om manipuleringen avbryts.

  Manipulationshändelser omfattar interaktioner med flera pekfunktioner, till exempel zoomning, panorering eller rotation och interaktioner som använder tröghets- och hastighetsdata som att dra. Informationen som tillhandahålls av manipulationshändelserna identifierar inte vilken form av interaktion som utfördes, utan innehåller snarare data som position, översättningsdelta och hastighet. Du kan använda dessa touchdata för att fastställa vilken typ av interaktion som ska utföras.

Här är den grundläggande uppsättningen touchgester som stöds av WinUI.

Gesthändelser

Mer information om enskilda kontroller finns i listan Kontroller.

Pekarhändelser

Pekarhändelser genereras av en mängd olika aktiva indatakällor, inklusive touch, pekplatta, penna och mus (de ersätter traditionella mushändelser.)

Pekarhändelser baseras på en enda indatapunkt (finger, pennspets, musmarkör) och stöder inte hastighetsbaserade interaktioner.

Här är en lista över pekarhändelser och deras relaterade händelseargument.

I följande exempel visas hur du använder PointerPressed, PointerReleasedoch PointerExited-händelser för att behandla en pekinteraktion på ett rektangelobjekt.

Först skapas en rektangel med namnet touchRectangle i XAML (Extensible Application Markup Language).

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Rectangle Name="touchRectangle"
           Height="100" Width="200" Fill="Blue" />
</Grid>

Därefter anges lyssnare för PointerPressed, PointerReleasedoch PointerExited events.

MainPage::MainPage()
{
    InitializeComponent();

    // Pointer event listeners.
    touchRectangle->PointerPressed += ref new PointerEventHandler(this, &MainPage::touchRectangle_PointerPressed);
    touchRectangle->PointerReleased += ref new PointerEventHandler(this, &MainPage::touchRectangle_PointerReleased);
    touchRectangle->PointerExited += ref new PointerEventHandler(this, &MainPage::touchRectangle_PointerExited);
}

public MainPage()
{
    this.InitializeComponent();

    // Pointer event listeners.
    touchRectangle.PointerPressed += touchRectangle_PointerPressed;
    touchRectangle.PointerReleased += touchRectangle_PointerReleased;
    touchRectangle.PointerExited += touchRectangle_PointerExited;
}

Public Sub New()

    ' This call is required by the designer.
    InitializeComponent()

    ' Pointer event listeners.
    AddHandler touchRectangle.PointerPressed, AddressOf touchRectangle_PointerPressed
    AddHandler touchRectangle.PointerReleased, AddressOf Me.touchRectangle_PointerReleased
    AddHandler touchRectangle.PointerExited, AddressOf touchRectangle_PointerExited

End Sub

Slutligen ökar händelsehanteraren PointerPressedHeight och Width av Rektangel, medan händelsehanterarna PointerReleased och PointerExited sätter Height och Width tillbaka till sina ursprungliga värden.

// Handler for pointer exited event.
void MainPage::touchRectangle_PointerExited(Object^ sender, PointerRoutedEventArgs^ e)
{
    Rectangle^ rect = (Rectangle^)sender;

    // Pointer moved outside Rectangle hit test area.
    // Reset the dimensions of the Rectangle.
    if (nullptr != rect)
    {
        rect->Width = 200;
        rect->Height = 100;
    }
}

// Handler for pointer released event.
void MainPage::touchRectangle_PointerReleased(Object^ sender, PointerRoutedEventArgs^ e)
{
    Rectangle^ rect = (Rectangle^)sender;

    // Reset the dimensions of the Rectangle.
    if (nullptr != rect)
    {
        rect->Width = 200;
        rect->Height = 100;
    }
}

// Handler for pointer pressed event.
void MainPage::touchRectangle_PointerPressed(Object^ sender, PointerRoutedEventArgs^ e)
{
    Rectangle^ rect = (Rectangle^)sender;

    // Change the dimensions of the Rectangle.
    if (nullptr != rect)
    {
        rect->Width = 250;
        rect->Height = 150;
    }
}

// Handler for pointer exited event.
private void touchRectangle_PointerExited(object sender, PointerRoutedEventArgs e)
{
    Rectangle rect = sender as Rectangle;

    // Pointer moved outside Rectangle hit test area.
    // Reset the dimensions of the Rectangle.
    if (null != rect)
    {
        rect.Width = 200;
        rect.Height = 100;
    }
}
// Handler for pointer released event.
private void touchRectangle_PointerReleased(object sender, PointerRoutedEventArgs e)
{
    Rectangle rect = sender as Rectangle;

    // Reset the dimensions of the Rectangle.
    if (null != rect)
    {
        rect.Width = 200;
        rect.Height = 100;
    }
}

// Handler for pointer pressed event.
private void touchRectangle_PointerPressed(object sender, PointerRoutedEventArgs e)
{
    Rectangle rect = sender as Rectangle;

    // Change the dimensions of the Rectangle.
    if (null != rect)
    {
        rect.Width = 250;
        rect.Height = 150;
    }
}

' Handler for pointer exited event.
Private Sub touchRectangle_PointerExited(sender As Object, e As PointerRoutedEventArgs)
    Dim rect As Rectangle = CType(sender, Rectangle)

    ' Pointer moved outside Rectangle hit test area.
    ' Reset the dimensions of the Rectangle.
    If (rect IsNot Nothing) Then
        rect.Width = 200
        rect.Height = 100
    End If
End Sub

' Handler for pointer released event.
Private Sub touchRectangle_PointerReleased(sender As Object, e As PointerRoutedEventArgs)
    Dim rect As Rectangle = CType(sender, Rectangle)

    ' Reset the dimensions of the Rectangle.
    If (rect IsNot Nothing) Then
        rect.Width = 200
        rect.Height = 100
    End If
End Sub

' Handler for pointer pressed event.
Private Sub touchRectangle_PointerPressed(sender As Object, e As PointerRoutedEventArgs)
    Dim rect As Rectangle = CType(sender, Rectangle)

    ' Change the dimensions of the Rectangle.
    If (rect IsNot Nothing) Then
        rect.Width = 250
        rect.Height = 150
    End If
End Sub

Manipulationshändelser

Använd manipulationshändelser i din app om du behöver stöd för flera fingerinteraktioner eller interaktioner som kräver hastighetsdata.

Du kan använda manipulationshändelser för att identifiera interaktioner som dra, zooma och hålla.

Här är en lista över manipulationshändelser och relaterade händelseargument.

En gest består av en serie manipulationshändelser. Varje gest börjar med en ManipulationStartad händelse, till exempel när en användare rör vid skärmen.

Därefter utlöses en eller flera ManipulationDelta händelser. Om du till exempel rör vid skärmen och sedan drar fingret över skärmen. Slutligen utlöses en ManipulationCompleted händelse när interaktionen är klar.

I följande exempel visas hur du använder ManipulationDelta-händelserna för att hantera en bildinteraktion på en rektangel och flytta den över skärmen.

Först skapas i XAML en rektangel med namnet touchRectangle, med höjd och bredd på 200.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Rectangle Name="touchRectangle"
               Width="200" Height="200" Fill="Blue" 
               ManipulationMode="All"/>
</Grid>

Därefter skapas en global TranslateTransform med namnet dragTranslation för att translatera rektangel. En ManipulationDelta-händelselyssnare anges på Rectangle, och dragTranslation läggs till i RenderTransform för Rectangle.

// Global translation transform used for changing the position of 
// the Rectangle based on input data from the touch contact.
Windows::UI::Xaml::Media::TranslateTransform^ dragTranslation;

// Global translation transform used for changing the position of 
// the Rectangle based on input data from the touch contact.
private TranslateTransform dragTranslation;

' Global translation transform used for changing the position of 
' the Rectangle based on input data from the touch contact.
Private dragTranslation As TranslateTransform

MainPage::MainPage()
{
    InitializeComponent();

    // Listener for the ManipulationDelta event.
    touchRectangle->ManipulationDelta += 
        ref new ManipulationDeltaEventHandler(
            this, 
            &MainPage::touchRectangle_ManipulationDelta);
    // New translation transform populated in 
    // the ManipulationDelta handler.
    dragTranslation = ref new TranslateTransform();
    // Apply the translation to the Rectangle.
    touchRectangle->RenderTransform = dragTranslation;
}

public MainPage()
{
    this.InitializeComponent();

    // Listener for the ManipulationDelta event.
    touchRectangle.ManipulationDelta += touchRectangle_ManipulationDelta;
    // New translation transform populated in 
    // the ManipulationDelta handler.
    dragTranslation = new TranslateTransform();
    // Apply the translation to the Rectangle.
    touchRectangle.RenderTransform = this.dragTranslation;
}

Public Sub New()

    ' This call is required by the designer.
    InitializeComponent()

    ' Listener for the ManipulationDelta event.
    AddHandler touchRectangle.ManipulationDelta,
        AddressOf testRectangle_ManipulationDelta
    ' New translation transform populated in 
    ' the ManipulationDelta handler.
    dragTranslation = New TranslateTransform()
    ' Apply the translation to the Rectangle.
    touchRectangle.RenderTransform = dragTranslation

End Sub

I händelsehanteraren ManipulationDelta uppdateras slutligen rektangelns position med hjälp av TranslateTransformpå deltaegenskapen.

// Handler for the ManipulationDelta event.
// ManipulationDelta data is loaded into the
// translation transform and applied to the Rectangle.
void MainPage::touchRectangle_ManipulationDelta(Object^ sender,
    ManipulationDeltaRoutedEventArgs^ e)
{
    // Move the rectangle.
    dragTranslation->X += e->Delta.Translation.X;
    dragTranslation->Y += e->Delta.Translation.Y;
    
}

// Handler for the ManipulationDelta event.
// ManipulationDelta data is loaded into the
// translation transform and applied to the Rectangle.
void touchRectangle_ManipulationDelta(object sender,
    ManipulationDeltaRoutedEventArgs e)
{
    // Move the rectangle.
    dragTranslation.X += e.Delta.Translation.X;
    dragTranslation.Y += e.Delta.Translation.Y;
}

' Handler for the ManipulationDelta event.
' ManipulationDelta data Is loaded into the
' translation transform And applied to the Rectangle.
Private Sub testRectangle_ManipulationDelta(
    sender As Object,
    e As ManipulationDeltaRoutedEventArgs)

    ' Move the rectangle.
    dragTranslation.X = (dragTranslation.X + e.Delta.Translation.X)
    dragTranslation.Y = (dragTranslation.Y + e.Delta.Translation.Y)

End Sub

Routade händelser

Alla pekarhändelser, gesthändelser och manipulationshändelser som nämns här implementeras som routade händelser. Det innebär att händelsen potentiellt kan hanteras av andra objekt än den som ursprungligen skapade händelsen. Efterföljande överordnade i ett objektträd, till exempel föräldrakontainrar av en UIElement eller roten Page till din app, kan välja att hantera dessa händelser även om det ursprungliga elementet inte gör det. Omvänt kan alla objekt som hanterar händelsen markera händelsen som hanteras så att den inte längre når något överordnat element. Mer information om begreppet dirigerad händelse och hur det påverkar hur du skriver hanterare för routade händelser finns i Översikt över händelser och routade händelser.

Saker man ska och inte ska göra

• Utforma program med pekinteraktion som den primära förväntade indatametoden.
• Ge visuell feedback för interaktioner av alla slag (touch, penna, stylus, mus osv.)
• Optimera inriktning genom att justera pekmålstorlek, kontaktgeometri, svepning och vaggning.
• Optimera noggrannheten med hjälp av fästpunkter och riktade "skenor".
• Ge knappbeskrivningar och kontroller för att förbättra precisionen för tättpackade gränssnittsobjekt.
• Använd inte tidsanpassade interaktioner när det är möjligt (exempel på lämplig användning: touch and hold).
• Använd inte det antal fingrar som används för att särskilja manipulationen när det är möjligt.

Relaterade artiklar

• Hantera pekarindata
• Identifiera inmatningsenheter

Samples

• Exempel på grundläggande indata
• Låg latens indatasample
• Exempel på användarinteraktionsläge
• Exempel på fokusvisuella element

Arkivera exempel

• Input: Exempel på enhetsfunktioner
• Input: Exempel på XAML-användarindatahändelser
• XAML-rullning, panorering och zoomning exempel
• Input: Gester och manipuleringar med GestureRecognizer