Peninteracties en Windows Ink in Windows-apps

Surface-pen (verkrijgbaar in de Microsoft Store).

Overzicht

Optimaliseer uw Windows-app voor peninvoer om zowel de standaardfunctionaliteit van het aanwijzerapparaat als de beste Windows Ink-ervaring voor uw gebruikers te bieden.

Het Windows Ink-platform, samen met een penapparaat, biedt een natuurlijke manier om digitale handgeschreven notities, tekeningen en aantekeningen te maken. Het platform ondersteunt het vastleggen van digitale invoer als inktgegevens, het genereren van inktgegevens, het beheren van inktgegevens, het weergeven van inktgegevens als pennenstreken op het uitvoerapparaat en het converteren van inkt naar tekst via handschriftherkenning.

Naast het vastleggen van de basispositie en beweging van de pen terwijl de gebruiker schrijft of tekent, kan uw app ook de verschillende hoeveelheden druk bijhouden en verzamelen die tijdens een pennenstreek worden gebruikt. Met deze informatie, samen met instellingen voor pentipvorm, grootte en draaiing, inktkleur en doel (gewone inkt, wissen, markeren en selecteren), kunt u gebruikerservaringen bieden die vergelijkbaar zijn met schrijven of tekenen op papier met een pen, potlood of penseel.

Het inktplatform is zeer flexibel. Het is ontworpen om verschillende functionaliteitsniveaus te ondersteunen, afhankelijk van uw vereisten.

Zie Inking-controles voor Windows Ink UX-richtlijnen.

Onderdelen van het Windows Ink-platform

Eenvoudig tekenen met InkCanvas

Als u eenvoudige inktfunctionaliteit wilt toevoegen, plaatst u een InkCanvas UWP-platformbesturing op de juiste pagina in uw app.

InkCanvas ondersteunt standaard alleen inktinvoer van een pen. De invoer wordt weergegeven als een inktstreep met behulp van standaardinstellingen voor kleur en dikte (een zwarte digitale balpen met een dikte van 2 pixels) of behandeld als een gumstreep (wanneer de invoer afkomstig is van een gummetje of een penpunt die met een gumknop is aangepast).

In dit voorbeeld legt een InkCanvas over een achtergrondafbeelding.

<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="Basic ink sample"
                   Style="{ThemeResource HeaderTextBlockStyle}"
                   Margin="10,0,0,0" />            
    </StackPanel>
    <Grid Grid.Row="1">
        <Image Source="Assets\StoreLogo.png" />
        <InkCanvas x:Name="inkCanvas" />
    </Grid>
</Grid>

Deze reeks afbeeldingen laat zien hoe peninvoer wordt weergegeven door dit InkCanvas-besturingselement .

De lege InkCanvas met een achtergrondafbeelding.	De InkCanvas met pennenstreken.	De InkCanvas met één pennenstreek gewist (let op hoe wissen werkt op een hele pennenstreek, niet op een deel).

De inktfunctionaliteit die wordt ondersteund door het besturingselement InkCanvas , wordt geleverd door een code-behind-object met de naam InkPresenter.

Voor eenvoudige inkt hoeft u zich niet bezig te houden met de InkPresenter. Als u het inktgedrag echter wilt aanpassen en configureren voor InkCanvas, moet u toegang krijgen tot het bijbehorende InkPresenter-object .

Basisaanpassing met InkPresenter

Een InkPresenter-object wordt geïnstantieerd met elk InkCanvas-besturingselement .

Naast het bieden van alle standaard inktgedrag van het bijbehorende InkCanvas-besturingselement , biedt de InkPresenter een uitgebreide set API's voor extra pennenaanpassing en fijner beheer van de peninvoer (standaard en gewijzigd). Dit omvat eigenschappen van pennenstreken, ondersteunde invoerapparaattypen en of invoer wordt verwerkt door het object of doorgegeven aan de app voor verwerking.

Inkt wordt standaard alleen ondersteund voor peninvoer. Hier configureren we de InkPresenter om invoergegevens van zowel de pen als de muis te interpreteren als pennenstreken. We hebben ook enkele initiële pennenstreekkenmerken ingesteld die worden gebruikt voor het weergeven van pennenstreken naar de InkCanvas.

Als u de muis en handschrift wilt inschakelen, stelt u de eigenschap InputDeviceTypes van de InkPresenter in op de combinatie van coreInputDeviceTypes-waarden die u wilt.

public MainPage()
{
    this.InitializeComponent();

    // Set supported inking device types.
    inkCanvas.InkPresenter.InputDeviceTypes =
        Windows.UI.Core.CoreInputDeviceTypes.Mouse |
        Windows.UI.Core.CoreInputDeviceTypes.Pen;

    // Set initial ink stroke attributes.
    InkDrawingAttributes drawingAttributes = new InkDrawingAttributes();
    drawingAttributes.Color = Windows.UI.Colors.Black;
    drawingAttributes.IgnorePressure = false;
    drawingAttributes.FitToCurve = true;
    inkCanvas.InkPresenter.UpdateDefaultDrawingAttributes(drawingAttributes);
}

Kenmerken voor pennenstreken kunnen dynamisch worden ingesteld om tegemoet te komen aan gebruikersvoorkeuren of app-vereisten.

Hier laten we een gebruiker kiezen uit een lijst met inktkleuren.

<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="Basic ink customization sample"
                   VerticalAlignment="Center"
                   Style="{ThemeResource HeaderTextBlockStyle}"
                   Margin="10,0,0,0" />
        <TextBlock Text="Color:"
                   Style="{StaticResource SubheaderTextBlockStyle}"
                   VerticalAlignment="Center"
                   Margin="50,0,10,0"/>
        <ComboBox x:Name="PenColor"
                  VerticalAlignment="Center"
                  SelectedIndex="0"
                  SelectionChanged="OnPenColorChanged">
            <ComboBoxItem Content="Black"/>
            <ComboBoxItem Content="Red"/>
        </ComboBox>
    </StackPanel>
    <Grid Grid.Row="1">
        <Image Source="Assets\StoreLogo.png" />
        <InkCanvas x:Name="inkCanvas" />
    </Grid>
</Grid>

Vervolgens verwerken we wijzigingen in de geselecteerde kleur en werken we de kenmerken van de pennenstreek dienovereenkomstig bij.

// Update ink stroke color for new strokes.
private void OnPenColorChanged(object sender, SelectionChangedEventArgs e)
{
    if (inkCanvas != null)
    {
        InkDrawingAttributes drawingAttributes =
            inkCanvas.InkPresenter.CopyDefaultDrawingAttributes();

        string value = ((ComboBoxItem)PenColor.SelectedItem).Content.ToString();

        switch (value)
        {
            case "Black":
                drawingAttributes.Color = Windows.UI.Colors.Black;
                break;
            case "Red":
                drawingAttributes.Color = Windows.UI.Colors.Red;
                break;
            default:
                drawingAttributes.Color = Windows.UI.Colors.Black;
                break;
        };

        inkCanvas.InkPresenter.UpdateDefaultDrawingAttributes(drawingAttributes);
    }
}

Deze afbeeldingen laten zien hoe peninvoer wordt verwerkt en aangepast door de InkPresenter.

Als u functionaliteit wilt bieden naast inkt en wissen, zoals het selecteren van pennenstreken, moet uw app specifieke invoer voor de InkPresenter identificeren, zodat deze onbewerkt kan worden doorgegeven ter verwerking door uw app.

Doorvoerinvoer voor geavanceerde verwerking

InkPresenter verwerkt standaard alle invoer als een inktstreek of een wisstreek, inclusief invoer die is gewijzigd door een secundaire hardware-functionaliteit zoals een penloopknop, een rechtermuisknop of iets vergelijkbaars. Gebruikers verwachten echter doorgaans wat extra functionaliteit of aangepast gedrag met deze secundaire mogelijkheden.

In sommige gevallen moet u mogelijk ook extra functionaliteit beschikbaar maken voor pennen zonder secundaire mogelijkheden (functionaliteit die gewoonlijk niet met de punt van de pen wordt geassocieerd), andere typen invoerapparaten, of een bepaald type gewijzigd gedrag gebaseerd op een gebruikerskeuze in de UI van uw app.

Ter ondersteuning hiervan kan InkPresenter worden geconfigureerd om specifieke invoer niet verwerkt te laten. Deze niet-verwerkte invoer wordt vervolgens doorgegeven aan uw app voor verwerking.

Voorbeeld: onverwerkte invoer gebruiken om de lijnselectie te implementeren

Het Windows Ink-platform biedt geen ingebouwde ondersteuning voor acties waarvoor gewijzigde invoer is vereist, zoals de selectie van pennenstreken. Als u dergelijke functies wilt ondersteunen, moet u een aangepaste oplossing in uw apps opgeven.

Het volgende codevoorbeeld (alle code bevindt zich in de bestanden MainPage.xaml en MainPage.xaml.cs) laat zien hoe je streekselectie inschakelt wanneer de invoer wordt aangepast met een penvatknop (of de rechtermuisknop).

1. Eerst stellen we de gebruikersinterface in MainPage.xaml in.

   Hier voegen we een canvas toe om de selectiestreep te tekenen (onder de InkCanvas). Als u een afzonderlijke laag gebruikt om de selectiestreek te tekenen, blijft de InkCanvas en de inhoud ongewijzigd.

   

     <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="Advanced ink customization sample"
           VerticalAlignment="Center"
           Style="{ThemeResource HeaderTextBlockStyle}"
           Margin="10,0,0,0" />
       </StackPanel>
       <Grid Grid.Row="1">
         <!-- Canvas for displaying selection UI. -->
         <Canvas x:Name="selectionCanvas"/>
         <!-- Inking area -->
         <InkCanvas x:Name="inkCanvas"/>
       </Grid>
     </Grid>
   

2. In MainPage.xaml.cs declareren we een aantal globale variabelen voor het behouden van verwijzingen naar aspecten van de selectiegebruikersinterface. Met name de lasso-selectiestreek en de begrenzingsrechthoek waarmee de geselecteerde pennenstreken worden gemarkeerd.

     // Stroke selection tool.
     private Polyline lasso;
     // Stroke selection area.
     private Rect boundingRect;
   

3. Vervolgens configureren we de InkPresenter om invoergegevens van zowel de pen als de muis te interpreteren als pennenstreken en stellen we enkele initiële pennenstreken in die worden gebruikt voor het weergeven van pennenstreken naar de InkCanvas.

   Het belangrijkste is dat we de eigenschap InputProcessingConfiguration van de InkPresenter gebruiken om aan te geven dat alle gewijzigde invoer door de app moet worden verwerkt. Gewijzigde invoer kan worden opgegeven door InputProcessingConfiguration.RightDragAction een waarde toe te wijzen van InkInputRightDragAction.LeaveUnprocessed. Wanneer deze waarde is ingesteld, wordt de InkPresenter doorgegeven aan de klasse InkUnprocessedInput , een set aanwijzergebeurtenissen die u kunt verwerken.

   We wijzen listeners toe voor de niet-verwerkte PointerPressed-, PointerMoved- en PointerReleased-gebeurtenissen die zijn doorgegeven door de InkPresenter. Alle selectiefunctionaliteit wordt geïmplementeerd in de handlers voor deze gebeurtenissen.

   Ten slotte wijzen we listeners toe voor de gebeurtenissen StrokeStarted en StrokesErased van de InkPresenter. We gebruiken de handlers voor deze gebeurtenissen om de selectie-UI op te schonen als er een nieuwe pennenstreek wordt gestart of als een bestaande pennenstreek wordt gewist.

   

     public MainPage()
     {
       this.InitializeComponent();
   
       // Set supported inking device types.
       inkCanvas.InkPresenter.InputDeviceTypes =
         Windows.UI.Core.CoreInputDeviceTypes.Mouse |
         Windows.UI.Core.CoreInputDeviceTypes.Pen;
   
       // Set initial ink stroke attributes.
       InkDrawingAttributes drawingAttributes = new InkDrawingAttributes();
       drawingAttributes.Color = Windows.UI.Colors.Black;
       drawingAttributes.IgnorePressure = false;
       drawingAttributes.FitToCurve = true;
       inkCanvas.InkPresenter.UpdateDefaultDrawingAttributes(drawingAttributes);
   
       // By default, the InkPresenter processes input modified by
       // a secondary affordance (pen barrel button, right mouse
       // button, or similar) as ink.
       // To pass through modified input to the app for custom processing
       // on the app UI thread instead of the background ink thread, set
       // InputProcessingConfiguration.RightDragAction to LeaveUnprocessed.
       inkCanvas.InkPresenter.InputProcessingConfiguration.RightDragAction =
           InkInputRightDragAction.LeaveUnprocessed;
   
       // Listen for unprocessed pointer events from modified input.
       // The input is used to provide selection functionality.
       inkCanvas.InkPresenter.UnprocessedInput.PointerPressed +=
           UnprocessedInput_PointerPressed;
       inkCanvas.InkPresenter.UnprocessedInput.PointerMoved +=
           UnprocessedInput_PointerMoved;
       inkCanvas.InkPresenter.UnprocessedInput.PointerReleased +=
           UnprocessedInput_PointerReleased;
   
       // Listen for new ink or erase strokes to clean up selection UI.
       inkCanvas.InkPresenter.StrokeInput.StrokeStarted +=
           StrokeInput_StrokeStarted;
       inkCanvas.InkPresenter.StrokesErased +=
           InkPresenter_StrokesErased;
     }
   

4. Vervolgens definiëren we handlers voor de niet-verwerkte PointerPressed-, PointerMoved- en PointerReleased-gebeurtenissen die worden doorgegeven door de InkPresenter.

   Alle selectiefunctionaliteit wordt geïmplementeerd in deze handlers, inclusief de lasso-lijn en de begrenzingsrechthoek.

   

     // Handle unprocessed pointer events from modified input.
     // The input is used to provide selection functionality.
     // Selection UI is drawn on a canvas under the InkCanvas.
     private void UnprocessedInput_PointerPressed(
       InkUnprocessedInput sender, PointerEventArgs args)
     {
       // Initialize a selection lasso.
       lasso = new Polyline()
       {
           Stroke = new SolidColorBrush(Windows.UI.Colors.Blue),
           StrokeThickness = 1,
           StrokeDashArray = new DoubleCollection() { 5, 2 },
           };
   
           lasso.Points.Add(args.CurrentPoint.RawPosition);
   
           selectionCanvas.Children.Add(lasso);
       }
   
       private void UnprocessedInput_PointerMoved(
         InkUnprocessedInput sender, PointerEventArgs args)
       {
         // Add a point to the lasso Polyline object.
         lasso.Points.Add(args.CurrentPoint.RawPosition);
       }
   
       private void UnprocessedInput_PointerReleased(
         InkUnprocessedInput sender, PointerEventArgs args)
       {
         // Add the final point to the Polyline object and
         // select strokes within the lasso area.
         // Draw a bounding box on the selection canvas
         // around the selected ink strokes.
         lasso.Points.Add(args.CurrentPoint.RawPosition);
   
         boundingRect =
           inkCanvas.InkPresenter.StrokeContainer.SelectWithPolyLine(
             lasso.Points);
   
         DrawBoundingRect();
       }
   

5. Om de pointerReleased-gebeurtenishandler te sluiten, wissen we de selectielaag van alle inhoud (de lasso-lijn) en tekenen we vervolgens één begrenzingsrechthoek rond de pennenstreken die zijn opgenomen in het lasso-gebied.

   

     // Draw a bounding rectangle, on the selection canvas, encompassing
     // all ink strokes within the lasso area.
     private void DrawBoundingRect()
     {
       // Clear all existing content from the selection canvas.
       selectionCanvas.Children.Clear();
   
       // Draw a bounding rectangle only if there are ink strokes
       // within the lasso area.
       if (!((boundingRect.Width == 0) ||
         (boundingRect.Height == 0) ||
         boundingRect.IsEmpty))
         {
           var rectangle = new Rectangle()
           {
             Stroke = new SolidColorBrush(Windows.UI.Colors.Blue),
               StrokeThickness = 1,
               StrokeDashArray = new DoubleCollection() { 5, 2 },
               Width = boundingRect.Width,
               Height = boundingRect.Height
           };
   
           Canvas.SetLeft(rectangle, boundingRect.X);
           Canvas.SetTop(rectangle, boundingRect.Y);
   
           selectionCanvas.Children.Add(rectangle);
         }
       }
   

6. Ten slotte definiëren we handlers voor de gebeurtenissen StrokeStarted en StrokesErased InkPresenter.

   Beide roepen dezelfde opschoonfunctie aan om de huidige selectie te wissen zodra er een nieuwe beweging wordt gedetecteerd.

     // Handle new ink or erase strokes to clean up selection UI.
     private void StrokeInput_StrokeStarted(
       InkStrokeInput sender, Windows.UI.Core.PointerEventArgs args)
     {
       ClearSelection();
     }
   
     private void InkPresenter_StrokesErased(
       InkPresenter sender, InkStrokesErasedEventArgs args)
     {
       ClearSelection();
     }
   

7. De functie om alle selectie-interface van het selectiecanvas te verwijderen wanneer een nieuwe pennenstreek wordt begonnen of een bestaande pennenstreek wordt gewist.

     // Clean up selection UI.
     private void ClearSelection()
     {
       var strokes = inkCanvas.InkPresenter.StrokeContainer.GetStrokes();
       foreach (var stroke in strokes)
       {
         stroke.Selected = false;
       }
       ClearDrawnBoundingRect();
      }
   
     private void ClearDrawnBoundingRect()
     {
       if (selectionCanvas.Children.Any())
       {
         selectionCanvas.Children.Clear();
         boundingRect = Rect.Empty;
       }
     }
   

Aangepaste inktweergave

Inktinvoer wordt standaard verwerkt op een achtergrondthread met lage latentie en weergegeven in uitvoering, of 'nat', zoals deze wordt getekend. Wanneer de pennenstreek is voltooid (pen of vinger opgeheven of muisknop losgelaten), wordt de pennenstreek op de UI-thread verwerkt en 'droog' weergegeven op de InkCanvas-laag (boven de inhoud van de toepassing en ter vervanging van de natte inkt).

U kunt dit standaardgedrag overschrijven en de inktervaring volledig regelen door de natte pennenstreken 'aangepast' te drogen. Hoewel het standaardgedrag doorgaans voldoende is voor de meeste toepassingen, zijn er enkele gevallen waarin aangepaste drooging mogelijk vereist is, zoals:

• Efficiënter beheer van grote of complexe verzamelingen pennenstreken
• Meer efficiënte ondersteuning voor panning en zoomen op grote inktdoeken
• Het afwisselen van inkt en andere objecten, zoals vormen of tekst, met behoud van de z-volgorde
• Inkt synchroon drogen en converteren naar een DirectX-shape (bijvoorbeeld een rechte lijn of vorm die is gerasterd en geïntegreerd in toepassingsinhoud in plaats van als een afzonderlijke InkCanvas-laag ).

Voor aangepaste drooging is een IInkD2DRenderer-object vereist om de inktinvoer te beheren en weer te geven in de Context van het Direct2D-apparaat van uw Universele Windows-app, in plaats van het standaard besturingselement InkCanvas .

Door ActivateCustomDrying aan te roepen (voordat de InkCanvas wordt geladen), maakt een app een InkSynchronizer-object om aan te passen hoe een pennenstreek droog wordt weergegeven in een SurfaceImageSource of VirtualSurfaceImageSource.

Zowel SurfaceImageSource als VirtualSurfaceImageSource bieden een gedeeld DirectX-oppervlak, zodat uw app erin kan tekenen en het kan samenstellen met de inhoud van uw toepassing, hoewel VSIS een virtueel oppervlak biedt dat groter is dan het scherm voor betere prestaties van pan- en zoomfuncties. Omdat visuele updates voor deze oppervlakken worden gesynchroniseerd met de XAML UI-thread, kan de natte inkt tegelijkertijd uit de InkCanvas worden verwijderd wanneer inkt wordt weergegeven.

U kunt ook aangepaste droge inkt naar een SwapChainPanel sturen, maar synchronisatie met de UI-thread is niet gegarandeerd. Er kan een vertraging optreden tussen het moment waarop de inkt naar uw SwapChainPanel wordt gerenderd en het moment waarop inkt uit de InkCanvas wordt verwijderd.

Zie het voorbeeld van complexe inkt voor een volledig voorbeeld van deze functionaliteit.

Andere artikelen in deze sectie

Verwante artikelen

• Aan de slag: Inkt in uw Windows-app ondersteunen
• Invoer van handlepointer
• Invoerapparaten identificeren
• Isf-specificatie (Ink Serialized Format).

APIs

• Windows.Devices.Input
• Windows.UI.Input.Inking
• Windows.UI.Input.Inking.Core

Samples

• Zelfstudie Aan de slag: Inkt in uw Windows-app ondersteunen
• Eenvoudig inktvoorbeeld (C#/C++)
• Complex inktvoorbeeld (C++)
• Inktvoorbeeld (JavaScript)
• Voorbeeld van kleurboek
• Voorbeeld van gezinsnotities
• Voorbeeld van basisinvoer
• Voorbeeld van invoer met lage latentie
• Voorbeeld van gebruikersinteractiemodus
• voorbeeldvoorbeeld van Focusvisuals

Archiefvoorbeelden

• Invoer: Voorbeeld van apparaatmogelijkheden
• Invoer: voorbeeld van XAML-gebruikersinvoergebeurtenissen
• Voorbeeld van XAML-scrollen, -pannen en -zoomen
• Invoer: Bewegingen en manipulaties met GestureRecognizer