Inktbediening

Er zijn twee verschillende elementen om handschrift in Windows-apps mogelijk te maken: InkCanvas en InkToolbar.

Het besturingselement InkCanvas geeft peninvoer weer als een pennenstreek (met behulp van standaardinstellingen voor kleur en dikte) of een gumstreek. Dit bedieningselement is een transparante overlay die geen ingebouwde gebruikersinterface bevat voor het wijzigen van de standaardinstellingen voor pennenstreken.

Opmerking

InkCanvas kan worden geconfigureerd ter ondersteuning van vergelijkbare functionaliteit voor zowel muis- als aanraakinvoer.

Omdat het besturingselement InkCanvas geen ondersteuning bevat voor het wijzigen van de standaardinstellingen voor pennenstreken, kan het worden gekoppeld aan een InkToolbar-besturingselement. De InkToolbar bevat een aanpasbare en uitbreidbare verzameling knoppen waarmee inktgerelateerde functies in een bijbehorende InkCanvas worden geactiveerd.

De InkToolbar bevat standaard knoppen voor tekenen, wissen, markeren en een liniaal weergeven. Afhankelijk van de functie worden andere instellingen en opdrachten, zoals inktkleur, lijndikte, en alle inkt wissen, weergegeven in een flyout.

Opmerking

InkToolbar ondersteunt pen- en muisinvoer en kan worden geconfigureerd voor het herkennen van aanraakinvoer.

Is dit de juiste controle?

Gebruik De InkCanvas wanneer u basisfuncties voor inkt in uw app moet inschakelen zonder inktinstellingen aan de gebruiker te verstrekken.

Pennenstreken worden standaard weergegeven als inkt wanneer u de pentip gebruikt (een zwarte balpen met een dikte van 2 pixels) en als gum bij het gebruik van de gumtip. Als er geen gumtip aanwezig is, kan de InkCanvas worden geconfigureerd om invoer van de pentip te verwerken als een gumstreek.

Koppel de InkCanvas met een InkToolbar om een gebruikersinterface te bieden voor het activeren van inktfuncties en het instellen van eenvoudige inkteigenschappen, zoals pennenstreekgrootte, kleur en vorm van de pentip.

Opmerking

Gebruik het onderliggende InkPresenter-object voor uitgebreidere aanpassing van pennenstreken op een InkCanvas.

Overzicht van de werkbalk Inkt

Ingebouwde knoppen

De InkToolbar bevat de volgende ingebouwde knoppen:

pennen

• Balpen - tekent een ononderbroken, ondoorzichtige lijn met een cirkelpentip. De pennenstreekgrootte is afhankelijk van de gedetecteerde pendruk.
• Potlood - tekent een vloeiende, gestructureerde en semitransparante lijn (handig voor gelaagde arceringseffecten) met een cirkelpentip. De lijnkleur (duisternis) is afhankelijk van de gedetecteerde pendruk.
• Markeerstift: tekent een semitransparante lijn met een rechthoekpentip.

U kunt zowel het kleurenpalet als de groottekenmerken (min, max, standaard) aanpassen in de flyout voor elke pen.

Gereedschap

• Gum: verwijdert een pennenstreek die wordt aangeraakt. Houd er rekening mee dat de hele pennenstreek wordt verwijderd, niet alleen het gedeelte onder de gumstreek.

omschakelen

• Liniaal: hiermee wordt de liniaal weergegeven of verborgen. Wanneer u in de buurt van de rand van de liniaal tekent, klikt de inktlijn vast aan de liniaal.
  

Hoewel dit de standaardconfiguratie is, hebt u volledige controle over welke ingebouwde knoppen zijn opgenomen in de InkToolbar voor uw app.

Aangepaste knoppen

De InkToolbar bestaat uit twee afzonderlijke groepen knoptypen:

1. Een groep 'tool'-knoppen met de ingebouwde knoppen voor tekenen, wissen en markeren. Hier worden aangepaste pennen en gereedschap toegevoegd.

Opmerking

Functieselectie is wederzijds exclusief.

2. Een groep 'wisselknoppen' met de ingebouwde liniaalknop. Hier worden aangepaste wisselknoppen toegevoegd.

Opmerking

Functies sluiten elkaar niet uit en kunnen gelijktijdig worden gebruikt met andere actieve hulpprogramma's.

Afhankelijk van uw toepassing en de benodigde inktfunctionaliteit, kunt u een van de volgende knoppen (afhankelijk van uw aangepaste inktfuncties) toevoegen aan de InkToolbar:

• Aangepaste pen: een pen waarvoor het kleurenpalet en de eigenschappen van de pentip, zoals vorm, draaiing en grootte, worden gedefinieerd door de host-app.
• Aangepast hulpprogramma: een niet-penhulpprogramma dat is gedefinieerd door de host-app.
• Aangepaste wisselknop: hiermee stelt u de status van een door de app gedefinieerde functie in of uit. Wanneer deze functie is ingeschakeld, werkt deze in combinatie met het actieve hulpprogramma.

Opmerking

U kunt de weergavevolgorde van de ingebouwde knoppen niet wijzigen. De standaardweergavevolgorde is: Balpen, potlood, markeerstift, gum en liniaal. Aangepaste pennen worden toegevoegd aan de laatste standaardpen, aangepaste gereedschapsknoppen worden toegevoegd tussen de laatste penknop en de gumknop en aangepaste wisselknoppen worden toegevoegd na de liniaalknop. (Aangepaste knoppen worden toegevoegd in de volgorde waarin ze zijn opgegeven.)

Hoewel de InkToolbar een item op het hoogste niveau kan zijn, wordt het meestal weergegeven via een knop of opdracht 'Schrijven'. U wordt aangeraden de EE56-glyph van het Segoe MLD2 Assets-lettertype te gebruiken als een pictogram op het hoogste niveau.

Interactie tussen InkToolbar

Alle ingebouwde pen- en gereedschapsknoppen bevatten een flyoutmenu waarin inkteigenschappen en pentipvorm en -grootte kunnen worden ingesteld. Op de knop wordt een 'uitbreidingssymbool' weergegeven om het bestaan van het uitklapmenu aan te geven.

De flyout wordt weergegeven wanneer de knop van een actief hulpprogramma opnieuw is geselecteerd. Wanneer de kleur of grootte wordt gewijzigd, wordt de flyout automatisch gesloten en kan er weer met inkt worden gewerkt. Aangepaste pennen en hulpprogramma's kunnen de standaard flyout gebruiken of een aangepaste flyout opgeven.

De gum heeft ook een uitklapmenu met de opdracht Alle inkt wissen.

Bekijk het SimpleInk-voorbeeld voor meer informatie over aanpassing en uitbreidbaarheid.

Aanbevelingen

• De InkCanvas en inkt in het algemeen kunnen het beste worden ervaren door middel van een actieve pen. Het is echter aanbevolen om handschrift te ondersteunen met muis- en aanraakinvoer (inclusief passieve pen) als dat door uw app vereist is.
• Gebruik een InkToolbar-besturingselement met de InkCanvas om eenvoudige inktfuncties en -instellingen te bieden. Zowel de InkCanvas als de InkToolbar kunnen programmatisch worden aangepast.
• De InkToolbar en handschrift in het algemeen kunnen het beste worden ervaren door middel van een actieve pen. Tekenen met muis en aanraken kan echter, indien nodig, in uw app worden ondersteund.
• Als u inkt met aanraakinvoer ondersteunt, raden we aan het ED5F-pictogram uit het lettertype Segoe MLD2 Assets te gebruiken voor de wisselknop, met als knoptekst "Tikschrijven".
• Als u opties voor pennenstreken biedt, raden we aan het EF20-pictogram te gebruiken uit het lettertype Segoe MLD2 Assets voor de toolknop, met als knopinfo 'Selectiehulpmiddel'.
• Als u meer dan één InkCanvas gebruikt, raden we u aan om één InkToolbar te gebruiken om inkt in verschillende canvassen te beheren.
• Voor optimale prestaties raden we aan de standaarduitklapfunctie aan te passen in plaats van een nieuwe uitklapfunctie te maken voor zowel standaard- als aangepaste tools.

Voorbeelden

Microsoft Edge

Microsoft Edge maakt gebruik van de InkCanvas en InkToolbar voor Webnotities.

Windows Ink-werkruimte

De InkCanvas- en InkToolbar worden ook gebruikt voor Snip & Sketch in de Windows Ink-werkruimte.

Een InkCanvas en InkToolbar maken

• UWP-API's:InkCanvas-klasse, Klasse InkToolbar, InkPresenter-klasse, Windows.UI.Input.Inking
• Open de App WinUI 2 Gallery en bekijk de InkingControls in actie. De WinUI 2 Gallery-app bevat interactieve voorbeelden van de meeste Besturingselementen, functies en functionaliteit van WinUI 2. Download de app uit de Microsoft Store of bezoek GitHubvoor de broncode.

Voor het toevoegen van een InkCanvas aan uw app is slechts één regel markeringen vereist:

<InkCanvas x:Name="myInkCanvas"/>

Opmerking

Zie voor gedetailleerde aanpassingen van InkCanvas met InkPresenter het artikel 'Peninteracties en Windows Ink in Windows-apps'.

Het besturingselement InkToolbar moet worden gebruikt in combinatie met een InkCanvas. Voor het opnemen van een InkToolbar (met alle ingebouwde tools) in je app is slechts één extra regel markup vereist.

<InkToolbar TargetInkCanvas="{x:Bind myInkCanvas}"/>

Hiermee wordt de volgende InkToolbar weergegeven:

De voorbeeldcode halen

• SimpleInk-voorbeeld - Demonstreert 8 scenario's rond de aanpassings- en uitbreidbaarheidsmogelijkheden van de besturingselementen InkCanvas en InkToolbar. Elk scenario biedt basisrichtlijnen voor veelvoorkomende inktsituaties en controle-implementaties.
• ComplexInk-voorbeeld - Demonstreert geavanceerdere inktscenario's.
• WinUI 2 Gallery-voorbeeld - Bekijk alle XAML-besturingselementen in een interactieve indeling.

Verwante artikelen

• Pen-interacties en Windows Ink in Windows-apps
• Pennenstreken in Windows herkennen als tekst en vormen
• Gegevens van Windows Ink-pennenstreken opslaan en ophalen